TypeScript: Select typings are incorrect for options parameter

After working around #2538 using patch-package I ran into further issues with the Select typings not accepting an array of string as options:

Expected Behavior

When using TypeScript, the Select component should accept an array of strings as a valid value for the options property.

import { Select } from 'grommet';
import * as React from 'react';

const options = ['first', 'second', 'third'];

export const ExampleComponent: React.FunctionComponent = () => (
  <Select value="first" options={options} />
);

Actual Behavior

TypeScript complains about string not being assignable to object

Type 'string[]' is not assignable to type 'string | Element | object[]'.
  Type 'string[]' is not assignable to type 'object[]'.
    Type 'string' is not assignable to type 'object'.

This is due to the following typing:

  options: string | JSX.Element | object[];

Which I believe instead should be:

  options: string[] | JSX.Element[] | object[];

URL, screen shot, or Codepen exhibiting the issue

(I attempted to do this in CodeSandbox but couldn’t seem to get it working with TypeScript. Happy to try another way if this doesn’t suffice!)

Steps to Reproduce

1. create-react-app my-app --scripts-version=react-scripts-ts
2. yarn add grommet styled-components
3. Manually fix the incorrect typings from #2538 in node_modules/grommet/components/Select/index.d.ts
4. Attempt to use the Select component, passing an array of strings to the options parameter (see example above)
5. yarn run build

Your Environment

• Grommet version: 2.1.1
• TypeScript Version: 3.2.2
• Browser Name and version: N/A
• Operating System and version (desktop or mobile): MacOS 10.12.6

[jasnross]

Thinking about this more, the other type that is maybe more in the spirit of the existing PropTypes would be:

Array<string | JSX.Element | object>

This way it matches the original PropTypes definition, where the array can be of mixed types.

In that case it would be a fix in how react-desc generates the type for an arrayOf, so that it wraps the list of types in Array<> rather than appending a [].

Here is what that could look line in react-desc: https://github.com/jasnross/react-desc/commit/0c93e6190b0f5f5016df90f17427dd113b318e54

[jasnross]

I began working on a fix for this issue but I’m not sure if it’s the right approach.

Would love some feedback and if it seems good I can submit it as a PR:

https://github.com/jasnross/grommet/commit/5bd82c738270eceadebdcafed2bfb0d7cba7ac75

Basically the approach is to change the PropTypes def for options from:

PropTypes.arrayOf(
  PropTypes.oneOfType([
    PropTypes.string,
    PropTypes.element,
    PropTypes.object
  ])
)

to:

PropTypes.oneOfType([
  PropTypes.arrayOf(PropTypes.string),
  PropTypes.arrayOf(PropTypes.element),
  PropTypes.arrayOf(PropTypes.object)
])

This way react-desc understands that each possible value is itself an array of a single type.