CustomSelectControl: support generic props type

[meteorlxy]

What?

Fixes #63984

Why?

It would be helpful to infer the option type

How?

• Making the CustomSelectProps a generic type
• Exporting CustomSelectOption and CustomSelectChangeObject type

Testing Instructions

Using the following snippet to see if the selectedItem type is inferred correctly:

import { CustomSelectControl } from '@wordpress/components';
import type { CustomSelectOption } from '@wordpress/components/build-types/custom-select-control/types';

type MyOption = CustomSelectOption & {
  foo: string;
};

const options: MyOption[] = [
  {
    key: 'none',
    name: 'None',
    foo: 'bar',
  },
  {
    key: 'foo',
    name: 'Foo',
    foo: 'bar',
  },
];

const render = () => (
  <CustomSelectControl
    label="foo"
    onChange={({ selectedItem }) => {
      console.log(selectedItem.foo);
    }}
    options={options}
    value={options[0]}
  />
);

Testing Instructions for Keyboard

N/A

Screenshots or screencast

Before

After

[github-actions]

The following accounts have interacted with this PR and/or linked issues. I will continue to update these lists as activity occurs. You can also manually ask me to refresh this list by adding the props-bot label.

If you're merging code through a pull request on GitHub, copy and paste the following into the bottom of the merge commit message.

Co-authored-by: meteorlxy <meteorlxy@git.wordpress.org>
Co-authored-by: tyxla <tyxla@git.wordpress.org>
Co-authored-by: jsnajdr <jsnajdr@git.wordpress.org>
Co-authored-by: mirka <0mirka00@git.wordpress.org>

To understand the WordPress project's expectations around crediting contributors, please review the Contributor Attribution page in the Core Handbook.

[github-actions]

👋 Thanks for your first Pull Request and for helping build the future of Gutenberg and WordPress, @meteorlxy! In case you missed it, we'd love to have you join us in our Slack community.

If you want to learn more about WordPress development in general, check out the Core Handbook full of helpful information.

[tyxla]

Since this is a type change, I believe it should be under Internal instead.

[meteorlxy]

Cuz the type will be used by user, and will improve the developer experience, I think it's more of an improvement / enhancement?

[tyxla]

IMHO, types and type changes are an internal kind of enhancement, and we have this "Internal" group to distinguish them. General Enhancements would usually be targeted towards end users.

[tyxla]

Should we add a default to the generic so any existing consumers will continue working without changing anything?

The same question applies to all instances where we're adding a generic and there wasn't one before.

[meteorlxy]

The generic param is not going to be set manually by user. It's used for type inferring. To be specific, it will use the item type of the options prop automatically. So consumers would not need to change anything.

You could checkout this branch and test with the snippets that pasted in the "Testing Instructions" section.

[jsnajdr]

TypeScript should always be able to infer the T type. CustomSelectProps have a mandatory options: Array<T> field, so T is always the type of whatever you pass as options, it's easy to infer. TypeScript will merely check if that type is compatible with CustomSelectOption.

[tyxla]

This looks good and tests well in my editor, thanks for the contribution @meteorlxy 🙌

The only thing I'd change would be to move the CHANGELOG entry to "Internal".

[meteorlxy]

@tyxla updated

[tyxla]

Do we need to export this one? Seems like we don't.

[meteorlxy]

It would be useful if user want to get the ChangeObject type, otherwise we have to use the following snippet to get the type:

[tyxla]

Right 👍

Exporting it here doesn't export it from the package, though. And if we're not importing it inside the package, then it's effectively unnecessary to export it, IMHO. We can always start exporting it if we need to in the future.

[mirka]

Yes, at the moment we are avoiding public type exports as much as possible, thanks 🙏

[meteorlxy]

ok, removed

[mirka]

Looks good, thank you! 🚀