Add menuWidth & expose align props in ComboBox and SearchAutocomplete

[sookmax]

Closes #5430

Hello, this PR adds a new prop menuWidth to both ComboBox and SearchAutocomplete React Spectrum components. This prop is identical to that of Picker's, which allows the user to specify the width of the popover to their preference.

While adding the prop, I noticed the align part of placement prop for Popover used in both ComboBox and SearchAutocomplete was fixed to end. This unfortunately results in the exact opposite positioning to Picker's popover when the popover width is wider than the trigger element. So to better align with Picker's behavior, I exposed an additional prop align and set its default to start in both ComboBox and SearchAutocomplete. There may be a reason for having 'end' align for both of these components that I'm not aware of, so I'd like a confirmation from the core team about this.

Thanks.

✅ Pull Request Checklist:

• Included link to corresponding React Spectrum GitHub Issue.
• Added/updated unit tests and storybook for this change (for new code or code which already has tests).
• Filled out test instructions.
• Updated documentation (if it already exists for this component).
• Looked at the Accessibility Practices for this feature - Aria Practices

📝 Test Instructions:

Combobox

story

1. go to http://localhost:9003/?path=/story/combobox--default&providerSwitcher-express=false&strict=true
2. test the new prop menuWidth using 'width' and 'menuWidth' controls in that story.

docs

1. go to http://localhost:1234/react-spectrum/ComboBox.html#props
2. check if the props menuWidth and align are listed with proper descriptions.

SearchAutocomplete

story

1. go to http://localhost:9003/?path=/story/searchautocomplete--default&providerSwitcher-express=false&strict=true
2. test the new prop menuWidth using 'width' and 'menuWidth' controls in that story.

docs

1. go to http://localhost:1234/react-spectrum/SearchAutocomplete.html#props
2. check if the props menuWidth and align are listed with proper descriptions.

🧢 Your Project:

[reidbarber]

GET_BUILD

[rspbot]

Build successful! 🎉

• View the storybook
• View the storybook-17
• View the storybook-16
• View the documentation

[reidbarber]

LGTM

[snowystinger]

Looks pretty good, one small suggestion.

Note to team, before merging, please run chromatic.

[reidbarber]

GET_BUILD

[rspbot]

Build successful! 🎉

• View the storybook
• View the storybook-17
• View the storybook-16
• View the documentation

[rspbot]

## API Changes

unknown top level export { type: 'any' }
unknown top level export { type: 'any' }
unknown top level export { type: 'any' }
unknown top level export { type: 'any' }
unknown top level export { type: 'any', access: 'private' }
unknown top level export { type: 'any', access: 'private' }
unknown top level export { type: 'any' }
unknown top level export { type: 'any' }
unknown top level export { type: 'any' }
unknown top level export { type: 'any' }
unknown top level export { type: 'identifier', name: 'Column' }
unknown top level export { type: 'identifier', name: 'Column' }
unknown type { type: 'link' }
unknown type { type: 'link' }
unknown type { type: 'link' }
unknown type { type: 'link' }
unknown type { type: 'link' }
unknown type { type: 'link' }
unknown top level export { type: 'any' }
unknown top level export { type: 'any' }
unknown top level export { type: 'any' }
unknown top level export { type: 'any' }
unknown top level export { type: 'any' }
unknown top level export { type: 'any' }
Section already in set

@react-spectrum/autocomplete

Section

 SpectrumSearchAutocompleteProps<T> {
+  align?: Alignment = 'start'
   defaultInputValue?: string
   defaultItems?: Iterable<T>
   direction?: 'bottom' | 'top' = 'bottom'
   icon?: ReactElement | null
   inputValue?: string
   isQuiet?: boolean
   items?: Iterable<T>
   loadingState?: LoadingState
   menuTrigger?: MenuTriggerAction = 'input'
+  menuWidth?: DimensionValue
   onInputChange?: (string) => void
   onLoadMore?: () => void
   onOpenChange?: (boolean, MenuTriggerAction) => void
   onSubmit?: (string | null, Key | null) => void
 }
 

---

@react-spectrum/combobox

Section

 SpectrumComboBoxProps<T> {
+  align?: Alignment = 'start'
   allowsCustomValue?: boolean
   defaultInputValue?: string
   defaultItems?: Iterable<T>
   direction?: 'bottom' | 'top' = 'bottom'
   formValue?: 'text' | 'key' = 'text'
   inputValue?: string
   isQuiet?: boolean
   items?: Iterable<T>
   loadingState?: LoadingState
   menuTrigger?: MenuTriggerAction = 'input'
+  menuWidth?: DimensionValue
   onInputChange?: (string) => void
   onOpenChange?: (boolean, MenuTriggerAction) => void
   shouldFlip?: boolean = true
   shouldFocusWrap?: boolean
 

---

[reidbarber]

LGTM