Select: Overflow ellipsis and control over multi value wrapping

[torkelo]

We are using Select & MultiSelect for variable value selection in scenes (so in app plugins and new core dashboards).

grafana/scenes#399

• Overflow behavior (ellipsis) The "maxVisibleValues" is a not a good solution I think as it does not take into account the width of each value. Need to figure out something that is more adaptive / dynamic to value width.
• Option to control No wrapping of values when not opened.

Done

• New no wrapping option (noMultiValueWrap). Disables wrapping when the menu is closed. Only relevant for MultiSelect as normal Select never wraps
• Add text truncation to multi-value items that do not fit.

Before:

A long value:

Many values that cause wrapping

After:
Single long value and noMultiValueWrap=true

maxVisibleItems = 4 and noMultiValueWrap=true

Unrelated fixes

• Trying to reduce the number of new components that are created on every render (lots of component functions are created on every render and passed to react-select via components). I think this is mainly due to it makes typing easier, and there is no need to pass custom props via selectProps.
• Typing is a nightmare, I am trying to improve things but it feels like you spend 99% time on typescript issues than anything else. Need help from someone who has time to dig into select typing in a different PR preferably.

[github-actions]

⚠️   Possible breaking changes

(Open the links below in a new tab to go to the correct steps)

grafana-ui has possible breaking changes (more info)

Console output
Read our guideline

[Clarity-89]

I think this looks good in general, just wonder if the whole truncate behavior should be configurable via a prop? I assume there could be instances where the users of the component would not want to truncate the values for their own reasons and considering that this is the most widely used component we have, the number of such cases could be non-trivial.

[torkelo]

@Clarity-89 The truncation only kicks in when the new option "noMultiValueWrap" is true. The non-multi-value select already truncates long values that do not fit, we have no option for that there so why have it for MultiSelect? I think this is a safe new behavior that should not change any current multi-selects (As they will continue to wrap and hence show no truncation )