v2 [TypeScript] More accurate typings

While playing around with v2 and TypeScript, I ran into the following problem:

import { TextInput } from 'grommet';

type Handler = React.KeyboardEventHandler<HTMLInputElement>;
const handler: Handler = ({key}) => console.log(key); 
const Input = () => <TextInput onKeyUp={handler} /> // <-- TypeScript complains here

The problem is that the onKeyUp property is not included in the typings. Looking at the code, if not for the typings, I believe this would actually work as intended: TextInput.js#L338.

This is definitely a broader problem: the typings should extend the typings for the appropriate html element, in this case probably input. That would take care of all the attributes you assume you should be able to set for e.g. TextInput.

[hc-12]

I too have stumbled into this problem when using TextInput.

The fix for this particular case, I just need to extend or intersect with IntrinsicElements['input']. This would need to be done for the rest of the components that grommet extends from.

declare const TextInput: React.ComponentType<TextInputProps & JSX.IntrinsicElements['input']>;

[hc-12]

This is somewhat related, not sure whether i should open a new issue. There’s an incorrect type for props that accepts string value and boolean. At the moment they all accept string as value which is incorrect and will get console warning.

For example in Box.flex & Box.fill:

flex?: "grow" | "shrink" | "true" | "false";
fill?: "horizontal" | "vertical" | "true" | "false";

The type should probably be:

flex?: "grow" | "shrink" | boolean;
fill?: "horizontal" | "vertical" | boolean;