feat(ui5-combobox): introduce nested grouping of items

[ndeshev]

Replace flat item structure with nested grouping.

Removes the ui5-cb-group-item component.

BREAKING CHANGE: The ui5-cb-group-item component is removed. Groups can now be created with the ui5-cb-item-group. Instead of using the old ui5-cb-group-item as separator in a flat structure:

<ui5-cb-group-item text="A"></ui5-cb-group-item>
<ui5-cb-item text="Algeria"></ui5-cb-item>
<ui5-cb-item text="Argentina"></ui5-cb-item>
<ui5-cb-item text="Australia"></ui5-cb-item>
<ui5-cb-item text="Austria"></ui5-cb-item>

The API supports nesting of ui5-cb-item components inside an ui5-cb-item-group:

<ui5-cb-item-group text="A">
	<ui5-cb-item text="Algeria"></ui5-cb-item>
	<ui5-cb-item text="Argentina"></ui5-cb-item>
	<ui5-cb-item text="Australia"></ui5-cb-item>
	<ui5-cb-item text="Austria"></ui5-cb-item>
</ui5-cb-item-group>

[ivoplashkov]

Reproducible on main branch:

• Navigate through the items using arrow down and then navigate through the value with arrow left/right and then navigate the items again => value gets partially selected instead of completely selected.
• When you have items with grouping and you select an item with enter, then open picker and press Enter on the group, change event is fired (because the value get cleared, but not sure if this should happen as this cannot be achieved with mouse as the group item is not clickable).
• Click on items with grouping sample and press Shift + tab, sample remains visually focused.

Bugs introduced with the change:

Items with grouping sample:

• focus input without opening the picker and navigate through the values using ArrowDown => only items from the first group are being selected.
• same interaction as above but instead of ArrowDown, navigate with Fn + ArrowDown until you hit “Madagascar”, upon ArrowUp => exception is thrown.
• Open picker, navigate to any item and press Alt + Down => value gets cleared
• Open picker, navigate down the items with ArrowDown => Upon reaching Australia picker gets scrolled to the bottom for no reason.
• Open picker, press End button => picker is not scrolled to the last item.

[ivoplashkov]

Can we add some tests for the fixed issues?

[simonarangelova]

Replace flat item structure with nested grouping.

Removes the ui5-cb-group-item component.

BREAKING CHANGE: The ui5-cb-group-item component is removed. Groups can now be created with the ui5-cb-item-group. Instead of using the old ui5-cb-group-item as separator in a flat structure:

<ui5-cb-group-item text="A"></ui5-cb-group-item>
<ui5-cb-item text="Algeria"></ui5-cb-item>
<ui5-cb-item text="Argentina"></ui5-cb-item>
<ui5-cb-item text="Australia"></ui5-cb-item>
<ui5-cb-item text="Austria"></ui5-cb-item>

The API supports nesting of ui5-cb-item components inside an ui5-cb-item-group:

<ui5-cb-item-group text="A">
	<ui5-cb-item text="Algeria"></ui5-cb-item>
	<ui5-cb-item text="Argentina"></ui5-cb-item>
	<ui5-cb-item text="Australia"></ui5-cb-item>
	<ui5-cb-item text="Austria"></ui5-cb-item>
</ui5-cb-item-group>