docs: Add more Autocomplete examples #7827
Merged
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
…ete-example # Conflicts: # packages/react-aria-components/docs/Autocomplete.mdx
devongovett
commented
Feb 25, 2025
| @@ -487,14 +488,19 @@ export function useSelectableCollection(options: AriaSelectableCollectionOptions | |||
| if (focusedKey == null && !shouldUseVirtualFocus && ref.current) { | |||
| focusSafely(ref.current); | |||
| } | |||
|
|
|||
| // Wait until the collection has items to autofocus. | |||
There was a problem hiding this comment.
Previously we delayed rendering the menu until the collection had items, but we can't do this anymore now that we have empty state support. Instead, delay auto focusing until the collection is filled.
## API Changes
react-aria-components/react-aria-components:Menu Menu <T extends {}> {
aria-describedby?: string
aria-details?: string
aria-label?: string
aria-labelledby?: string
autoFocus?: boolean | FocusStrategy
children?: ReactNode | ({}) => ReactNode
- className?: string
+ className?: string | ((MenuRenderProps & {
+ defaultClassName: string | undefined
+})) => string
defaultSelectedKeys?: 'all' | Iterable<Key>
dependencies?: ReadonlyArray<any>
disabledKeys?: Iterable<Key>
disallowEmptySelection?: boolean
id?: string
items?: Iterable<T>
onAction?: (Key) => void
onClose?: () => void
onScroll?: (UIEvent<Element>) => void
onSelectionChange?: (Selection) => void
+ renderEmptyState?: () => ReactNode
selectedKeys?: 'all' | Iterable<Key>
selectionMode?: SelectionMode
shouldFocusWrap?: boolean
slot?: string | null
- style?: CSSProperties
+ style?: CSSProperties | ((MenuRenderProps & {
+ defaultStyle: CSSProperties
+})) => CSSProperties | undefined
}/react-aria-components:MenuProps MenuProps <T> {
aria-describedby?: string
aria-details?: string
aria-label?: string
aria-labelledby?: string
autoFocus?: boolean | FocusStrategy
children?: ReactNode | (T) => ReactNode
- className?: string
+ className?: string | ((MenuRenderProps & {
+ defaultClassName: string | undefined
+})) => string
defaultSelectedKeys?: 'all' | Iterable<Key>
dependencies?: ReadonlyArray<any>
disabledKeys?: Iterable<Key>
disallowEmptySelection?: boolean
id?: string
items?: Iterable<T>
onAction?: (Key) => void
onClose?: () => void
onScroll?: (UIEvent<Element>) => void
onSelectionChange?: (Selection) => void
+ renderEmptyState?: () => ReactNode
selectedKeys?: 'all' | Iterable<Key>
selectionMode?: SelectionMode
shouldFocusWrap?: boolean
slot?: string | null
- style?: CSSProperties
+ style?: CSSProperties | ((MenuRenderProps & {
+ defaultStyle: CSSProperties
+})) => CSSProperties | undefined
}@react-spectrum/s2/@react-spectrum/s2:Menu Menu <T extends {}> {
UNSAFE_className?: string
UNSAFE_style?: CSSProperties
aria-describedby?: string
aria-details?: string
aria-label?: string
aria-labelledby?: string
autoFocus?: boolean | FocusStrategy
children: ReactNode | ({}) => ReactNode
defaultSelectedKeys?: 'all' | Iterable<Key>
disabledKeys?: Iterable<Key>
disallowEmptySelection?: boolean
hideLinkOutIcon?: boolean
id?: string
items?: Iterable<T>
onAction?: (Key) => void
onClose?: () => void
onScroll?: (UIEvent<Element>) => void
onSelectionChange?: (Selection) => void
+ renderEmptyState?: () => ReactNode
selectedKeys?: 'all' | Iterable<Key>
selectionMode?: SelectionMode
shouldFocusWrap?: boolean
size?: 'S' | 'M' | 'L' | 'XL' = 'M'
styles?: StylesProp
}/@react-spectrum/s2:MenuProps MenuProps <T> {
UNSAFE_className?: string
UNSAFE_style?: CSSProperties
aria-describedby?: string
aria-details?: string
aria-label?: string
aria-labelledby?: string
autoFocus?: boolean | FocusStrategy
children: ReactNode | (T) => ReactNode
defaultSelectedKeys?: 'all' | Iterable<Key>
disabledKeys?: Iterable<Key>
disallowEmptySelection?: boolean
hideLinkOutIcon?: boolean
id?: string
items?: Iterable<T>
onAction?: (Key) => void
onClose?: () => void
onScroll?: (UIEvent<Element>) => void
onSelectionChange?: (Selection) => void
+ renderEmptyState?: () => ReactNode
selectedKeys?: 'all' | Iterable<Key>
selectionMode?: SelectionMode
shouldFocusWrap?: boolean
size?: 'S' | 'M' | 'L' | 'XL' = 'M'
styles?: StylesProp
} |
|
Do we want to expose |
reidbarber
reviewed
Feb 25, 2025
| <XIcon aria-hidden className="w-4 h-4" /> | ||
| </Button> | ||
| </SearchField> | ||
| <ListBox items={languages} className="outline-hidden p-1 overflow-auto flex-1 scroll-pb-1"> |
There was a problem hiding this comment.
Should we add renderEmptyState to the two examples?
Seems like a good idea, though we could also add it later if we're unsure right |
snowystinger
approved these changes
Feb 25, 2025
There was a problem hiding this comment.
Do we want a card for Autocomplete at the bottom here with the other components?
https://reactspectrum.blob.core.windows.net/reactspectrum/1395e6852d2255e581c5aa7cd75f91f734a66d1c/docs/react-aria/examples/searchable-select.html
eventually yes. maybe once it is GA? we don't have the card for the home pages yet which is usually what we use here |
reidbarber
approved these changes
Feb 26, 2025
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Adds a styled Searchable Select example. Also adds an async loading example to the docs, and added
renderEmptyStateto menu to support this. Removed the "State" example because the clear button is already in the search field so didn't seem necessary.Updated text of the features section to specifically mention some of the UI patterns that can be built with Autocomplete, and tried to describe the difference with ComboBox.