Replace attribute dropdown with Gutenberg Combobox component

[louwie17]

Prerequisites (mark completed items with an [x]):

• I have checked that my issue type is not listed here https://github.com/woocommerce/woocommerce/issues/new/choose
• My issue is not a security issue, support request, bug report, enhancement or feature request (Please use the link above if it is).

Issue Description:

As part of #35851 we need to enable keyboard support to the dropdowns, this has already been largely supported by the Gutenberg Combobox and Formtoken field components.
This issue specifically addresses the replacement of the Attribute/Variation dropdown in the attribute/variation addition modal.

Acceptance criteria

• AttributeInputField component should make use of GB ComboboxControl component: https://wordpress.github.io/gutenberg/?path=/docs/components-comboboxcontrol--docs
• Attribute field should work the same way ( only exception being the post fix icon, which is not supported in GB, please create an issue for this in GB ).

Current issues

UI/UX issues

Beta Give feedback

1. Product Block Editor: After adding/selecting the attribute, it goes back and forth to the old one #46586
   focus: new product ux team: Mothra +2
   
2. Product Block Editor: Previous values are populated to the new selected attribute #46587
   focus: new product ux team: Mothra +2
   
3. Product Block Editor: selector doesn't populate with the last attribute added #46590
   focus: new product ux team: Mothra +2
   
4. Product Block Editor: Selector doesn't clean the selected option #46603
   focus: new product ux team: Mothra +2
5. Product Block Editor: Variations option sections hidden in mobile #46641
   focus: new product ux team: Mothra +2
6. Product Block Editor: it is not clear the current attribute is selected when creating new opt #46712
   focus: new product ux team: Mothra +2
   
7. Product Block Editor: weird caret position of attributes values component #47057
   focus: product team: Mothra +2
   
8. Product Block Editor: the attribute values component loses the box style #47059
   focus: new product ux team: Mothra +2

Enhancements

Beta Give feedback

1. Product Block Editor: update attributes list optimistically #46716
   focus: new product ux team: Mothra +2
   
2. Product Block Editor: introduce component based on ComboboxControl core component #46913
   team: Mothra +1
   
3. Product Block Editor: add AttributesComboboxControl prop to allow creating attrs with the same name #46954
   focus: new product ux team: Mothra +2
4. Product Block Editor: move logic to pull product attributes from Selector to Modal component #46655
   focus: new product ux needs: external testing status: analysis complete team: Mothra +4
   
5. Product Block Editor: move logic to add new attributes to modal component #47058
   focus: new product ux needs: internal testing status: analysis complete team: Mothra +4
   
6. Product Block Editor: improve process of adding a new attribute #47263
   focus: product team: Mothra +2

Janitorial

Beta Give feedback

1. Product Block Editor: cleanmarkedAttributes object #46636
   focus: new product ux team: Mothra +2
   
2. Product Block Editor: organize product attribute TS types #46908
   team: Mothra +1
   
3. Product Block Editor: tidy product attribute TS types #46998
   focus: new product ux status: analysis complete team: Mothra +3
   

Upstream ComboboxControl

Beta Give feedback

1. Components: ComboboxControl Item should support disabled option WordPress/gutenberg#60969
   [Package] Components +1
   
2. Components: introduce Combobox expandOnFocus property WordPress/gutenberg#61705
   [Package] Components [Type] Enhancement +2
   

[retrofox]

Although there is room to improve and polish the implementation, I think we can close this one.