Hey, what do you think of adding type definition support in this select dropdown?

[FrancoAguzzi]

Is your feature request related to a problem? Please describe.

Being a problem or not depends on the eyes of the seer.

The support I'd love to see is this Select Dropdown being a way of people defining default typed object properties values.

Describe the solution you'd like

How?

Nowadays, defining typed objects is a challenge for me.

I am not the only one? IDK -- maybe I didn't find the way to do so?

The desire: typed objects setting via Storybook UI.
The gap: object controls in Storybook UI are ruleless as per my raw Storybook knowledges.
The solution I found: setting options and mapping objects for these options that are for sure objects of the property type.
The problem with the solution: I cannot initialize my .stories UI documentation with some value included in the options array, resulting in "Choose option..." label display in Select dropdown default option.
How I wished to fix this?: by using render function, I tried to mutate price to be the first value of options with the below code snippet:

export const LargeDisplaySize: Story = {
  args: {
    displaySize: PriceDisplaySize.Large,
  },
  render: (args, ctx) => {
    /**
     * Gather existing pre-defined `DisplayedPrice` stories
     * configuration and gets `options` and `mapping` values
     * in order to set the first element of `options` as default `price`
     * (a `DisplayedPrice`) property value.
     *
     * This enhances storybook's storie's documentation UI (through a select dropdown,
     * the story is now able to set one of the `options` as the default `option` of `select`).
     */
    const defaultPriceArgTypesOptions = ctx.argTypes.price.options;
    const defaultPriceArgTypesMapping = ctx.argTypes.price.mapping;

    let price: Price;
    if (!!defaultPriceArgTypesOptions && defaultPriceArgTypesMapping) {
      price = defaultPriceArgTypesMapping[defaultPriceArgTypesOptions[0]];
    }

    return <DisplayedPrice {...args} price={price}></DisplayedPrice>;
  },
};

Why my approach did not work?: because SingleSelect Storybook component defines selectedKey only at render execution. On value update, SingleSelect does not update selectedKey because selectedKey is a defined as const.
How could this be different?: if selectedKey was a state (useState) and Storybook had an useEffect with the dependency array as [value], whenever value is modified, selectedKey would be modified as well.

Describe alternatives you've considered

Note: adding this enhancement can be good for the use case of giving creators the ability of creating custom and dynamic documentation depending on visitor's interaction with Ui components, since below code creates 1 log per visitor prop change:

  render: (args, ctx) => {
    useEffect(() => {
      alert(args);
    }, [args]);

OK, no more over-ideating now, what do you think about supporting creators to manage SingleSelect controls, programatically?

I appreciate your attention,

Wish you have a great time 🍞🙏🏼

Are you able to assist to bring the feature to reality?

yes, I can

Additional context

I'd be comfortably realized to open a PR with this proposed enhancement for your lib 🙂