[ts] selectedItem type definition for controlled usage

[mattrothenberg]

• downshift version: latest
• node version: 12.31.
• npm (or yarn) version: 1.21.

Relevant code or config

interface Item = {
  label: string;
  value: string;
}
const [selectedItem, setSelectedItem] = React.useState<Item|null>(null);
const props = useCombobox({selectedItem});

What you did:
In trying to control a Combobox by passing a null value to it, I get a TS error since the type definition of selectedItem expects either an Item or undefined. As far as I understand from reading the docs, passing an undefined value here suggests that you want to use the combobox in an uncontrolled manner, which is not what I'm after.

https://github.com/downshift-js/downshift/blob/master/typings/index.d.ts#L417

 selectedItem?: Item // Null values are not allowed here, meaning you get a TS error when you try to control this prop.

What happened:

Type '{ value: string; label: string; } | null' is not assignable to type 'ItemBase | undefined'.
  Type 'null' is not assignable to type 'ItemBase | undefined'.ts(2322)

Reproduction repository:
https://codesandbox.io/s/unruffled-elion-1fx0s?file=/src/App.tsx

Suggested solution:
Should the type definition for selectedItem be expanded to include null types as well?

[silviuaavram]

Makes sense, all typings for the hooks in this case should be updated. Will this be a breaking change?

[mattrothenberg]

@silviuaavram Great question. It's difficult to say whether it will be a breaking change, since the current type definitions are arguably already "broken" for Typescript users who wish to control the selectedItem prop and have probably resorted to things like // @ts-ignore in order to suppress these compilation errors.

Let me reach out to some TS wizards to see what the ideal Type definition should be here. Something feels off about simply expanding the type thusly, but I'm admittedly not super knowledgable here 👇

interface UseComboboxParams {
    selectedItem?: Item | null;
}

[silviuaavram]

That would be awesome. Thanks @mattrothenberg !

[silviuaavram]

🎉 This issue has been resolved in version 6.0.0 🎉

The release is available on:

• npm package (@latest dist-tag)
• GitHub release

Your semantic-release bot 📦🚀