feat: Async loading support for S2 ComboBox/Picker #7938
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
…and data-attributes
LFDanLu
changed the title
LFDanLu
changed the title
LFDanLu
commented
Apr 10, 2025
There was a problem hiding this comment.
Make a new hook since util package version might not match up with pinned version of tableview/etc, which makes this a breaking change
LFDanLu
commented
Apr 10, 2025
Comment on lines
51
to
56
| // TODO: do we want loadingState for RAC Combobox or just S2 | ||
| /** | ||
| * Whether the combobox is currently loading items. | ||
| * @selector [data-loading] | ||
| */ | ||
| isLoading?: boolean |
There was a problem hiding this comment.
For now see about moving isLoading to the loading spinner? Otherwise, just make sure the followup refactor goes in before next release
LFDanLu
commented
Apr 10, 2025
| @@ -230,6 +235,21 @@ function ListBoxInner<T extends object>({state: inputState, props, listBoxRef}: | |||
| ); | |||
| } | |||
|
|
|||
| let sentinelRef = useRef(null); | |||
| // TODO: Should scrollOffset for useLoadMore should be configurable by the user | |||
LFDanLu
commented
Apr 10, 2025
Comment on lines
+251
to
+252
| // TODO: Think about if completely empty state. Do we leave it up to the user to setup the two states for empty and empty + loading? | ||
| // Do we add a data attibute/prop/renderprop to ListBox for isLoading |
There was a problem hiding this comment.
Keep renderEmptyState, will be clearer with refactor to loadingSentinel
revert v3 components to still use old useLoadMore
render a sentinel in the loading indicator always and call useLoadMoreSentinel from there instead. This allows the user to theoretically render as many sentinels as they want with each having its own loading state/logic
## API Changes
react-aria-components/react-aria-components:ColorWheelTrack ColorWheelTrack {
className?: string | ((ColorWheelTrackRenderProps & {
defaultClassName: string | undefined
})) => string
+ id?: string
style?: CSSProperties | ((ColorWheelTrackRenderProps & {
defaultStyle: CSSProperties
})) => CSSProperties | undefined
}/react-aria-components:GridList GridList <T extends {}> {
aria-describedby?: string
aria-details?: string
aria-label?: string
aria-labelledby?: string
autoFocus?: boolean | FocusStrategy
children?: ReactNode | ({}) => ReactNode
className?: string | ((GridListRenderProps & {
defaultClassName: string | undefined
})) => string
defaultSelectedKeys?: 'all' | Iterable<Key>
dependencies?: ReadonlyArray<any>
disabledBehavior?: DisabledBehavior
disabledKeys?: Iterable<Key>
disallowEmptySelection?: boolean
disallowTypeAhead?: boolean = false
dragAndDropHooks?: DragAndDropHooks
escapeKeyBehavior?: 'clearSelection' | 'none' = 'clearSelection'
id?: string
items?: Iterable<T>
keyboardNavigationBehavior?: 'arrow' | 'tab' = 'arrow'
layout?: 'stack' | 'grid' = 'stack'
onAction?: (Key) => void
onScroll?: (UIEvent<Element>) => void
onSelectionChange?: (Selection) => void
renderEmptyState?: (GridListRenderProps) => ReactNode
selectedKeys?: 'all' | Iterable<Key>
selectionBehavior?: SelectionBehavior
selectionMode?: SelectionMode
- shouldSelectOnPressUp?: boolean
slot?: string | null
style?: CSSProperties | ((GridListRenderProps & {
defaultStyle: CSSProperties
})) => CSSProperties | undefined/react-aria-components:ListBox ListBox <T extends {}> {
aria-describedby?: string
aria-details?: string
aria-label?: string
aria-labelledby?: string
autoFocus?: boolean | FocusStrategy
children?: ReactNode | ({}) => ReactNode
className?: string | ((ListBoxRenderProps & {
defaultClassName: string | undefined
})) => string
defaultSelectedKeys?: 'all' | Iterable<Key>
dependencies?: ReadonlyArray<any>
disabledKeys?: Iterable<Key>
disallowEmptySelection?: boolean
dragAndDropHooks?: DragAndDropHooks
escapeKeyBehavior?: 'clearSelection' | 'none' = 'clearSelection'
id?: string
items?: Iterable<T>
layout?: 'stack' | 'grid' = 'stack'
onAction?: (Key) => void
onBlur?: (FocusEvent<Target>) => void
onFocus?: (FocusEvent<Target>) => void
onFocusChange?: (boolean) => void
onScroll?: (UIEvent<Element>) => void
onSelectionChange?: (Selection) => void
orientation?: Orientation = 'vertical'
renderEmptyState?: (ListBoxRenderProps) => ReactNode
selectedKeys?: 'all' | Iterable<Key>
selectionBehavior?: SelectionBehavior
selectionMode?: SelectionMode
shouldFocusWrap?: boolean
- shouldSelectOnPressUp?: boolean
slot?: string | null
style?: CSSProperties | ((ListBoxRenderProps & {
defaultStyle: CSSProperties
})) => CSSProperties | undefined/react-aria-components:Select Select <T extends {} = {
}> {
aria-describedby?: string
aria-details?: string
aria-label?: string
aria-labelledby?: string
autoComplete?: string
autoFocus?: boolean
children?: ReactNode | ((SelectRenderProps & {
defaultChildren: ReactNode | undefined
})) => ReactNode
className?: string | ((SelectRenderProps & {
defaultClassName: string | undefined
})) => string
defaultOpen?: boolean
defaultSelectedKey?: Key
disabledKeys?: Iterable<Key>
excludeFromTabOrder?: boolean
id?: string
isDisabled?: boolean
isInvalid?: boolean
isOpen?: boolean
isRequired?: boolean
name?: string
onBlur?: (FocusEvent<Target>) => void
onFocus?: (FocusEvent<Target>) => void
onFocusChange?: (boolean) => void
onKeyDown?: (KeyboardEvent) => void
onKeyUp?: (KeyboardEvent) => void
onOpenChange?: (boolean) => void
onSelectionChange?: (Key) => void
- placeholder?: string = 'Select an item' (localized)
+ placeholder?: string
selectedKey?: Key | null
slot?: string | null
style?: CSSProperties | ((SelectRenderProps & {
defaultStyle: CSSProperties
validate?: (Key) => ValidationError | boolean | null | undefined
validationBehavior?: 'native' | 'aria' = 'native'
}/react-aria-components:UNSTABLE_TableLoadingIndicator-UNSTABLE_TableLoadingIndicator <T extends {}> {
- children?: ReactNode
- className?: string
- style?: CSSProperties
-}/react-aria-components:Table Table {
aria-describedby?: string
aria-details?: string
aria-label?: string
aria-labelledby?: string
children?: ReactNode
className?: string | ((TableRenderProps & {
defaultClassName: string | undefined
})) => string
defaultSelectedKeys?: 'all' | Iterable<Key>
disabledBehavior?: DisabledBehavior = "selection"
disabledKeys?: Iterable<Key>
disallowEmptySelection?: boolean
dragAndDropHooks?: DragAndDropHooks
escapeKeyBehavior?: 'clearSelection' | 'none' = 'clearSelection'
onRowAction?: (Key) => void
onScroll?: (UIEvent<Element>) => void
onSelectionChange?: (Selection) => void
onSortChange?: (SortDescriptor) => any
selectedKeys?: 'all' | Iterable<Key>
selectionBehavior?: SelectionBehavior = "toggle"
selectionMode?: SelectionMode
- shouldSelectOnPressUp?: boolean
slot?: string | null
sortDescriptor?: SortDescriptor
style?: CSSProperties | ((TableRenderProps & {
defaultStyle: CSSProperties
}/react-aria-components:TagGroup TagGroup {
aria-describedby?: string
aria-details?: string
aria-label?: string
aria-labelledby?: string
children?: ReactNode
className?: string
defaultSelectedKeys?: 'all' | Iterable<Key>
disabledKeys?: Iterable<Key>
disallowEmptySelection?: boolean
id?: string
onRemove?: (Set<Key>) => void
onSelectionChange?: (Selection) => void
selectedKeys?: 'all' | Iterable<Key>
selectionBehavior?: SelectionBehavior
selectionMode?: SelectionMode
- shouldSelectOnPressUp?: boolean
slot?: string | null
style?: CSSProperties
}/react-aria-components:UNSTABLE_ToastList-UNSTABLE_ToastList <T> {
- aria-describedby?: string
- aria-details?: string
- aria-label?: string = "Notifications"
- aria-labelledby?: string
- children: ({
- toast: QueuedToast<T>
-}) => ReactElement
- className?: string | ((ToastRegionRenderProps<T> & {
- defaultClassName: string | undefined
-})) => string
- style?: CSSProperties | ((ToastRegionRenderProps<T> & {
- defaultStyle: CSSProperties
-})) => CSSProperties | undefined
-}/react-aria-components:UNSTABLE_ToastRegion UNSTABLE_ToastRegion <T> {
aria-describedby?: string
aria-details?: string
aria-label?: string = "Notifications"
aria-labelledby?: string
- children: ReactNode | ({
+ children: ({
toast: QueuedToast<T>
}) => ReactElement
className?: string | ((ToastRegionRenderProps<T> & {
defaultClassName: string | undefined
queue: ToastQueue<T>
style?: CSSProperties | ((ToastRegionRenderProps<T> & {
defaultStyle: CSSProperties
})) => CSSProperties | undefined
}/react-aria-components:UNSTABLE_ToastStateContext-UNSTABLE_ToastStateContext {
- UNTYPED
-}/react-aria-components:Tree Tree <T extends {}> {
aria-describedby?: string
aria-details?: string
aria-label?: string
aria-labelledby?: string
autoFocus?: boolean | FocusStrategy
children?: ReactNode | ({}) => ReactNode
className?: string | ((TreeRenderProps & {
defaultClassName: string | undefined
})) => string
defaultExpandedKeys?: Iterable<Key>
defaultSelectedKeys?: 'all' | Iterable<Key>
dependencies?: ReadonlyArray<any>
disabledBehavior?: DisabledBehavior = 'all'
disabledKeys?: Iterable<Key>
disallowEmptySelection?: boolean
escapeKeyBehavior?: 'clearSelection' | 'none' = 'clearSelection'
expandedKeys?: Iterable<Key>
id?: string
items?: Iterable<T>
onAction?: (Key) => void
onExpandedChange?: (Set<Key>) => any
onScroll?: (UIEvent<Element>) => void
onSelectionChange?: (Selection) => void
renderEmptyState?: (TreeEmptyStateRenderProps) => ReactNode
selectedKeys?: 'all' | Iterable<Key>
selectionBehavior?: SelectionBehavior
selectionMode?: SelectionMode
- shouldSelectOnPressUp?: boolean
slot?: string | null
style?: CSSProperties | ((TreeRenderProps & {
defaultStyle: CSSProperties
})) => CSSProperties | undefined/react-aria-components:UNSTABLE_ToastQueue UNSTABLE_ToastQueue <T> {
add: (T, ToastOptions) => string
- clear: () => void
close: (string) => void
constructor: (ToastStateProps) => void
pauseAll: () => void
resumeAll: () => void
- subscribe: (() => void) => () => void
+ subscribe: (() => void) => () => boolean
visibleToasts: Array<QueuedToast<T>>
}/react-aria-components:GridLayout GridLayout <O extends GridLayoutOptions = GridLayoutOptions, T> {
getContentSize: () => Size
getDropTargetFromPoint: (number, number, (DropTarget) => boolean) => DropTarget
getDropTargetLayoutInfo: (ItemDropTarget) => LayoutInfo
- getLayoutInfo: (Key) => LayoutInfo | null
+ getLayoutInfo: (Key) => LayoutInfo
getVisibleLayoutInfos: (Rect) => Array<LayoutInfo>
shouldInvalidate: (Rect, Rect) => boolean
shouldInvalidateLayoutOptions: (GridLayoutOptions, GridLayoutOptions) => boolean
update: (InvalidationContext<GridLayoutOptions>) => void
virtualizer: Virtualizer<{}, any> | null
}/react-aria-components:ColorWheelTrackProps ColorWheelTrackProps {
className?: string | ((ColorWheelTrackRenderProps & {
defaultClassName: string | undefined
})) => string
+ id?: string
style?: CSSProperties | ((ColorWheelTrackRenderProps & {
defaultStyle: CSSProperties
})) => CSSProperties | undefined
}/react-aria-components:GridListProps GridListProps <T> {
aria-describedby?: string
aria-details?: string
aria-label?: string
aria-labelledby?: string
autoFocus?: boolean | FocusStrategy
children?: ReactNode | (T) => ReactNode
className?: string | ((GridListRenderProps & {
defaultClassName: string | undefined
})) => string
defaultSelectedKeys?: 'all' | Iterable<Key>
dependencies?: ReadonlyArray<any>
disabledBehavior?: DisabledBehavior
disabledKeys?: Iterable<Key>
disallowEmptySelection?: boolean
disallowTypeAhead?: boolean = false
dragAndDropHooks?: DragAndDropHooks
escapeKeyBehavior?: 'clearSelection' | 'none' = 'clearSelection'
id?: string
items?: Iterable<T>
keyboardNavigationBehavior?: 'arrow' | 'tab' = 'arrow'
layout?: 'stack' | 'grid' = 'stack'
onAction?: (Key) => void
onScroll?: (UIEvent<Element>) => void
onSelectionChange?: (Selection) => void
renderEmptyState?: (GridListRenderProps) => ReactNode
selectedKeys?: 'all' | Iterable<Key>
selectionBehavior?: SelectionBehavior
selectionMode?: SelectionMode
- shouldSelectOnPressUp?: boolean
slot?: string | null
style?: CSSProperties | ((GridListRenderProps & {
defaultStyle: CSSProperties
})) => CSSProperties | undefined/react-aria-components:ListBoxProps ListBoxProps <T> {
aria-describedby?: string
aria-details?: string
aria-label?: string
aria-labelledby?: string
autoFocus?: boolean | FocusStrategy
children?: ReactNode | (T) => ReactNode
className?: string | ((ListBoxRenderProps & {
defaultClassName: string | undefined
})) => string
defaultSelectedKeys?: 'all' | Iterable<Key>
dependencies?: ReadonlyArray<any>
disabledKeys?: Iterable<Key>
disallowEmptySelection?: boolean
dragAndDropHooks?: DragAndDropHooks
escapeKeyBehavior?: 'clearSelection' | 'none' = 'clearSelection'
id?: string
items?: Iterable<T>
layout?: 'stack' | 'grid' = 'stack'
onAction?: (Key) => void
onBlur?: (FocusEvent<Target>) => void
onFocus?: (FocusEvent<Target>) => void
onFocusChange?: (boolean) => void
onScroll?: (UIEvent<Element>) => void
onSelectionChange?: (Selection) => void
orientation?: Orientation = 'vertical'
renderEmptyState?: (ListBoxRenderProps) => ReactNode
selectedKeys?: 'all' | Iterable<Key>
selectionBehavior?: SelectionBehavior
selectionMode?: SelectionMode
shouldFocusWrap?: boolean
- shouldSelectOnPressUp?: boolean
slot?: string | null
style?: CSSProperties | ((ListBoxRenderProps & {
defaultStyle: CSSProperties
})) => CSSProperties | undefined/react-aria-components:SelectProps SelectProps <T extends {} = {
}> {
aria-describedby?: string
aria-details?: string
aria-label?: string
aria-labelledby?: string
autoComplete?: string
autoFocus?: boolean
children?: ReactNode | ((SelectRenderProps & {
defaultChildren: ReactNode | undefined
})) => ReactNode
className?: string | ((SelectRenderProps & {
defaultClassName: string | undefined
})) => string
defaultOpen?: boolean
defaultSelectedKey?: Key
disabledKeys?: Iterable<Key>
excludeFromTabOrder?: boolean
id?: string
isDisabled?: boolean
isInvalid?: boolean
isOpen?: boolean
isRequired?: boolean
name?: string
onBlur?: (FocusEvent<Target>) => void
onFocus?: (FocusEvent<Target>) => void
onFocusChange?: (boolean) => void
onKeyDown?: (KeyboardEvent) => void
onKeyUp?: (KeyboardEvent) => void
onOpenChange?: (boolean) => void
onSelectionChange?: (Key) => void
- placeholder?: string = 'Select an item' (localized)
+ placeholder?: string
selectedKey?: Key | null
slot?: string | null
style?: CSSProperties | ((SelectRenderProps & {
defaultStyle: CSSProperties
validate?: (Key) => ValidationError | boolean | null | undefined
validationBehavior?: 'native' | 'aria' = 'native'
}/react-aria-components:TableProps TableProps {
aria-describedby?: string
aria-details?: string
aria-label?: string
aria-labelledby?: string
children?: ReactNode
className?: string | ((TableRenderProps & {
defaultClassName: string | undefined
})) => string
defaultSelectedKeys?: 'all' | Iterable<Key>
disabledBehavior?: DisabledBehavior = "selection"
disabledKeys?: Iterable<Key>
disallowEmptySelection?: boolean
dragAndDropHooks?: DragAndDropHooks
escapeKeyBehavior?: 'clearSelection' | 'none' = 'clearSelection'
onRowAction?: (Key) => void
onScroll?: (UIEvent<Element>) => void
onSelectionChange?: (Selection) => void
onSortChange?: (SortDescriptor) => any
selectedKeys?: 'all' | Iterable<Key>
selectionBehavior?: SelectionBehavior = "toggle"
selectionMode?: SelectionMode
- shouldSelectOnPressUp?: boolean
slot?: string | null
sortDescriptor?: SortDescriptor
style?: CSSProperties | ((TableRenderProps & {
defaultStyle: CSSProperties
}/react-aria-components:TagGroupProps TagGroupProps {
aria-describedby?: string
aria-details?: string
aria-label?: string
aria-labelledby?: string
children?: ReactNode
className?: string
defaultSelectedKeys?: 'all' | Iterable<Key>
disabledKeys?: Iterable<Key>
disallowEmptySelection?: boolean
id?: string
onRemove?: (Set<Key>) => void
onSelectionChange?: (Selection) => void
selectedKeys?: 'all' | Iterable<Key>
selectionBehavior?: SelectionBehavior
selectionMode?: SelectionMode
- shouldSelectOnPressUp?: boolean
slot?: string | null
style?: CSSProperties
}/react-aria-components:ToastRegionProps ToastRegionProps <T> {
aria-describedby?: string
aria-details?: string
aria-label?: string = "Notifications"
aria-labelledby?: string
- children: ReactNode | ({
+ children: ({
toast: QueuedToast<T>
}) => ReactElement
className?: string | ((ToastRegionRenderProps<T> & {
defaultClassName: string | undefined
queue: ToastQueue<T>
style?: CSSProperties | ((ToastRegionRenderProps<T> & {
defaultStyle: CSSProperties
})) => CSSProperties | undefined
}/react-aria-components:ToastListProps-ToastListProps <T> {
- aria-describedby?: string
- aria-details?: string
- aria-label?: string = "Notifications"
- aria-labelledby?: string
- children: ({
- toast: QueuedToast<T>
-}) => ReactElement
- className?: string | ((ToastRegionRenderProps<T> & {
- defaultClassName: string | undefined
-})) => string
- style?: CSSProperties | ((ToastRegionRenderProps<T> & {
- defaultStyle: CSSProperties
-})) => CSSProperties | undefined
-}/react-aria-components:ToastRegionRenderProps ToastRegionRenderProps <T> {
isFocusVisible: boolean
isFocused: boolean
- isHovered: boolean
visibleToasts: Array<QueuedToast<T>>
}/react-aria-components:TreeProps TreeProps <T> {
aria-describedby?: string
aria-details?: string
aria-label?: string
aria-labelledby?: string
autoFocus?: boolean | FocusStrategy
children?: ReactNode | (T) => ReactNode
className?: string | ((TreeRenderProps & {
defaultClassName: string | undefined
})) => string
defaultExpandedKeys?: Iterable<Key>
defaultSelectedKeys?: 'all' | Iterable<Key>
dependencies?: ReadonlyArray<any>
disabledBehavior?: DisabledBehavior = 'all'
disabledKeys?: Iterable<Key>
disallowEmptySelection?: boolean
escapeKeyBehavior?: 'clearSelection' | 'none' = 'clearSelection'
expandedKeys?: Iterable<Key>
id?: string
items?: Iterable<T>
onAction?: (Key) => void
onExpandedChange?: (Set<Key>) => any
onScroll?: (UIEvent<Element>) => void
onSelectionChange?: (Selection) => void
renderEmptyState?: (TreeEmptyStateRenderProps) => ReactNode
selectedKeys?: 'all' | Iterable<Key>
selectionBehavior?: SelectionBehavior
selectionMode?: SelectionMode
- shouldSelectOnPressUp?: boolean
slot?: string | null
style?: CSSProperties | ((TreeRenderProps & {
defaultStyle: CSSProperties
})) => CSSProperties | undefined/react-aria-components:UNSTABLE_GridListLoadingSentinel+UNSTABLE_GridListLoadingSentinel <T extends {}> {
+ children?: ReactNode
+ className?: string
+ isLoading?: boolean
+ onLoadMore?: () => any
+ scrollOffset?: number = 1
+ style?: CSSProperties
+}/react-aria-components:UNSTABLE_ListBoxLoadingSentinel+UNSTABLE_ListBoxLoadingSentinel <T extends {}> {
+ children?: ReactNode
+ className?: string
+ isLoading?: boolean
+ onLoadMore?: () => any
+ scrollOffset?: number = 1
+ style?: CSSProperties
+}/react-aria-components:UNSTABLE_TableLoadingSentinel+UNSTABLE_TableLoadingSentinel <T extends {}> {
+ children?: ReactNode
+ className?: string
+ isLoading?: boolean
+ onLoadMore?: () => any
+ scrollOffset?: number = 1
+ style?: CSSProperties
+}/react-aria-components:ListBoxLoadingSentinelProps+ListBoxLoadingSentinelProps {
+ children?: ReactNode
+ className?: string
+ isLoading?: boolean
+ onLoadMore?: () => any
+ scrollOffset?: number = 1
+ style?: CSSProperties
+}@react-aria/grid/@react-aria/grid:GridProps GridProps {
aria-describedby?: string
aria-details?: string
aria-label?: string
aria-labelledby?: string
disallowTypeAhead?: boolean = false
escapeKeyBehavior?: 'clearSelection' | 'none' = 'clearSelection'
focusMode?: 'row' | 'cell' = 'row'
getRowText?: (Key) => string = (key) => state.collection.getItem(key)?.textValue
id?: string
isVirtualized?: boolean
keyboardDelegate?: KeyboardDelegate
onCellAction?: (Key) => void
onRowAction?: (Key) => void
scrollRef?: RefObject<HTMLElement | null>
- shouldSelectOnPressUp?: boolean
}@react-aria/gridlist/@react-aria/gridlist:AriaGridListOptions AriaGridListOptions <T> {
aria-describedby?: string
aria-details?: string
aria-label?: string
aria-labelledby?: string
autoFocus?: boolean | FocusStrategy
defaultSelectedKeys?: 'all' | Iterable<Key>
disabledBehavior?: DisabledBehavior
disabledKeys?: Iterable<Key>
disallowEmptySelection?: boolean
disallowTypeAhead?: boolean = false
escapeKeyBehavior?: 'clearSelection' | 'none' = 'clearSelection'
id?: string
isVirtualized?: boolean
items?: Iterable<T>
keyboardDelegate?: KeyboardDelegate
keyboardNavigationBehavior?: 'arrow' | 'tab' = 'arrow'
layoutDelegate?: LayoutDelegate
linkBehavior?: 'action' | 'selection' | 'override' = 'action'
onAction?: (Key) => void
onSelectionChange?: (Selection) => void
selectedKeys?: 'all' | Iterable<Key>
selectionMode?: SelectionMode
shouldFocusWrap?: boolean = false
- shouldSelectOnPressUp?: boolean
}/@react-aria/gridlist:AriaGridListProps AriaGridListProps <T> {
aria-describedby?: string
aria-details?: string
aria-label?: string
aria-labelledby?: string
autoFocus?: boolean | FocusStrategy
children: CollectionChildren<T>
defaultSelectedKeys?: 'all' | Iterable<Key>
disabledBehavior?: DisabledBehavior
disabledKeys?: Iterable<Key>
disallowEmptySelection?: boolean
escapeKeyBehavior?: 'clearSelection' | 'none' = 'clearSelection'
id?: string
items?: Iterable<T>
keyboardNavigationBehavior?: 'arrow' | 'tab' = 'arrow'
onAction?: (Key) => void
onSelectionChange?: (Selection) => void
selectedKeys?: 'all' | Iterable<Key>
selectionMode?: SelectionMode
- shouldSelectOnPressUp?: boolean
}/@react-aria/gridlist:GridListProps GridListProps <T> {
autoFocus?: boolean | FocusStrategy
children: CollectionChildren<T>
defaultSelectedKeys?: 'all' | Iterable<Key>
disabledBehavior?: DisabledBehavior
disabledKeys?: Iterable<Key>
disallowEmptySelection?: boolean
items?: Iterable<T>
onAction?: (Key) => void
onSelectionChange?: (Selection) => void
selectedKeys?: 'all' | Iterable<Key>
selectionMode?: SelectionMode
- shouldSelectOnPressUp?: boolean
}@react-aria/listbox/@react-aria/listbox:AriaListBoxProps AriaListBoxProps <T> {
aria-describedby?: string
aria-details?: string
aria-label?: string
aria-labelledby?: string
autoFocus?: boolean | FocusStrategy
children: CollectionChildren<T>
defaultSelectedKeys?: 'all' | Iterable<Key>
disabledKeys?: Iterable<Key>
disallowEmptySelection?: boolean
escapeKeyBehavior?: 'clearSelection' | 'none' = 'clearSelection'
id?: string
items?: Iterable<T>
label?: ReactNode
onAction?: (Key) => void
onBlur?: (FocusEvent<Target>) => void
onFocus?: (FocusEvent<Target>) => void
onFocusChange?: (boolean) => void
onSelectionChange?: (Selection) => void
selectedKeys?: 'all' | Iterable<Key>
selectionBehavior?: SelectionBehavior
selectionMode?: SelectionMode
shouldFocusWrap?: boolean
- shouldSelectOnPressUp?: boolean
}@react-aria/overlays/@react-aria/overlays:Overlay Overlay {
children: ReactNode
disableFocusManagement?: boolean
isExiting?: boolean
- portalContainer?: Element = document.body
shouldContainFocus?: boolean
}/@react-aria/overlays:OverlayProps OverlayProps {
children: ReactNode
disableFocusManagement?: boolean
isExiting?: boolean
- portalContainer?: Element = document.body
shouldContainFocus?: boolean
}@react-aria/table/@react-aria/table:AriaTableProps AriaTableProps {
aria-describedby?: string
aria-details?: string
aria-label?: string
aria-labelledby?: string
disallowTypeAhead?: boolean = false
escapeKeyBehavior?: 'clearSelection' | 'none' = 'clearSelection'
focusMode?: 'row' | 'cell' = 'row'
getRowText?: (Key) => string = (key) => state.collection.getItem(key)?.textValue
id?: string
isVirtualized?: boolean
keyboardDelegate?: KeyboardDelegate
layoutDelegate?: LayoutDelegate
onCellAction?: (Key) => void
onRowAction?: (Key) => void
scrollRef?: RefObject<HTMLElement | null>
- shouldSelectOnPressUp?: boolean
}@react-aria/tag/@react-aria/tag:AriaTagGroupProps AriaTagGroupProps <T> {
aria-describedby?: string
aria-details?: string
aria-label?: string
aria-labelledby?: string
children: CollectionChildren<T>
defaultSelectedKeys?: 'all' | Iterable<Key>
description?: ReactNode
disabledKeys?: Iterable<Key>
disallowEmptySelection?: boolean
errorMessage?: ReactNode
id?: string
items?: Iterable<T>
label?: ReactNode
onRemove?: (Set<Key>) => void
onSelectionChange?: (Selection) => void
selectedKeys?: 'all' | Iterable<Key>
selectionBehavior?: SelectionBehavior
selectionMode?: SelectionMode
- shouldSelectOnPressUp?: boolean
}@react-aria/tree/@react-aria/tree:AriaTreeOptions AriaTreeOptions <T> {
aria-describedby?: string
aria-details?: string
aria-label?: string
aria-labelledby?: string
autoFocus?: boolean | FocusStrategy
defaultSelectedKeys?: 'all' | Iterable<Key>
disabledBehavior?: DisabledBehavior
disabledKeys?: Iterable<Key>
disallowEmptySelection?: boolean
disallowTypeAhead?: boolean = false
escapeKeyBehavior?: 'clearSelection' | 'none' = 'clearSelection'
id?: string
isVirtualized?: boolean
items?: Iterable<T>
keyboardDelegate?: KeyboardDelegate
keyboardNavigationBehavior?: 'arrow' | 'tab' = 'arrow'
layoutDelegate?: LayoutDelegate
linkBehavior?: 'action' | 'selection' | 'override' = 'action'
onAction?: (Key) => void
onSelectionChange?: (Selection) => void
selectedKeys?: 'all' | Iterable<Key>
selectionMode?: SelectionMode
- shouldSelectOnPressUp?: boolean
}/@react-aria/tree:AriaTreeProps AriaTreeProps <T> {
aria-describedby?: string
aria-details?: string
aria-label?: string
aria-labelledby?: string
autoFocus?: boolean | FocusStrategy
children: CollectionChildren<T>
defaultSelectedKeys?: 'all' | Iterable<Key>
disabledBehavior?: DisabledBehavior
disabledKeys?: Iterable<Key>
disallowEmptySelection?: boolean
escapeKeyBehavior?: 'clearSelection' | 'none' = 'clearSelection'
id?: string
items?: Iterable<T>
onAction?: (Key) => void
onSelectionChange?: (Selection) => void
selectedKeys?: 'all' | Iterable<Key>
selectionMode?: SelectionMode
- shouldSelectOnPressUp?: boolean
}/@react-aria/tree:TreeProps TreeProps <T> {
autoFocus?: boolean | FocusStrategy
children: CollectionChildren<T>
defaultSelectedKeys?: 'all' | Iterable<Key>
disabledBehavior?: DisabledBehavior
disabledKeys?: Iterable<Key>
disallowEmptySelection?: boolean
items?: Iterable<T>
onAction?: (Key) => void
onSelectionChange?: (Selection) => void
selectedKeys?: 'all' | Iterable<Key>
selectionMode?: SelectionMode
- shouldSelectOnPressUp?: boolean
}@react-aria/utils/@react-aria/utils:mergeRefs mergeRefs <T> {
- refs: Array<Ref<T> | MutableRefObject<T> | null | undefined>
+ refs: Array<ForwardedRef<T> | MutableRefObject<T> | null | undefined>
returnVal: undefined
}/@react-aria/utils:useObjectRef useObjectRef <T> {
- ref?: (T | null) => () => void | void | MutableRefObject<T | null> | null
+ forwardedRef?: (T | null) => void | MutableRefObject<T | null> | null
returnVal: undefined
}/@react-aria/utils:useLoadMoreSentinel+useLoadMoreSentinel {
+ props: LoadMoreSentinelProps
+ ref: RefObject<HTMLElement | null>
+ returnVal: undefined
+}/@react-aria/utils:LoadMoreSentinelProps+LoadMoreSentinelProps {
+ isLoading?: boolean
+ onLoadMore?: () => any
+ scrollOffset?: number = 1
+}@react-spectrum/list/@react-spectrum/list:ListView ListView <T extends {}> {
UNSAFE_className?: string
UNSAFE_style?: CSSProperties
alignSelf?: Responsive<'auto' | 'normal' | 'start' | 'end' | 'center' | 'flex-start' | 'flex-end' | 'self-start' | 'self-end' | 'stretch'>
aria-describedby?: string
aria-details?: string
aria-label?: string
aria-labelledby?: string
autoFocus?: boolean | FocusStrategy
bottom?: Responsive<DimensionValue>
children: CollectionChildren<T>
defaultSelectedKeys?: 'all' | Iterable<Key>
density?: 'compact' | 'regular' | 'spacious' = 'regular'
disabledBehavior?: DisabledBehavior
disabledKeys?: Iterable<Key>
disallowEmptySelection?: boolean
dragAndDropHooks?: DragAndDropHooks['dragAndDropHooks']
end?: Responsive<DimensionValue>
escapeKeyBehavior?: 'clearSelection' | 'none' = 'clearSelection'
flex?: Responsive<string | number | boolean>
flexBasis?: Responsive<number | string>
flexGrow?: Responsive<number>
flexShrink?: Responsive<number>
gridArea?: Responsive<string>
gridColumn?: Responsive<string>
gridColumnEnd?: Responsive<string>
gridColumnStart?: Responsive<string>
gridRow?: Responsive<string>
gridRowEnd?: Responsive<string>
gridRowStart?: Responsive<string>
height?: Responsive<DimensionValue>
id?: string
isHidden?: Responsive<boolean>
isQuiet?: boolean
items?: Iterable<T>
justifySelf?: Responsive<'auto' | 'normal' | 'start' | 'end' | 'flex-start' | 'flex-end' | 'self-start' | 'self-end' | 'center' | 'left' | 'right' | 'stretch'>
left?: Responsive<DimensionValue>
loadingState?: LoadingState
margin?: Responsive<DimensionValue>
marginBottom?: Responsive<DimensionValue>
marginEnd?: Responsive<DimensionValue>
marginStart?: Responsive<DimensionValue>
marginTop?: Responsive<DimensionValue>
marginX?: Responsive<DimensionValue>
marginY?: Responsive<DimensionValue>
maxHeight?: Responsive<DimensionValue>
maxWidth?: Responsive<DimensionValue>
minHeight?: Responsive<DimensionValue>
minWidth?: Responsive<DimensionValue>
onAction?: (Key) => void
onLoadMore?: () => any
onSelectionChange?: (Selection) => void
order?: Responsive<number>
overflowMode?: 'truncate' | 'wrap' = 'truncate'
position?: Responsive<'static' | 'relative' | 'absolute' | 'fixed' | 'sticky'>
renderEmptyState?: () => JSX.Element
right?: Responsive<DimensionValue>
selectedKeys?: 'all' | Iterable<Key>
selectionMode?: SelectionMode
selectionStyle?: 'checkbox' | 'highlight'
- shouldSelectOnPressUp?: boolean
start?: Responsive<DimensionValue>
top?: Responsive<DimensionValue>
width?: Responsive<DimensionValue>
zIndex?: Responsive<number>/@react-spectrum/list:SpectrumListViewProps SpectrumListViewProps <T> {
UNSAFE_className?: string
UNSAFE_style?: CSSProperties
alignSelf?: Responsive<'auto' | 'normal' | 'start' | 'end' | 'center' | 'flex-start' | 'flex-end' | 'self-start' | 'self-end' | 'stretch'>
aria-describedby?: string
aria-details?: string
aria-label?: string
aria-labelledby?: string
autoFocus?: boolean | FocusStrategy
bottom?: Responsive<DimensionValue>
children: CollectionChildren<T>
defaultSelectedKeys?: 'all' | Iterable<Key>
density?: 'compact' | 'regular' | 'spacious' = 'regular'
disabledBehavior?: DisabledBehavior
disabledKeys?: Iterable<Key>
disallowEmptySelection?: boolean
dragAndDropHooks?: DragAndDropHooks['dragAndDropHooks']
end?: Responsive<DimensionValue>
escapeKeyBehavior?: 'clearSelection' | 'none' = 'clearSelection'
flex?: Responsive<string | number | boolean>
flexBasis?: Responsive<number | string>
flexGrow?: Responsive<number>
flexShrink?: Responsive<number>
gridArea?: Responsive<string>
gridColumn?: Responsive<string>
gridColumnEnd?: Responsive<string>
gridColumnStart?: Responsive<string>
gridRow?: Responsive<string>
gridRowEnd?: Responsive<string>
gridRowStart?: Responsive<string>
height?: Responsive<DimensionValue>
id?: string
isHidden?: Responsive<boolean>
isQuiet?: boolean
items?: Iterable<T>
justifySelf?: Responsive<'auto' | 'normal' | 'start' | 'end' | 'flex-start' | 'flex-end' | 'self-start' | 'self-end' | 'center' | 'left' | 'right' | 'stretch'>
left?: Responsive<DimensionValue>
loadingState?: LoadingState
margin?: Responsive<DimensionValue>
marginBottom?: Responsive<DimensionValue>
marginEnd?: Responsive<DimensionValue>
marginStart?: Responsive<DimensionValue>
marginTop?: Responsive<DimensionValue>
marginX?: Responsive<DimensionValue>
marginY?: Responsive<DimensionValue>
maxHeight?: Responsive<DimensionValue>
maxWidth?: Responsive<DimensionValue>
minHeight?: Responsive<DimensionValue>
minWidth?: Responsive<DimensionValue>
onAction?: (Key) => void
onLoadMore?: () => any
onSelectionChange?: (Selection) => void
order?: Responsive<number>
overflowMode?: 'truncate' | 'wrap' = 'truncate'
position?: Responsive<'static' | 'relative' | 'absolute' | 'fixed' | 'sticky'>
renderEmptyState?: () => JSX.Element
right?: Responsive<DimensionValue>
selectedKeys?: 'all' | Iterable<Key>
selectionMode?: SelectionMode
selectionStyle?: 'checkbox' | 'highlight'
- shouldSelectOnPressUp?: boolean
start?: Responsive<DimensionValue>
top?: Responsive<DimensionValue>
width?: Responsive<DimensionValue>
zIndex?: Responsive<number>@react-spectrum/s2/@react-spectrum/s2:Accordion Accordion {
- UNSAFE_className?: UnsafeClassName
+ UNSAFE_className?: string
UNSAFE_style?: CSSProperties
allowsMultipleExpanded?: boolean
children: React.ReactNode
defaultExpandedKeys?: Iterable<Key>
expandedKeys?: Iterable<Key>
id?: string
isDisabled?: boolean
isQuiet?: boolean
onExpandedChange?: (Set<Key>) => any
size?: 'S' | 'M' | 'L' | 'XL' = 'M'
slot?: string | null
styles?: StylesPropWithHeight
}/@react-spectrum/s2:ActionButton ActionButton {
- UNSAFE_className?: UnsafeClassName
+ UNSAFE_className?: string
UNSAFE_style?: CSSProperties
aria-controls?: string
aria-current?: boolean | 'true' | 'false' | 'page' | 'step' | 'location' | 'date' | 'time'
aria-describedby?: string
aria-expanded?: boolean | 'true' | 'false'
aria-haspopup?: boolean | 'menu' | 'listbox' | 'tree' | 'grid' | 'dialog' | 'true' | 'false'
aria-label?: string
aria-labelledby?: string
aria-pressed?: boolean | 'true' | 'false' | 'mixed'
autoFocus?: boolean
children: ReactNode
excludeFromTabOrder?: boolean
form?: string
formAction?: string
formEncType?: string
formMethod?: string
formNoValidate?: boolean
formTarget?: string
id?: string
isDisabled?: boolean
isQuiet?: boolean
name?: string
onBlur?: (FocusEvent<Target>) => void
onFocus?: (FocusEvent<Target>) => void
onFocusChange?: (boolean) => void
onKeyDown?: (KeyboardEvent) => void
onKeyUp?: (KeyboardEvent) => void
onPress?: (PressEvent) => void
onPressChange?: (boolean) => void
onPressEnd?: (PressEvent) => void
onPressStart?: (PressEvent) => void
onPressUp?: (PressEvent) => void
preventFocusOnPress?: boolean
size?: 'XS' | 'S' | 'M' | 'L' | 'XL' = 'M'
slot?: string | null
staticColor?: 'black' | 'white' | 'auto'
styles?: StylesProp
type?: 'button' | 'submit' | 'reset' = 'button'
value?: string
}/@react-spectrum/s2:ActionButtonGroup ActionButtonGroup {
- UNSAFE_className?: UnsafeClassName
+ UNSAFE_className?: string
UNSAFE_style?: CSSProperties
aria-describedby?: string
aria-details?: string
aria-label?: string
children: ReactNode
density?: 'compact' | 'regular' = "regular"
isDisabled?: boolean
isJustified?: boolean
isQuiet?: boolean
orientation?: 'horizontal' | 'vertical' = 'horizontal'
size?: 'XS' | 'S' | 'M' | 'L' | 'XL' = "M"
slot?: string | null
staticColor?: 'white' | 'black' | 'auto'
styles?: StylesPropWithHeight
}/@react-spectrum/s2:ActionMenu ActionMenu <T extends {}> {
- UNSAFE_className?: UnsafeClassName
+ UNSAFE_className?: string
UNSAFE_style?: CSSProperties
align?: 'start' | 'end' = 'start'
aria-describedby?: string
aria-details?: string
aria-labelledby?: string
autoFocus?: boolean
children: ReactNode | (T) => ReactNode
defaultOpen?: boolean
direction?: 'bottom' | 'top' | 'left' | 'right' | 'start' | 'end' = 'bottom'
disabledKeys?: Iterable<Key>
id?: string
isDisabled?: boolean
isOpen?: boolean
isQuiet?: boolean
items?: Iterable<T>
menuSize?: 'S' | 'M' | 'L' | 'XL'
onAction?: (Key) => void
onOpenChange?: (boolean) => void
shouldFlip?: boolean = true
size?: 'XS' | 'S' | 'M' | 'L' | 'XL' = 'M'
styles?: StylesProp
}/@react-spectrum/s2:AlertDialog AlertDialog {
- UNSAFE_className?: UnsafeClassName
+ UNSAFE_className?: string
UNSAFE_style?: CSSProperties
autoFocusButton?: 'cancel' | 'primary' | 'secondary'
cancelLabel?: string
children: ReactNode
isPrimaryActionDisabled?: boolean
isSecondaryActionDisabled?: boolean
onCancel?: () => void
onPrimaryAction?: () => void
onSecondaryAction?: () => void
primaryActionLabel: string
secondaryActionLabel?: string
size?: 'S' | 'M' | 'L' = 'M'
title: string
variant?: 'confirmation' | 'information' | 'destructive' | 'error' | 'warning'
}/@react-spectrum/s2:Avatar Avatar {
- UNSAFE_className?: UnsafeClassName
+ UNSAFE_className?: string
UNSAFE_style?: CSSProperties
alt?: string
id?: string
isOverBackground?: boolean
}) = 24
slot?: string | null
src?: string
styles?: StylesPropWithoutWidth
}/@react-spectrum/s2:AvatarGroup AvatarGroup {
- UNSAFE_className?: UnsafeClassName
+ UNSAFE_className?: string
UNSAFE_style?: CSSProperties
aria-describedby?: string
aria-details?: string
aria-label?: string
children: ReactNode
id?: string
label?: string
size?: number | number | number | number | number | number | number = 24
slot?: string | null
styles?: StylesPropWithoutWidth
}/@react-spectrum/s2:Badge Badge {
- UNSAFE_className?: UnsafeClassName
+ UNSAFE_className?: string
UNSAFE_style?: CSSProperties
aria-describedby?: string
aria-details?: string
aria-label?: string
children: ReactNode
fillStyle?: 'bold' | 'subtle' | 'outline' = 'bold'
id?: string
overflowMode?: 'wrap' | 'truncate' = 'wrap'
size?: 'S' | 'M' | 'L' | 'XL' = 'S'
slot?: string | null
styles?: StylesProp
variant?: 'accent' | 'informative' | 'neutral' | 'positive' | 'notice' | 'negative' | 'gray' | 'red' | 'orange' | 'yellow' | 'chartreuse' | 'celery' | 'green' | 'seafoam' | 'cyan' | 'blue' | 'indigo' | 'purple' | 'fuchsia' | 'magenta' | 'pink' | 'turquoise' | 'brown' | 'cinnamon' | 'silver' = 'neutral'
}/@react-spectrum/s2:Breadcrumbs Breadcrumbs <T extends {}> {
- UNSAFE_className?: UnsafeClassName
+ UNSAFE_className?: string
UNSAFE_style?: CSSProperties
aria-describedby?: string
aria-details?: string
aria-label?: string
children: ReactNode
dependencies?: ReadonlyArray<any>
id?: string
isDisabled?: boolean
onAction?: (Key) => void
size?: 'M' | 'L' = 'M'
slot?: string | null
styles?: StylesProp
}/@react-spectrum/s2:Button Button {
- UNSAFE_className?: UnsafeClassName
+ UNSAFE_className?: string
UNSAFE_style?: CSSProperties
aria-controls?: string
aria-current?: boolean | 'true' | 'false' | 'page' | 'step' | 'location' | 'date' | 'time'
aria-describedby?: string
aria-expanded?: boolean | 'true' | 'false'
aria-haspopup?: boolean | 'menu' | 'listbox' | 'tree' | 'grid' | 'dialog' | 'true' | 'false'
aria-label?: string
aria-labelledby?: string
aria-pressed?: boolean | 'true' | 'false' | 'mixed'
autoFocus?: boolean
children: ReactNode
excludeFromTabOrder?: boolean
fillStyle?: 'fill' | 'outline' = 'fill'
form?: string
formAction?: string
formEncType?: string
formMethod?: string
formNoValidate?: boolean
formTarget?: string
id?: string
isDisabled?: boolean
isPending?: boolean
name?: string
onBlur?: (FocusEvent<Target>) => void
onFocus?: (FocusEvent<Target>) => void
onFocusChange?: (boolean) => void
onKeyDown?: (KeyboardEvent) => void
onKeyUp?: (KeyboardEvent) => void
onPress?: (PressEvent) => void
onPressChange?: (boolean) => void
onPressEnd?: (PressEvent) => void
onPressStart?: (PressEvent) => void
onPressUp?: (PressEvent) => void
preventFocusOnPress?: boolean
size?: 'S' | 'M' | 'L' | 'XL' = 'M'
slot?: string | null
staticColor?: 'white' | 'black' | 'auto'
styles?: StylesProp
type?: 'button' | 'submit' | 'reset' = 'button'
value?: string
variant?: 'primary' | 'secondary' | 'accent' | 'negative' | 'premium' | 'genai' = 'primary'
}/@react-spectrum/s2:LinkButton LinkButton {
- UNSAFE_className?: UnsafeClassName
+ UNSAFE_className?: string
UNSAFE_style?: CSSProperties
aria-describedby?: string
aria-details?: string
aria-label?: string
autoFocus?: boolean
children: ReactNode
download?: boolean | string
fillStyle?: 'fill' | 'outline' = 'fill'
href?: Href
hrefLang?: string
isDisabled?: boolean
onBlur?: (FocusEvent<Target>) => void
onFocus?: (FocusEvent<Target>) => void
onFocusChange?: (boolean) => void
onHoverChange?: (boolean) => void
onHoverEnd?: (HoverEvent) => void
onHoverStart?: (HoverEvent) => void
onKeyDown?: (KeyboardEvent) => void
onKeyUp?: (KeyboardEvent) => void
onPress?: (PressEvent) => void
onPressChange?: (boolean) => void
onPressEnd?: (PressEvent) => void
onPressStart?: (PressEvent) => void
onPressUp?: (PressEvent) => void
ping?: string
referrerPolicy?: HTMLAttributeReferrerPolicy
rel?: string
routerOptions?: RouterOptions
size?: 'S' | 'M' | 'L' | 'XL' = 'M'
slot?: string | null
staticColor?: 'white' | 'black' | 'auto'
styles?: StylesProp
target?: HTMLAttributeAnchorTarget
variant?: 'primary' | 'secondary' | 'accent' | 'negative' | 'premium' | 'genai' = 'primary'
}/@react-spectrum/s2:ButtonGroup ButtonGroup {
- UNSAFE_className?: UnsafeClassName
+ UNSAFE_className?: string
UNSAFE_style?: CSSProperties
align?: 'start' | 'end' | 'center' = 'start'
children: ReactNode
id?: string
orientation?: 'horizontal' | 'vertical' = 'horizontal'
size?: 'S' | 'M' | 'L' | 'XL' = 'M'
slot?: string | null
styles?: StylesProp
}/@react-spectrum/s2:Card Card {
- UNSAFE_className?: UnsafeClassName
+ UNSAFE_className?: string
UNSAFE_style?: CSSProperties
children: ReactNode | (CardRenderProps) => ReactNode
density?: 'compact' | 'regular' | 'spacious' = 'regular'
download?: boolean | string
hrefLang?: string
id?: Key
isDisabled?: boolean
onAction?: () => void
ping?: string
referrerPolicy?: HTMLAttributeReferrerPolicy
rel?: string
routerOptions?: RouterOptions
size?: 'XS' | 'S' | 'M' | 'L' | 'XL' = 'M'
styles?: StylesProp
target?: HTMLAttributeAnchorTarget
textValue?: string
value?: T
variant?: 'primary' | 'secondary' | 'tertiary' | 'quiet' = 'primary'
}/@react-spectrum/s2:CardPreview CardPreview {
- UNSAFE_className?: UnsafeClassName
+ UNSAFE_className?: string
UNSAFE_style?: CSSProperties
children: ReactNode
id?: string
}/@react-spectrum/s2:CollectionCardPreview CollectionCardPreview {
- UNSAFE_className?: UnsafeClassName
+ UNSAFE_className?: string
UNSAFE_style?: CSSProperties
children: ReactNode
id?: string
}/@react-spectrum/s2:AssetCard AssetCard {
- UNSAFE_className?: UnsafeClassName
+ UNSAFE_className?: string
UNSAFE_style?: CSSProperties
children: ReactNode | (CardRenderProps) => ReactNode
download?: boolean | string
href?: Href
id?: Key
isDisabled?: boolean
onAction?: () => void
ping?: string
referrerPolicy?: HTMLAttributeReferrerPolicy
rel?: string
routerOptions?: RouterOptions
size?: 'XS' | 'S' | 'M' | 'L' | 'XL' = 'M'
styles?: StylesProp
target?: HTMLAttributeAnchorTarget
textValue?: string
value?: T
variant?: 'primary' | 'secondary' | 'tertiary' | 'quiet' = 'primary'
}/@react-spectrum/s2:UserCard UserCard {
- UNSAFE_className?: UnsafeClassName
+ UNSAFE_className?: string
UNSAFE_style?: CSSProperties
children: ReactNode | (CardRenderProps) => ReactNode
density?: 'compact' | 'regular' | 'spacious' = 'regular'
download?: boolean | string
hrefLang?: string
id?: Key
isDisabled?: boolean
onAction?: () => void
ping?: string
referrerPolicy?: HTMLAttributeReferrerPolicy
rel?: string
routerOptions?: RouterOptions
size?: 'XS' | 'S' | 'M' | 'L' | 'XL' = 'M'
styles?: StylesProp
target?: HTMLAttributeAnchorTarget
textValue?: string
value?: T
variant?: 'primary' | 'secondary' | 'tertiary' | 'quiet' = 'primary'
}/@react-spectrum/s2:ProductCard ProductCard {
- UNSAFE_className?: UnsafeClassName
+ UNSAFE_className?: string
UNSAFE_style?: CSSProperties
children: ReactNode | (CardRenderProps) => ReactNode
download?: boolean | string
href?: Href
id?: Key
isDisabled?: boolean
onAction?: () => void
ping?: string
referrerPolicy?: HTMLAttributeReferrerPolicy
rel?: string
routerOptions?: RouterOptions
size?: 'XS' | 'S' | 'M' | 'L' | 'XL' = 'M'
styles?: StylesProp
target?: HTMLAttributeAnchorTarget
textValue?: string
value?: T
variant?: 'primary' | 'secondary' | 'tertiary'
}/@react-spectrum/s2:CardView CardView <T extends {}> {
- UNSAFE_className?: UnsafeClassName
+ 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>
density?: 'compact' | 'regular' | 'spacious' = 'regular'
dependencies?: ReadonlyArray<any>
disabledBehavior?: DisabledBehavior
disabledKeys?: Iterable<Key>
disallowEmptySelection?: boolean
disallowTypeAhead?: boolean = false
dragAndDropHooks?: DragAndDropHooks
escapeKeyBehavior?: 'clearSelection' | 'none' = 'clearSelection'
id?: string
items?: Iterable<T>
layout?: 'grid' | 'waterfall' = 'grid'
loadingState?: LoadingState
onAction?: (Key) => void
onLoadMore?: () => void
onScroll?: (UIEvent<Element>) => void
onSelectionChange?: (Selection) => void
renderActionBar?: ('all' | Set<Key>) => ReactElement
renderEmptyState?: (GridListRenderProps) => ReactNode
selectedKeys?: 'all' | Iterable<Key>
selectionMode?: SelectionMode
selectionStyle?: 'checkbox' | 'highlight' = 'checkbox'
- shouldSelectOnPressUp?: boolean
size?: 'XS' | 'S' | 'M' | 'L' | 'XL' = 'M'
slot?: string | null
styles?: StylesPropWithHeight
variant?: 'primary' | 'secondary' | 'tertiary' | 'quiet' = 'primary'/@react-spectrum/s2:Checkbox Checkbox {
- UNSAFE_className?: UnsafeClassName
+ UNSAFE_className?: string
UNSAFE_style?: CSSProperties
aria-controls?: string
aria-describedby?: string
aria-details?: string
aria-label?: string
aria-labelledby?: string
autoFocus?: boolean
children?: ReactNode
defaultSelected?: boolean
excludeFromTabOrder?: boolean
id?: string
inputRef?: RefObject<HTMLInputElement | null>
isDisabled?: boolean
isEmphasized?: boolean
isIndeterminate?: boolean
isInvalid?: boolean
isReadOnly?: boolean
isRequired?: boolean
isSelected?: boolean
name?: string
onBlur?: (FocusEvent<Target>) => void
onChange?: (boolean) => void
onFocus?: (FocusEvent<Target>) => void
onFocusChange?: (boolean) => void
onKeyDown?: (KeyboardEvent) => void
onKeyUp?: (KeyboardEvent) => void
size?: 'S' | 'M' | 'L' | 'XL' = 'M'
slot?: string | null
styles?: StylesProp
validate?: (boolean) => ValidationError | boolean | null | undefined
validationBehavior?: 'native' | 'aria' = 'native'
value?: string
}/@react-spectrum/s2:CheckboxGroup CheckboxGroup {
- UNSAFE_className?: UnsafeClassName
+ UNSAFE_className?: string
UNSAFE_style?: CSSProperties
aria-describedby?: string
aria-details?: string
aria-errormessage?: string
aria-labelledby?: string
children: ReactNode
contextualHelp?: ReactNode
defaultValue?: Array<string>
description?: ReactNode
errorMessage?: ReactNode | (ValidationResult) => ReactNode
id?: string
isDisabled?: boolean
isEmphasized?: boolean
isInvalid?: boolean
isReadOnly?: boolean
isRequired?: boolean
label?: ReactNode
labelAlign?: Alignment = 'start'
labelPosition?: LabelPosition = 'top'
name?: string
necessityIndicator?: NecessityIndicator = 'icon'
onBlur?: (FocusEvent<Target>) => void
onChange?: (T) => void
onFocus?: (FocusEvent<Target>) => void
onFocusChange?: (boolean) => void
orientation?: Orientation = 'vertical'
size?: 'S' | 'M' | 'L' | 'XL' = 'M'
slot?: string | null
styles?: StylesProp
validate?: (Array<string>) => ValidationError | boolean | null | undefined
validationBehavior?: 'native' | 'aria' = 'native'
value?: Array<string>
}/@react-spectrum/s2:CloseButton CloseButton {
- UNSAFE_className?: UnsafeClassName
+ UNSAFE_className?: string
UNSAFE_style?: CSSProperties
isDisabled?: boolean
onPress?: (PressEvent) => void
size?: 'S' | 'M' | 'L' | 'XL' = 'M'
styles?: StylesProp
}/@react-spectrum/s2:ColorArea ColorArea {
- UNSAFE_className?: UnsafeClassName
+ UNSAFE_className?: string
UNSAFE_style?: CSSProperties
aria-describedby?: string
aria-details?: string
aria-label?: string
colorSpace?: ColorSpace
defaultValue?: T
id?: string
isDisabled?: boolean
onChange?: (Color) => void
onChangeEnd?: (Color) => void
slot?: string | null
styles?: StylesProp
value?: T
xChannel?: ColorChannel
xName?: string
yChannel?: ColorChannel
yName?: string
}/@react-spectrum/s2:ColorField ColorField {
- UNSAFE_className?: UnsafeClassName
+ UNSAFE_className?: string
UNSAFE_style?: CSSProperties
aria-describedby?: string
aria-details?: string
aria-errormessage?: string
aria-labelledby?: string
autoFocus?: boolean
channel?: ColorChannel
colorSpace?: ColorSpace
contextualHelp?: ReactNode
defaultValue?: T
description?: ReactNode
errorMessage?: ReactNode | (ValidationResult) => ReactNode
excludeFromTabOrder?: boolean
id?: string
isDisabled?: boolean
isInvalid?: boolean
isReadOnly?: boolean
isRequired?: boolean
isWheelDisabled?: boolean
label?: ReactNode
labelAlign?: Alignment = 'start'
labelPosition?: LabelPosition = 'top'
name?: string
necessityIndicator?: NecessityIndicator = 'icon'
onBeforeInput?: FormEventHandler<HTMLInputElement>
onBlur?: (FocusEvent<Target>) => void
onChange?: (Color | null) => void
onCompositionEnd?: CompositionEventHandler<HTMLInputElement>
onCompositionStart?: CompositionEventHandler<HTMLInputElement>
onCompositionUpdate?: CompositionEventHandler<HTMLInputElement>
onCopy?: ClipboardEventHandler<HTMLInputElement>
onCut?: ClipboardEventHandler<HTMLInputElement>
onFocus?: (FocusEvent<Target>) => void
onFocusChange?: (boolean) => void
onInput?: FormEventHandler<HTMLInputElement>
onKeyDown?: (KeyboardEvent) => void
onKeyUp?: (KeyboardEvent) => void
onPaste?: ClipboardEventHandler<HTMLInputElement>
onSelect?: ReactEventHandler<HTMLInputElement>
size?: 'S' | 'M' | 'L' | 'XL' = 'M'
slot?: string | null
styles?: StylesProp
validate?: (Color | null) => ValidationError | boolean | null | undefined
validationBehavior?: 'native' | 'aria' = 'native'
value?: T
}/@react-spectrum/s2:ColorSlider ColorSlider {
- UNSAFE_className?: UnsafeClassName
+ UNSAFE_className?: string
UNSAFE_style?: CSSProperties
aria-describedby?: string
aria-details?: string
aria-label?: string
channel: ColorChannel
colorSpace?: ColorSpace
contextualHelp?: ReactNode
defaultValue?: T
id?: string
isDisabled?: boolean
label?: string
name?: string
onChange?: (Color) => void
onChangeEnd?: (Color) => void
orientation?: Orientation = 'horizontal'
slot?: string | null
styles?: StylesProp
value?: T
}/@react-spectrum/s2:ColorSwatch ColorSwatch {
- UNSAFE_className?: UnsafeClassName
+ UNSAFE_className?: string
UNSAFE_style?: CSSProperties
aria-describedby?: string
aria-details?: string
aria-label?: string
color?: string | Color
colorName?: string
id?: string
rounding?: 'default' | 'none' | 'full' = 'default'
size?: 'XS' | 'S' | 'M' | 'L' = 'M'
slot?: string | null
styles?: StylesPropWithHeight
}/@react-spectrum/s2:ColorSwatchPicker ColorSwatchPicker {
- UNSAFE_className?: UnsafeClassName
+ UNSAFE_className?: string
UNSAFE_style?: CSSProperties
children: ReactNode
defaultValue?: string | Color
density?: 'compact' | 'regular' | 'spacious' = 'regular'
rounding?: 'none' | 'default' | 'full' = 'none'
size?: 'XS' | 'S' | 'M' | 'L' = 'M'
slot?: string | null
styles?: StylesProp
value?: string | Color
}/@react-spectrum/s2:ColorWheel ColorWheel {
- UNSAFE_className?: UnsafeClassName
+ UNSAFE_className?: string
UNSAFE_style?: CSSProperties
aria-describedby?: string
aria-details?: string
aria-label?: string
defaultValue?: string | Color = 'hsl(0, 100%, 50%)'
id?: string
isDisabled?: boolean
name?: string
onChange?: (Color) => void
onChangeEnd?: (Color) => void
size?: number = 192
slot?: string | null
styles?: StylesProp
value?: T
}/@react-spectrum/s2:ComboBox ComboBox <T extends {}> {
- UNSAFE_className?: UnsafeClassName
+ UNSAFE_className?: string
UNSAFE_style?: CSSProperties
align?: 'start' | 'end' = 'start'
allowsCustomValue?: boolean
aria-describedby?: string
aria-details?: string
aria-label?: string
aria-labelledby?: string
autoFocus?: boolean
children: ReactNode | ({}) => ReactNode
contextualHelp?: ReactNode
defaultInputValue?: string
defaultItems?: Iterable<T>
defaultSelectedKey?: Key
description?: ReactNode
direction?: 'bottom' | 'top' = 'bottom'
disabledKeys?: Iterable<Key>
errorMessage?: ReactNode | (ValidationResult) => ReactNode
formValue?: 'text' | 'key' = 'key'
id?: string
inputValue?: string
isDisabled?: boolean
isInvalid?: boolean
isReadOnly?: boolean
isRequired?: boolean
items?: Iterable<T>
label?: ReactNode
labelAlign?: Alignment = 'start'
labelPosition?: LabelPosition = 'top'
+ loadingState?: LoadingState
menuTrigger?: MenuTriggerAction = 'input'
menuWidth?: number
name?: string
necessityIndicator?: NecessityIndicator = 'icon'
onBlur?: (FocusEvent<HTMLInputElement>) => void
onFocus?: (FocusEvent<HTMLInputElement>) => void
onFocusChange?: (boolean) => void
onInputChange?: (string) => void
onKeyDown?: (KeyboardEvent) => void
onKeyUp?: (KeyboardEvent) => void
+ onLoadMore?: () => any
onOpenChange?: (boolean, MenuTriggerAction) => void
onSelectionChange?: (Key | null) => void
selectedKey?: Key | null
shouldFlip?: boolean = true
size?: 'S' | 'M' | 'L' | 'XL' = 'M'
slot?: string | null
styles?: StylesProp
validate?: (ComboBoxValidationValue) => ValidationError | boolean | null | undefined
validationBehavior?: 'native' | 'aria' = 'native'
}/@react-spectrum/s2:ComboBoxItem ComboBoxItem {
- UNSAFE_className?: UnsafeClassName
+ UNSAFE_className?: string
UNSAFE_style?: CSSProperties
aria-label?: string
children: ReactNode
download?: boolean | string
hrefLang?: string
id?: Key
isDisabled?: boolean
onAction?: () => void
onHoverChange?: (boolean) => void
onHoverEnd?: (HoverEvent) => void
onHoverStart?: (HoverEvent) => void
ping?: string
referrerPolicy?: HTMLAttributeReferrerPolicy
rel?: string
routerOptions?: RouterOptions
styles?: StylesProp
target?: HTMLAttributeAnchorTarget
textValue?: string
value?: T
}/@react-spectrum/s2:ContextualHelp ContextualHelp {
- UNSAFE_className?: UnsafeClassName
+ UNSAFE_className?: string
UNSAFE_style?: CSSProperties
aria-describedby?: string
aria-details?: string
aria-label?: string
children: ReactNode
containerPadding?: number = 12
crossOffset?: number = 0
defaultOpen?: boolean
id?: string
isOpen?: boolean
offset?: number = 8
onOpenChange?: (boolean) => void
placement?: Placement = 'bottom'
shouldFlip?: boolean = true
size?: 'XS' | 'S' = 'XS'
styles?: StylesProp
variant?: 'info' | 'help' = 'help'
}/@react-spectrum/s2:DisclosureHeader DisclosureHeader {
- UNSAFE_className?: UnsafeClassName
+ UNSAFE_className?: string
UNSAFE_style?: CSSProperties
children: React.ReactNode
id?: string
}/@react-spectrum/s2:Disclosure Disclosure {
- UNSAFE_className?: UnsafeClassName
+ UNSAFE_className?: string
UNSAFE_style?: CSSProperties
children: ReactNode
defaultExpanded?: boolean
density?: 'compact' | 'regular' | 'spacious' = 'regular'
isDisabled?: boolean
isExpanded?: boolean
isQuiet?: boolean
onExpandedChange?: (boolean) => void
size?: 'S' | 'M' | 'L' | 'XL' = 'M'
slot?: string | null
styles?: StylesProp
}/@react-spectrum/s2:DisclosurePanel DisclosurePanel {
- UNSAFE_className?: UnsafeClassName
+ UNSAFE_className?: string
UNSAFE_style?: CSSProperties
aria-describedby?: string
aria-details?: string
aria-label?: string
children: React.ReactNode
id?: string
role?: 'group' | 'region' = 'group'
}/@react-spectrum/s2:DisclosureTitle DisclosureTitle {
- UNSAFE_className?: UnsafeClassName
+ UNSAFE_className?: string
UNSAFE_style?: CSSProperties
children: React.ReactNode
id?: string
level?: number = 3/@react-spectrum/s2:Heading Heading {
- UNSAFE_className?: UnsafeClassName
+ UNSAFE_className?: string
UNSAFE_style?: CSSProperties
children: ReactNode
id?: string
isHidden?: boolean
slot?: string | null
styles?: StyleString
}/@react-spectrum/s2:Header Header {
- UNSAFE_className?: UnsafeClassName
+ UNSAFE_className?: string
UNSAFE_style?: CSSProperties
children: ReactNode
id?: string
isHidden?: boolean
styles?: StyleString
}/@react-spectrum/s2:Content Content {
- UNSAFE_className?: UnsafeClassName
+ UNSAFE_className?: string
UNSAFE_style?: CSSProperties
children: ReactNode
id?: string
isHidden?: boolean
styles?: StyleString
}/@react-spectrum/s2:Footer Footer {
- UNSAFE_className?: UnsafeClassName
+ UNSAFE_className?: string
UNSAFE_style?: CSSProperties
children: ReactNode
id?: string
isHidden?: boolean
styles?: StyleString
}/@react-spectrum/s2:Text Text {
- UNSAFE_className?: UnsafeClassName
+ UNSAFE_className?: string
UNSAFE_style?: CSSProperties
children: ReactNode
id?: string
isHidden?: boolean
styles?: StyleString
}/@react-spectrum/s2:Keyboard Keyboard {
- UNSAFE_className?: UnsafeClassName
+ UNSAFE_className?: string
UNSAFE_style?: CSSProperties
children: ReactNode
id?: string
isHidden?: boolean
styles?: StyleString
}/@react-spectrum/s2:Dialog Dialog {
- UNSAFE_className?: UnsafeClassName
+ UNSAFE_className?: string
UNSAFE_style?: CSSProperties
aria-describedby?: string
aria-details?: string
aria-label?: string
children?: ReactNode | (DialogRenderProps) => ReactNode
id?: string
isDismissible?: boolean
isKeyboardDismissDisabled?: boolean
role?: 'dialog' | 'alertdialog' = 'dialog'
size?: 'S' | 'M' | 'L' = 'M'
slot?: string | null
styles?: StylesProp
}/@react-spectrum/s2:CustomDialog CustomDialog {
- UNSAFE_className?: UnsafeClassName
+ UNSAFE_className?: string
UNSAFE_style?: CSSProperties
aria-describedby?: string
aria-details?: string
aria-label?: string
children?: ReactNode | (DialogRenderProps) => ReactNode
id?: string
isDismissible?: boolean
isKeyboardDismissDisabled?: boolean
padding?: 'default' | 'none' = 'default'
role?: 'dialog' | 'alertdialog' = 'dialog'
size?: 'S' | 'M' | 'L' | 'fullscreen' | 'fullscreenTakeover'
slot?: string | null
styles?: StylesProp
}/@react-spectrum/s2:FullscreenDialog FullscreenDialog {
- UNSAFE_className?: UnsafeClassName
+ UNSAFE_className?: string
UNSAFE_style?: CSSProperties
aria-describedby?: string
aria-details?: string
aria-label?: string
children?: ReactNode | (DialogRenderProps) => ReactNode
id?: string
isKeyboardDismissDisabled?: boolean
role?: 'dialog' | 'alertdialog' = 'dialog'
slot?: string | null
styles?: StylesProp
variant?: 'fullscreen' | 'fullscreenTakeover' = "fullscreen"
}/@react-spectrum/s2:Divider Divider {
- UNSAFE_className?: UnsafeClassName
+ UNSAFE_className?: string
UNSAFE_style?: CSSProperties
aria-describedby?: string
aria-details?: string
aria-label?: string
id?: string
orientation?: 'horizontal' | 'vertical' = 'horizontal'
size?: 'S' | 'M' | 'L' = 'M'
slot?: string | null
staticColor?: 'white' | 'black' | 'auto'
styles?: StylesProp
}/@react-spectrum/s2:DropZone DropZone {
- UNSAFE_className?: UnsafeClassName
+ UNSAFE_className?: string
UNSAFE_style?: CSSProperties
aria-describedby?: string
aria-details?: string
aria-label?: string
children: ReactNode
getDropOperation?: (DragTypes, Array<DropOperation>) => DropOperation
id?: string
isFilled?: boolean
onDrop?: (DropEvent) => void
onDropEnter?: (DropEnterEvent) => void
onDropExit?: (DropExitEvent) => void
onDropMove?: (DropMoveEvent) => void
replaceMessage?: string
size?: 'S' | 'M' | 'L' = 'M'
slot?: string | null
styles?: StylesPropWithHeight
}/@react-spectrum/s2:Form Form {
- UNSAFE_className?: UnsafeClassName
+ UNSAFE_className?: string
UNSAFE_style?: CSSProperties
action?: string | FormHTMLAttributes<HTMLFormElement>['action']
aria-describedby?: string
aria-details?: string
aria-labelledby?: string
autoCapitalize?: 'off' | 'none' | 'on' | 'sentences' | 'words' | 'characters'
autoComplete?: 'off' | 'on'
children: ReactNode
encType?: 'application/x-www-form-urlencoded' | 'multipart/form-data' | 'text/plain'
id?: string
isDisabled?: boolean
isEmphasized?: boolean
isRequired?: boolean
labelAlign?: Alignment = 'start'
labelPosition?: LabelPosition = 'top'
method?: 'get' | 'post' | 'dialog'
necessityIndicator?: NecessityIndicator = 'icon'
onInvalid?: (FormEvent<HTMLFormElement>) => void
onReset?: (FormEvent<HTMLFormElement>) => void
onSubmit?: (FormEvent<HTMLFormElement>) => void
role?: 'search' | 'presentation'
size?: 'S' | 'M' | 'L' | 'XL' = 'M'
styles?: StylesProp
target?: '_blank' | '_self' | '_parent' | '_top'
validationBehavior?: 'aria' | 'native' = 'native'
validationErrors?: ValidationErrors
}/@react-spectrum/s2:IllustratedMessage IllustratedMessage {
- UNSAFE_className?: UnsafeClassName
+ UNSAFE_className?: string
UNSAFE_style?: CSSProperties
children: ReactNode
id?: string
orientation?: 'horizontal' | 'vertical' = 'vertical'
styles?: StylesPropWithHeight
}/@react-spectrum/s2:InlineAlert InlineAlert {
- UNSAFE_className?: UnsafeClassName
+ UNSAFE_className?: string
UNSAFE_style?: CSSProperties
autoFocus?: boolean
children: ReactNode
fillStyle?: 'border' | 'subtleFill' | 'boldFill' = border
slot?: string | null
styles?: StylesProp
variant?: 'informative' | 'positive' | 'notice' | 'negative' | 'neutral' = neutral
}/@react-spectrum/s2:Link Link {
- UNSAFE_className?: UnsafeClassName
+ UNSAFE_className?: string
UNSAFE_style?: CSSProperties
aria-describedby?: string
aria-details?: string
aria-label?: string
autoFocus?: boolean
children: ReactNode
download?: boolean | string
href?: Href
hrefLang?: string
isQuiet?: boolean
isStandalone?: boolean
onBlur?: (FocusEvent<Target>) => void
onFocus?: (FocusEvent<Target>) => void
onFocusChange?: (boolean) => void
onKeyDown?: (KeyboardEvent) => void
onKeyUp?: (KeyboardEvent) => void
onPress?: (PressEvent) => void
onPressChange?: (boolean) => void
onPressEnd?: (PressEvent) => void
onPressStart?: (PressEvent) => void
onPressUp?: (PressEvent) => void
ping?: string
referrerPolicy?: HTMLAttributeReferrerPolicy
rel?: string
routerOptions?: RouterOptions
slot?: string | null
staticColor?: 'white' | 'black' | 'auto'
styles?: StylesProp
target?: HTMLAttributeAnchorTarget
variant?: 'primary' | 'secondary' = 'primary'
}/@react-spectrum/s2:MenuItem MenuItem {
- UNSAFE_className?: UnsafeClassName
+ UNSAFE_className?: string
UNSAFE_style?: CSSProperties
aria-label?: string
children: ReactNode
download?: boolean | string
hrefLang?: string
id?: Key
isDisabled?: boolean
onAction?: () => void
onHoverChange?: (boolean) => void
onHoverEnd?: (HoverEvent) => void
onHoverStart?: (HoverEvent) => void
ping?: string
referrerPolicy?: HTMLAttributeReferrerPolicy
rel?: string
routerOptions?: RouterOptions
styles?: StylesProp
target?: HTMLAttributeAnchorTarget
textValue?: string
value?: T
}/@react-spectrum/s2:Menu Menu <T extends {}> {
- UNSAFE_className?: UnsafeClassName
+ UNSAFE_className?: string
UNSAFE_style?: CSSProperties
aria-describedby?: string
aria-details?: string
aria-label?: string
autoFocus?: boolean | FocusStrategy
children: ReactNode | ({}) => ReactNode
defaultSelectedKeys?: 'all' | Iterable<Key>
disabledKeys?: Iterable<Key>
disallowEmptySelection?: boolean
escapeKeyBehavior?: 'clearSelection' | 'none' = 'clearSelection'
hideLinkOutIcon?: boolean
id?: string
items?: Iterable<T>
onAction?: (Key) => void
onClose?: () => void
onScroll?: (UIEvent<Element>) => void
onSelectionChange?: (Selection) => void
selectedKeys?: 'all' | Iterable<Key>
selectionMode?: SelectionMode
shouldFocusWrap?: boolean
size?: 'S' | 'M' | 'L' | 'XL' = 'M'
slot?: string | null
styles?: StylesProp
}/@react-spectrum/s2:Meter Meter {
- UNSAFE_className?: UnsafeClassName
+ UNSAFE_className?: string
UNSAFE_style?: CSSProperties
aria-describedby?: string
aria-details?: string
aria-label?: string
formatOptions?: Intl.NumberFormatOptions = {style: 'percent'}
id?: string
label?: ReactNode
labelPosition?: LabelPosition = 'top'
maxValue?: number = 100
minValue?: number = 0
size?: 'S' | 'M' | 'L' | 'XL' = 'M'
slot?: string | null
staticColor?: 'white' | 'black' | 'auto'
styles?: StylesProp
value?: number = 0
valueLabel?: ReactNode
variant?: 'informative' | 'positive' | 'notice' | 'negative' = 'informative'
}/@react-spectrum/s2:NotificationBadge NotificationBadge {
- UNSAFE_className?: UnsafeClassName
+ UNSAFE_className?: string
UNSAFE_style?: CSSProperties
aria-describedby?: string
aria-details?: string
aria-label?: string
id?: string
size?: 'S' | 'M' | 'L' | 'XL' = 'S'
slot?: string | null
styles?: StylesProp
value?: number | null
}/@react-spectrum/s2:NumberField NumberField {
- UNSAFE_className?: UnsafeClassName
+ UNSAFE_className?: string
UNSAFE_style?: CSSProperties
aria-describedby?: string
aria-details?: string
aria-label?: string
autoFocus?: boolean
contextualHelp?: ReactNode
decrementAriaLabel?: string
defaultValue?: number
description?: ReactNode
errorMessage?: ReactNode | (ValidationResult) => ReactNode
formatOptions?: Intl.NumberFormatOptions
hideStepper?: boolean = false
id?: string
incrementAriaLabel?: string
isDisabled?: boolean
isInvalid?: boolean
isReadOnly?: boolean
isRequired?: boolean
isWheelDisabled?: boolean
label?: ReactNode
labelAlign?: Alignment = 'start'
labelPosition?: LabelPosition = 'top'
maxValue?: number
minValue?: number
name?: string
necessityIndicator?: NecessityIndicator = 'icon'
onBeforeInput?: FormEventHandler<HTMLInputElement>
onBlur?: (FocusEvent<Target>) => void
onChange?: (T) => void
onCompositionEnd?: CompositionEventHandler<HTMLInputElement>
onCompositionStart?: CompositionEventHandler<HTMLInputElement>
onCompositionUpdate?: CompositionEventHandler<HTMLInputElement>
onCopy?: ClipboardEventHandler<HTMLInputElement>
onCut?: ClipboardEventHandler<HTMLInputElement>
onFocus?: (FocusEvent<Target>) => void
onFocusChange?: (boolean) => void
onInput?: FormEventHandler<HTMLInputElement>
onKeyDown?: (KeyboardEvent) => void
onKeyUp?: (KeyboardEvent) => void
onPaste?: ClipboardEventHandler<HTMLInputElement>
onSelect?: ReactEventHandler<HTMLInputElement>
size?: 'S' | 'M' | 'L' | 'XL' = 'M'
slot?: string | null
step?: number
styles?: StylesProp
validate?: (number) => ValidationError | boolean | null | undefined
validationBehavior?: 'native' | 'aria' = 'native'
value?: number
}/@react-spectrum/s2:Picker Picker <T extends {}> {
- UNSAFE_className?: UnsafeClassName
+ UNSAFE_className?: string
UNSAFE_style?: CSSProperties
align?: 'start' | 'end' = 'start'
aria-describedby?: string
aria-details?: string
aria-label?: string
aria-labelledby?: string
autoComplete?: string
autoFocus?: boolean
children: ReactNode | ({}) => ReactNode
contextualHelp?: ReactNode
defaultOpen?: boolean
defaultSelectedKey?: Key
description?: ReactNode
direction?: 'bottom' | 'top' = 'bottom'
disabledKeys?: Iterable<Key>
errorMessage?: ReactNode | (ValidationResult) => ReactNode
excludeFromTabOrder?: boolean
id?: string
isDisabled?: boolean
isInvalid?: boolean
+ isLoading?: boolean
isOpen?: boolean
isRequired?: boolean
items?: Iterable<T>
label?: ReactNode
labelAlign?: Alignment = 'start'
labelPosition?: LabelPosition = 'top'
menuWidth?: number
name?: string
necessityIndicator?: NecessityIndicator = 'icon'
onBlur?: (FocusEvent<Target>) => void
onFocus?: (FocusEvent<Target>) => void
onFocusChange?: (boolean) => void
onKeyDown?: (KeyboardEvent) => void
onKeyUp?: (KeyboardEvent) => void
+ onLoadMore?: () => any
onOpenChange?: (boolean) => void
onSelectionChange?: (Key) => void
- placeholder?: string = 'Select an item' (localized)
+ placeholder?: string
selectedKey?: Key | null
shouldFlip?: boolean = true
size?: 'S' | 'M' | 'L' | 'XL' = 'M'
slot?: string | null
validate?: (Key) => ValidationError | boolean | null | undefined
validationBehavior?: 'native' | 'aria' = 'native'
}/@react-spectrum/s2:PickerItem PickerItem {
- UNSAFE_className?: UnsafeClassName
+ UNSAFE_className?: string
UNSAFE_style?: CSSProperties
aria-label?: string
children: ReactNode
download?: boolean | string
hrefLang?: string
id?: Key
isDisabled?: boolean
onAction?: () => void
onHoverChange?: (boolean) => void
onHoverEnd?: (HoverEvent) => void
onHoverStart?: (HoverEvent) => void
ping?: string
referrerPolicy?: HTMLAttributeReferrerPolicy
rel?: string
routerOptions?: RouterOptions
styles?: StylesProp
target?: HTMLAttributeAnchorTarget
textValue?: string
value?: T
}/@react-spectrum/s2:Popover Popover {
- UNSAFE_className?: UnsafeClassName
+ UNSAFE_className?: string
UNSAFE_style?: CSSProperties
aria-describedby?: string
aria-details?: string
aria-label?: string
children?: ReactNode | (DialogRenderProps) => ReactNode
containerPadding?: number = 12
crossOffset?: number = 0
hideArrow?: boolean = false
id?: string
offset?: number = 8
placement?: Placement = 'bottom'
role?: 'dialog' | 'alertdialog' = 'dialog'
shouldFlip?: boolean = true
size?: 'S' | 'M' | 'L'
slot?: string | null
styles?: StylesProp
}/@react-spectrum/s2:ProgressBar ProgressBar {
- UNSAFE_className?: UnsafeClassName
+ UNSAFE_className?: string
UNSAFE_style?: CSSProperties
aria-describedby?: string
aria-details?: string
aria-label?: string
formatOptions?: Intl.NumberFormatOptions = {style: 'percent'}
id?: string
isIndeterminate?: boolean
label?: ReactNode
labelPosition?: LabelPosition = 'top'
maxValue?: number = 100
minValue?: number = 0
size?: 'S' | 'M' | 'L' | 'XL' = 'M'
slot?: string | null
staticColor?: 'white' | 'black' | 'auto'
styles?: StylesProp
value?: number = 0
valueLabel?: ReactNode
}/@react-spectrum/s2:ProgressCircle ProgressCircle {
- UNSAFE_className?: UnsafeClassName
+ UNSAFE_className?: string
UNSAFE_style?: CSSProperties
aria-describedby?: string
aria-details?: string
aria-label?: string
id?: string
isIndeterminate?: boolean
maxValue?: number = 100
minValue?: number = 0
size?: 'S' | 'M' | 'L' = 'M'
slot?: string | null
staticColor?: 'black' | 'white' | 'auto'
styles?: StylesPropWithHeight
value?: number = 0
}/@react-spectrum/s2:Radio Radio {
- UNSAFE_className?: UnsafeClassName
+ UNSAFE_className?: string
UNSAFE_style?: CSSProperties
aria-describedby?: string
aria-details?: string
aria-label?: string
autoFocus?: boolean
children?: ReactNode
id?: string
inputRef?: RefObject<HTMLInputElement | null>
isDisabled?: boolean
onBlur?: (FocusEvent<Target>) => void
onFocus?: (FocusEvent<Target>) => void
onFocusChange?: (boolean) => void
onKeyDown?: (KeyboardEvent) => void
onKeyUp?: (KeyboardEvent) => void
slot?: string | null
styles?: StylesProp
value: string
}/@react-spectrum/s2:RadioGroup RadioGroup {
- UNSAFE_className?: UnsafeClassName
+ UNSAFE_className?: string
UNSAFE_style?: CSSProperties
aria-describedby?: string
aria-details?: string
aria-errormessage?: string
aria-labelledby?: string
children: ReactNode
contextualHelp?: ReactNode
defaultValue?: string | null
description?: ReactNode
errorMessage?: ReactNode | (ValidationResult) => ReactNode
id?: string
isDisabled?: boolean
isEmphasized?: boolean
isInvalid?: boolean
isReadOnly?: boolean
isRequired?: boolean
label?: ReactNode
labelAlign?: Alignment = 'start'
labelPosition?: LabelPosition = 'top'
name?: string
necessityIndicator?: NecessityIndicator = 'icon'
onBlur?: (FocusEvent<Target>) => void
onChange?: (string) => void
onFocus?: (FocusEvent<Target>) => void
onFocusChange?: (boolean) => void
orientation?: Orientation = 'vertical'
size?: 'S' | 'M' | 'L' | 'XL' = 'M'
slot?: string | null
styles?: StylesProp
validate?: (string | null) => ValidationError | boolean | null | undefined
validationBehavior?: 'native' | 'aria' = 'native'
value?: string | null
}/@react-spectrum/s2:RangeSlider RangeSlider {
- UNSAFE_className?: UnsafeClassName
+ UNSAFE_className?: string
UNSAFE_style?: CSSProperties
aria-describedby?: string
aria-details?: string
aria-label?: string
contextualHelp?: ReactNode
defaultValue?: T
endName?: string
formatOptions?: Intl.NumberFormatOptions
id?: string
isDisabled?: boolean
isEmphasized?: boolean
label?: ReactNode
labelAlign?: Alignment = 'start'
labelPosition?: LabelPosition = 'top'
maxValue?: number = 100
minValue?: number = 0
onChange?: (T) => void
onChangeEnd?: (T) => void
size?: 'S' | 'M' | 'L' | 'XL' = 'M'
slot?: string | null
startName?: string
step?: number = 1
styles?: StylesProp
thumbStyle?: 'default' | 'precise' = 'default'
trackStyle?: 'thin' | 'thick' = 'thin'
value?: T
}/@react-spectrum/s2:SearchField SearchField {
- UNSAFE_className?: UnsafeClassName
+ UNSAFE_className?: string
UNSAFE_style?: CSSProperties
aria-activedescendant?: string
aria-autocomplete?: 'none' | 'inline' | 'list' | 'both'
aria-controls?: string
aria-details?: string
aria-errormessage?: string
aria-haspopup?: boolean | 'false' | 'true' | 'menu' | 'listbox' | 'tree' | 'grid' | 'dialog'
aria-label?: string
aria-labelledby?: string
autoComplete?: string
autoCorrect?: string
autoFocus?: boolean
contextualHelp?: ReactNode
defaultValue?: string
description?: ReactNode
enterKeyHint?: 'enter' | 'done' | 'go' | 'next' | 'previous' | 'search' | 'send'
errorMessage?: ReactNode | (ValidationResult) => ReactNode
excludeFromTabOrder?: boolean
id?: string
inputMode?: 'none' | 'text' | 'tel' | 'url' | 'email' | 'numeric' | 'decimal' | 'search'
isDisabled?: boolean
isInvalid?: boolean
isReadOnly?: boolean
isRequired?: boolean
label?: ReactNode
labelAlign?: Alignment = 'start'
labelPosition?: LabelPosition = 'top'
maxLength?: number
minLength?: number
name?: string
necessityIndicator?: NecessityIndicator = 'icon'
onBeforeInput?: FormEventHandler<HTMLInputElement>
onBlur?: (FocusEvent<T>) => void
onChange?: (T) => void
onClear?: () => void
onCompositionEnd?: CompositionEventHandler<HTMLInputElement>
onCompositionStart?: CompositionEventHandler<HTMLInputElement>
onCompositionUpdate?: CompositionEventHandler<HTMLInputElement>
onCopy?: ClipboardEventHandler<HTMLInputElement>
onCut?: ClipboardEventHandler<HTMLInputElement>
onFocus?: (FocusEvent<T>) => void
onFocusChange?: (boolean) => void
onInput?: FormEventHandler<HTMLInputElement>
onKeyDown?: (KeyboardEvent) => void
onKeyUp?: (KeyboardEvent) => void
onPaste?: ClipboardEventHandler<HTMLInputElement>
onSelect?: ReactEventHandler<HTMLInputElement>
onSubmit?: (string) => void
pattern?: string
size?: 'S' | 'M' | 'L' | 'XL' = 'M'
slot?: string | null
spellCheck?: string
styles?: StylesProp
type?: 'text' | 'search' | 'url' | 'tel' | 'email' | 'password' | (string & {
})
validate?: (string) => ValidationError | boolean | null | undefined
validationBehavior?: 'native' | 'aria' = 'native'
value?: string
}/@react-spectrum/s2:SegmentedControl SegmentedControl {
- UNSAFE_className?: UnsafeClassName
+ UNSAFE_className?: string
UNSAFE_style?: CSSProperties
aria-describedby?: string
aria-details?: string
aria-label?: string
children: ReactNode
defaultSelectedKey?: Key
isDisabled?: boolean
isJustified?: boolean
onSelectionChange?: (Key) => void
selectedKey?: Key | null
slot?: string | null
styles?: StylesProp
}/@react-spectrum/s2:SegmentedControlItem SegmentedControlItem {
- UNSAFE_className?: UnsafeClassName
+ UNSAFE_className?: string
UNSAFE_style?: CSSProperties
aria-describedby?: string
aria-details?: string
aria-label?: string
children: ReactNode
id: Key
isDisabled?: boolean
styles?: StylesProp
}/@react-spectrum/s2:Slider Slider {
- UNSAFE_className?: UnsafeClassName
+ UNSAFE_className?: string
UNSAFE_style?: CSSProperties
aria-describedby?: string
aria-details?: string
aria-label?: string
contextualHelp?: ReactNode
defaultValue?: T
fillOffset?: number
formatOptions?: Intl.NumberFormatOptions
id?: string
isDisabled?: boolean
isEmphasized?: boolean
label?: ReactNode
labelAlign?: Alignment = 'start'
labelPosition?: LabelPosition = 'top'
maxValue?: number = 100
minValue?: number = 0
name?: string
onChange?: (T) => void
onChangeEnd?: (T) => void
size?: 'S' | 'M' | 'L' | 'XL' = 'M'
slot?: string | null
step?: number = 1
styles?: StylesProp
thumbStyle?: 'default' | 'precise' = 'default'
trackStyle?: 'thin' | 'thick' = 'thin'
value?: T
}/@react-spectrum/s2:StatusLight StatusLight {
- UNSAFE_className?: UnsafeClassName
+ UNSAFE_className?: string
UNSAFE_style?: CSSProperties
aria-describedby?: string
aria-details?: string
aria-label?: string
children?: ReactNode
id?: string
role?: 'status'
size?: 'S' | 'M' | 'L' | 'XL' = 'M'
slot?: string | null
styles?: StylesProp
variant: 'informative' | 'neutral' | 'positive' | 'notice' | 'negative' | 'celery' | 'chartreuse' | 'cyan' | 'fuchsia' | 'purple' | 'magenta' | 'indigo' | 'seafoam' | 'yellow' | 'pink' | 'turquoise' | 'cinnamon' | 'brown' | 'silver'
}/@react-spectrum/s2:Switch Switch {
- UNSAFE_className?: UnsafeClassName
+ UNSAFE_className?: string
UNSAFE_style?: CSSProperties
aria-controls?: string
aria-describedby?: string
aria-details?: string
aria-labelledby?: string
autoFocus?: boolean
children?: ReactNode
defaultSelected?: boolean
excludeFromTabOrder?: boolean
id?: string
inputRef?: RefObject<HTMLInputElement | null>
isDisabled?: boolean
isEmphasized?: boolean
isReadOnly?: boolean
isSelected?: boolean
name?: string
onBlur?: (FocusEvent<Target>) => void
onChange?: (boolean) => void
onFocus?: (FocusEvent<Target>) => void
onFocusChange?: (boolean) => void
onKeyDown?: (KeyboardEvent) => void
onKeyUp?: (KeyboardEvent) => void
size?: 'S' | 'M' | 'L' | 'XL' = 'M'
slot?: string | null
styles?: StylesProp
value?: string
}/@react-spectrum/s2:TableView TableView {
- UNSAFE_className?: UnsafeClassName
+ UNSAFE_className?: string
UNSAFE_style?: CSSProperties
aria-describedby?: string
aria-details?: string
aria-label?: string
aria-labelledby?: string
children?: ReactNode
defaultSelectedKeys?: 'all' | Iterable<Key>
density?: 'compact' | 'spacious' | 'regular' = 'regular'
disabledKeys?: Iterable<Key>
disallowEmptySelection?: boolean
escapeKeyBehavior?: 'clearSelection' | 'none' = 'clearSelection'
isQuiet?: boolean
loadingState?: LoadingState
onAction?: (Key) => void
onLoadMore?: () => any
onResize?: (Map<Key, ColumnSize>) => void
onResizeEnd?: (Map<Key, ColumnSize>) => void
onResizeStart?: (Map<Key, ColumnSize>) => void
onSelectionChange?: (Selection) => void
onSortChange?: (SortDescriptor) => any
overflowMode?: 'wrap' | 'truncate' = 'truncate'
renderActionBar?: ('all' | Set<Key>) => ReactElement
selectedKeys?: 'all' | Iterable<Key>
selectionMode?: SelectionMode
- shouldSelectOnPressUp?: boolean
slot?: string | null
sortDescriptor?: SortDescriptor
styles?: StylesPropWithHeight
}/@react-spectrum/s2:Column Column {
- UNSTABLE_menuItems?: ReactNode
align?: 'start' | 'center' | 'end' = 'start'
allowsResizing?: boolean
allowsSorting?: boolean
children: ReactNode
defaultClassName: string | undefined
})) => string
defaultWidth?: ColumnSize | null
id?: Key
isRowHeader?: boolean
maxWidth?: ColumnStaticSize | null
minWidth?: ColumnStaticSize | null
showDivider?: boolean
style?: CSSProperties | ((ColumnRenderProps & {
defaultStyle: CSSProperties
})) => CSSProperties | undefined
textValue?: string
width?: ColumnSize | null
}/@react-spectrum/s2:Tabs Tabs {
- UNSAFE_className?: UnsafeClassName
+ UNSAFE_className?: string
UNSAFE_style?: CSSProperties
aria-describedby?: string
aria-details?: string
aria-label?: string
children: ReactNode
defaultSelectedKey?: Key
density?: 'compact' | 'regular' = 'regular'
disabledKeys?: Iterable<Key>
id?: string
isDisabled?: boolean
keyboardActivation?: 'automatic' | 'manual' = 'automatic'
labelBehavior?: 'show' | 'hide' = 'show'
onSelectionChange?: (Key) => void
orientation?: Orientation = 'horizontal'
selectedKey?: Key | null
slot?: string | null
styles?: StylesPropWithHeight
}/@react-spectrum/s2:TabList TabList <T extends {}> {
- UNSAFE_className?: UnsafeClassName
+ UNSAFE_className?: string
UNSAFE_style?: CSSProperties
aria-describedby?: string
aria-details?: string
children: ReactNode | ({}) => ReactNode
items?: Iterable<T>
styles?: StylesProp
}/@react-spectrum/s2:Tab Tab {
- UNSAFE_className?: UnsafeClassName
+ UNSAFE_className?: string
UNSAFE_style?: CSSProperties
aria-describedby?: string
aria-details?: string
aria-label?: string
children: ReactNode
download?: boolean | string
href?: Href
hrefLang?: string
id?: Key
isDisabled?: boolean
onHoverChange?: (boolean) => void
onHoverEnd?: (HoverEvent) => void
onHoverStart?: (HoverEvent) => void
ping?: string
referrerPolicy?: HTMLAttributeReferrerPolicy
rel?: string
routerOptions?: RouterOptions
styles?: StylesProp
target?: HTMLAttributeAnchorTarget
}/@react-spectrum/s2:TabPanel TabPanel {
- UNSAFE_className?: UnsafeClassName
+ UNSAFE_className?: string
UNSAFE_style?: CSSProperties
aria-describedby?: string
aria-details?: string
aria-label?: string
children: ReactNode
id?: string
shouldForceMount?: boolean = false
styles?: StylesPropWithHeight
}/@react-spectrum/s2:TagGroup TagGroup <T extends {}> {
- UNSAFE_className?: UnsafeClassName
+ UNSAFE_className?: string
UNSAFE_style?: CSSProperties
aria-describedby?: string
aria-details?: string
aria-label?: string
aria-labelledby?: string
children?: ReactNode | (T) => ReactNode
contextualHelp?: ReactNode
defaultSelectedKeys?: 'all' | Iterable<Key>
description?: ReactNode
disabledKeys?: Iterable<Key>
disallowEmptySelection?: boolean
errorMessage?: ReactNode
groupActionLabel?: string
id?: string
isEmphasized?: boolean
isInvalid?: boolean
items?: Iterable<T>
label?: ReactNode
labelAlign?: Alignment = 'start'
labelPosition?: LabelPosition = 'top'
maxRows?: number
onGroupAction?: () => void
onRemove?: (Set<Key>) => void
onSelectionChange?: (Selection) => void
renderEmptyState?: () => ReactNode
selectedKeys?: 'all' | Iterable<Key>
selectionBehavior?: SelectionBehavior
selectionMode?: SelectionMode
- shouldSelectOnPressUp?: boolean
size?: 'S' | 'M' | 'L' = 'M'
slot?: string | null
styles?: StylesProp
}/@react-spectrum/s2:TextArea TextArea {
- UNSAFE_className?: UnsafeClassName
+ UNSAFE_className?: string
UNSAFE_style?: CSSProperties
aria-activedescendant?: string
aria-autocomplete?: 'none' | 'inline' | 'list' | 'both'
aria-controls?: string
aria-details?: string
aria-errormessage?: string
aria-haspopup?: boolean | 'false' | 'true' | 'menu' | 'listbox' | 'tree' | 'grid' | 'dialog'
aria-label?: string
aria-labelledby?: string
autoComplete?: string
autoCorrect?: string
autoFocus?: boolean
contextualHelp?: ReactNode
defaultValue?: string
description?: ReactNode
enterKeyHint?: 'enter' | 'done' | 'go' | 'next' | 'previous' | 'search' | 'send'
errorMessage?: ReactNode | (ValidationResult) => ReactNode
excludeFromTabOrder?: boolean
id?: string
inputMode?: 'none' | 'text' | 'tel' | 'url' | 'email' | 'numeric' | 'decimal' | 'search'
isDisabled?: boolean
isInvalid?: boolean
isReadOnly?: boolean
isRequired?: boolean
label?: ReactNode
labelAlign?: Alignment = 'start'
labelPosition?: LabelPosition = 'top'
maxLength?: number
minLength?: number
name?: string
necessityIndicator?: NecessityIndicator = 'icon'
onBeforeInput?: FormEventHandler<HTMLInputElement>
onBlur?: (FocusEvent<T>) => void
onChange?: (T) => void
onCompositionEnd?: CompositionEventHandler<HTMLInputElement>
onCompositionStart?: CompositionEventHandler<HTMLInputElement>
onCompositionUpdate?: CompositionEventHandler<HTMLInputElement>
onCopy?: ClipboardEventHandler<HTMLInputElement>
onCut?: ClipboardEventHandler<HTMLInputElement>
onFocus?: (FocusEvent<T>) => void
onFocusChange?: (boolean) => void
onInput?: FormEventHandler<HTMLInputElement>
onKeyDown?: (KeyboardEvent) => void
onKeyUp?: (KeyboardEvent) => void
onPaste?: ClipboardEventHandler<HTMLInputElement>
onSelect?: ReactEventHandler<HTMLInputElement>
size?: 'S' | 'M' | 'L' | 'XL' = 'M'
slot?: string | null
spellCheck?: string
styles?: StylesProp
validate?: (string) => ValidationError | boolean | null | undefined
validationBehavior?: 'native' | 'aria' = 'native'
value?: string
}/@react-spectrum/s2:TextField TextField {
- UNSAFE_className?: UnsafeClassName
+ UNSAFE_className?: string
UNSAFE_style?: CSSProperties
aria-activedescendant?: string
aria-autocomplete?: 'none' | 'inline' | 'list' | 'both'
aria-controls?: string
aria-details?: string
aria-errormessage?: string
aria-haspopup?: boolean | 'false' | 'true' | 'menu' | 'listbox' | 'tree' | 'grid' | 'dialog'
aria-label?: string
aria-labelledby?: string
autoComplete?: string
autoCorrect?: string
autoFocus?: boolean
contextualHelp?: ReactNode
defaultValue?: string
description?: ReactNode
enterKeyHint?: 'enter' | 'done' | 'go' | 'next' | 'previous' | 'search' | 'send'
errorMessage?: ReactNode | (ValidationResult) => ReactNode
excludeFromTabOrder?: boolean
id?: string
inputMode?: 'none' | 'text' | 'tel' | 'url' | 'email' | 'numeric' | 'decimal' | 'search'
isDisabled?: boolean
isInvalid?: boolean
isReadOnly?: boolean
isRequired?: boolean
label?: ReactNode
labelAlign?: Alignment = 'start'
labelPosition?: LabelPosition = 'top'
maxLength?: number
minLength?: number
name?: string
necessityIndicator?: NecessityIndicator = 'icon'
onBeforeInput?: FormEventHandler<HTMLInputElement>
onBlur?: (FocusEvent<T>) => void
onChange?: (T) => void
onCompositionEnd?: CompositionEventHandler<HTMLInputElement>
onCompositionStart?: CompositionEventHandler<HTMLInputElement>
onCompositionUpdate?: CompositionEventHandler<HTMLInputElement>
onCopy?: ClipboardEventHandler<HTMLInputElement>
onCut?: ClipboardEventHandler<HTMLInputElement>
onFocus?: (FocusEvent<T>) => void
onFocusChange?: (boolean) => void
onInput?: FormEventHandler<HTMLInputElement>
onKeyDown?: (KeyboardEvent) => void
onKeyUp?: (KeyboardEvent) => void
onPaste?: ClipboardEventHandler<HTMLInputElement>
onSelect?: ReactEventHandler<HTMLInputElement>
pattern?: string
size?: 'S' | 'M' | 'L' | 'XL' = 'M'
slot?: string | null
spellCheck?: string
styles?: StylesProp
type?: 'text' | 'search' | 'url' | 'tel' | 'email' | 'password' | (string & {
})
validate?: (string) => ValidationError | boolean | null | undefined
validationBehavior?: 'native' | 'aria' = 'native'
value?: string
}/@react-spectrum/s2:UNSTABLE_ToastContainer-UNSTABLE_ToastContainer {
- aria-describedby?: string
- aria-details?: string
- aria-label?: string = "Notifications"
- aria-labelledby?: string
- className?: string | ((ToastRegionRenderProps<T> & {
- defaultClassName: string | undefined
-})) => string
- placement?: ToastPlacement = "bottom"
- style?: CSSProperties | ((ToastRegionRenderProps<T> & {
- defaultStyle: CSSProperties
-})) => CSSProperties | undefined
-}/@react-spectrum/s2:UNSTABLE_ToastQueue-UNSTABLE_ToastQueue {
- info: (string, ToastOptions) => CloseFunction
- negative: (string, ToastOptions) => CloseFunction
- neutral: (string, ToastOptions) => CloseFunction
- positive: (string, ToastOptions) => CloseFunction
-}/@react-spectrum/s2:ToggleButton ToggleButton {
- UNSAFE_className?: UnsafeClassName
+ UNSAFE_className?: string
UNSAFE_style?: CSSProperties
aria-controls?: string
aria-describedby?: string
aria-details?: string
aria-haspopup?: boolean | 'menu' | 'listbox' | 'tree' | 'grid' | 'dialog' | 'true' | 'false'
aria-label?: string
aria-labelledby?: string
aria-pressed?: boolean | 'true' | 'false' | 'mixed'
autoFocus?: boolean
children: ReactNode
defaultSelected?: boolean
excludeFromTabOrder?: boolean
id?: Key
isDisabled?: boolean
isEmphasized?: boolean
isQuiet?: boolean
isSelected?: boolean
onBlur?: (FocusEvent<Target>) => void
onChange?: (boolean) => void
onFocus?: (FocusEvent<Target>) => void
onFocusChange?: (boolean) => void
onKeyDown?: (KeyboardEvent) => void
onKeyUp?: (KeyboardEvent) => void
onPress?: (PressEvent) => void
onPressChange?: (boolean) => void
onPressEnd?: (PressEvent) => void
onPressStart?: (PressEvent) => void
onPressUp?: (PressEvent) => void
preventFocusOnPress?: boolean
size?: 'XS' | 'S' | 'M' | 'L' | 'XL' = 'M'
slot?: string | null
staticColor?: 'black' | 'white' | 'auto'
styles?: StylesProp
type?: 'button' | 'submit' | 'reset' = 'button'
}/@react-spectrum/s2:ToggleButtonGroup ToggleButtonGroup {
- UNSAFE_className?: UnsafeClassName
+ UNSAFE_className?: string
UNSAFE_style?: CSSProperties
aria-describedby?: string
aria-details?: string
aria-label?: string
children: ReactNode
defaultSelectedKeys?: Iterable<Key>
density?: 'compact' | 'regular' = "regular"
disallowEmptySelection?: boolean
isDisabled?: boolean
isEmphasized?: boolean
isJustified?: boolean
isQuiet?: boolean
onSelectionChange?: (Set<Key>) => void
orientation?: 'horizontal' | 'vertical' = 'horizontal'
selectedKeys?: Iterable<Key>
selectionMode?: 'single' | 'multiple'
size?: 'XS' | 'S' | 'M' | 'L' | 'XL' = "M"
slot?: string | null
staticColor?: 'white' | 'black' | 'auto'
styles?: StylesPropWithHeight
}/@react-spectrum/s2:Tooltip Tooltip {
- UNSAFE_className?: UnsafeClassName
+ UNSAFE_className?: string
UNSAFE_style?: CSSProperties
aria-describedby?: string
aria-details?: string
aria-label?: string
children: ReactNode
}/@react-spectrum/s2:TreeView TreeView {
- UNSAFE_className?: UnsafeClassName
+ 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
defaultExpandedKeys?: Iterable<Key>
defaultSelectedKeys?: 'all' | Iterable<Key>
dependencies?: ReadonlyArray<any>
disabledBehavior?: DisabledBehavior = 'all'
disabledKeys?: Iterable<Key>
disallowEmptySelection?: boolean
escapeKeyBehavior?: 'clearSelection' | 'none' = 'clearSelection'
expandedKeys?: Iterable<Key>
id?: string
isDetached?: boolean
isEmphasized?: boolean
items?: Iterable<T>
onAction?: (Key) => void
onExpandedChange?: (Set<Key>) => any
onSelectionChange?: (Selection) => void
renderEmptyState?: (TreeEmptyStateRenderProps) => ReactNode
selectedKeys?: 'all' | Iterable<Key>
selectionMode?: SelectionMode
- shouldSelectOnPressUp?: boolean
slot?: string | null
styles?: StylesPropWithHeight
}/@react-spectrum/s2:AccordionProps AccordionProps {
- UNSAFE_className?: UnsafeClassName
+ UNSAFE_className?: string
UNSAFE_style?: CSSProperties
allowsMultipleExpanded?: boolean
children: React.ReactNode
defaultExpandedKeys?: Iterable<Key>
expandedKeys?: Iterable<Key>
id?: string
isDisabled?: boolean
isQuiet?: boolean
onExpandedChange?: (Set<Key>) => any
size?: 'S' | 'M' | 'L' | 'XL' = 'M'
slot?: string | null
styles?: StylesPropWithHeight
}/@react-spectrum/s2:ActionButtonProps ActionButtonProps {
- UNSAFE_className?: UnsafeClassName
+ UNSAFE_className?: string
UNSAFE_style?: CSSProperties
aria-controls?: string
aria-current?: boolean | 'true' | 'false' | 'page' | 'step' | 'location' | 'date' | 'time'
aria-describedby?: string
aria-expanded?: boolean | 'true' | 'false'
aria-haspopup?: boolean | 'menu' | 'listbox' | 'tree' | 'grid' | 'dialog' | 'true' | 'false'
aria-label?: string
aria-labelledby?: string
aria-pressed?: boolean | 'true' | 'false' | 'mixed'
autoFocus?: boolean
children: ReactNode
excludeFromTabOrder?: boolean
form?: string
formAction?: string
formEncType?: string
formMethod?: string
formNoValidate?: boolean
formTarget?: string
id?: string
isDisabled?: boolean
isQuiet?: boolean
name?: string
onBlur?: (FocusEvent<Target>) => void
onFocus?: (FocusEvent<Target>) => void
onFocusChange?: (boolean) => void
onKeyDown?: (KeyboardEvent) => void
onKeyUp?: (KeyboardEvent) => void
onPress?: (PressEvent) => void
onPressChange?: (boolean) => void
onPressEnd?: (PressEvent) => void
onPressStart?: (PressEvent) => void
onPressUp?: (PressEvent) => void
preventFocusOnPress?: boolean
size?: 'XS' | 'S' | 'M' | 'L' | 'XL' = 'M'
slot?: string | null
staticColor?: 'black' | 'white' | 'auto'
styles?: StylesProp
type?: 'button' | 'submit' | 'reset' = 'button'
value?: string
}/@react-spectrum/s2:ActionButtonGroupProps ActionButtonGroupProps {
- UNSAFE_className?: UnsafeClassName
+ UNSAFE_className?: string
UNSAFE_style?: CSSProperties
aria-describedby?: string
aria-details?: string
aria-label?: string
children: ReactNode
density?: 'compact' | 'regular' = "regular"
isDisabled?: boolean
isJustified?: boolean
isQuiet?: boolean
orientation?: 'horizontal' | 'vertical' = 'horizontal'
size?: 'XS' | 'S' | 'M' | 'L' | 'XL' = "M"
slot?: string | null
staticColor?: 'white' | 'black' | 'auto'
styles?: StylesPropWithHeight
}/@react-spectrum/s2:ActionMenuProps ActionMenuProps <T> {
- UNSAFE_className?: UnsafeClassName
+ UNSAFE_className?: string
UNSAFE_style?: CSSProperties
align?: 'start' | 'end' = 'start'
aria-describedby?: string
aria-details?: string
aria-labelledby?: string
autoFocus?: boolean
children: ReactNode | (T) => ReactNode
defaultOpen?: boolean
direction?: 'bottom' | 'top' | 'left' | 'right' | 'start' | 'end' = 'bottom'
disabledKeys?: Iterable<Key>
id?: string
isDisabled?: boolean
isOpen?: boolean
isQuiet?: boolean
items?: Iterable<T>
menuSize?: 'S' | 'M' | 'L' | 'XL'
onAction?: (Key) => void
onOpenChange?: (boolean) => void
shouldFlip?: boolean = true
size?: 'XS' | 'S' | 'M' | 'L' | 'XL' = 'M'
styles?: StylesProp
}/@react-spectrum/s2:AlertDialogProps AlertDialogProps {
- UNSAFE_className?: UnsafeClassName
+ UNSAFE_className?: string
UNSAFE_style?: CSSProperties
autoFocusButton?: 'cancel' | 'primary' | 'secondary'
cancelLabel?: string
children: ReactNode
isPrimaryActionDisabled?: boolean
isSecondaryActionDisabled?: boolean
onCancel?: () => void
onPrimaryAction?: () => void
onSecondaryAction?: () => void
primaryActionLabel: string
secondaryActionLabel?: string
size?: 'S' | 'M' | 'L' = 'M'
title: string
variant?: 'confirmation' | 'information' | 'destructive' | 'error' | 'warning'
}/@react-spectrum/s2:AvatarProps AvatarProps {
- UNSAFE_className?: UnsafeClassName
+ UNSAFE_className?: string
UNSAFE_style?: CSSProperties
alt?: string
id?: string
isOverBackground?: boolean
}) = 24
slot?: string | null
src?: string
styles?: StylesPropWithoutWidth
}/@react-spectrum/s2:AvatarGroupProps AvatarGroupProps {
- UNSAFE_className?: UnsafeClassName
+ UNSAFE_className?: string
UNSAFE_style?: CSSProperties
aria-describedby?: string
aria-details?: string
aria-label?: string
children: ReactNode
id?: string
label?: string
size?: number | number | number | number | number | number | number = 24
slot?: string | null
styles?: StylesPropWithoutWidth
}/@react-spectrum/s2:BreadcrumbsProps BreadcrumbsProps <T> {
- UNSAFE_className?: UnsafeClassName
+ UNSAFE_className?: string
UNSAFE_style?: CSSProperties
aria-describedby?: string
aria-details?: string
aria-label?: string
children: ReactNode
dependencies?: ReadonlyArray<any>
id?: string
isDisabled?: boolean
onAction?: (Key) => void
size?: 'M' | 'L' = 'M'
slot?: string | null
styles?: StylesProp
}/@react-spectrum/s2:BadgeProps BadgeProps {
- UNSAFE_className?: UnsafeClassName
+ UNSAFE_className?: string
UNSAFE_style?: CSSProperties
aria-describedby?: string
aria-details?: string
aria-label?: string
children: ReactNode
fillStyle?: 'bold' | 'subtle' | 'outline' = 'bold'
id?: string
overflowMode?: 'wrap' | 'truncate' = 'wrap'
size?: 'S' | 'M' | 'L' | 'XL' = 'S'
slot?: string | null
styles?: StylesProp
variant?: 'accent' | 'informative' | 'neutral' | 'positive' | 'notice' | 'negative' | 'gray' | 'red' | 'orange' | 'yellow' | 'chartreuse' | 'celery' | 'green' | 'seafoam' | 'cyan' | 'blue' | 'indigo' | 'purple' | 'fuchsia' | 'magenta' | 'pink' | 'turquoise' | 'brown' | 'cinnamon' | 'silver' = 'neutral'
}/@react-spectrum/s2:ButtonProps ButtonProps {
- UNSAFE_className?: UnsafeClassName
+ UNSAFE_className?: string
UNSAFE_style?: CSSProperties
aria-controls?: string
aria-current?: boolean | 'true' | 'false' | 'page' | 'step' | 'location' | 'date' | 'time'
aria-describedby?: string
aria-expanded?: boolean | 'true' | 'false'
aria-haspopup?: boolean | 'menu' | 'listbox' | 'tree' | 'grid' | 'dialog' | 'true' | 'false'
aria-label?: string
aria-labelledby?: string
aria-pressed?: boolean | 'true' | 'false' | 'mixed'
autoFocus?: boolean
children: ReactNode
excludeFromTabOrder?: boolean
fillStyle?: 'fill' | 'outline' = 'fill'
form?: string
formAction?: string
formEncType?: string
formMethod?: string
formNoValidate?: boolean
formTarget?: string
id?: string
isDisabled?: boolean
isPending?: boolean
name?: string
onBlur?: (FocusEvent<Target>) => void
onFocus?: (FocusEvent<Target>) => void
onFocusChange?: (boolean) => void
onKeyDown?: (KeyboardEvent) => void
onKeyUp?: (KeyboardEvent) => void
onPress?: (PressEvent) => void
onPressChange?: (boolean) => void
onPressEnd?: (PressEvent) => void
onPressStart?: (PressEvent) => void
onPressUp?: (PressEvent) => void
preventFocusOnPress?: boolean
size?: 'S' | 'M' | 'L' | 'XL' = 'M'
slot?: string | null
staticColor?: 'white' | 'black' | 'auto'
styles?: StylesProp
type?: 'button' | 'submit' | 'reset' = 'button'
value?: string
variant?: 'primary' | 'secondary' | 'accent' | 'negative' | 'premium' | 'genai' = 'primary'
}/@react-spectrum/s2:LinkButtonProps LinkButtonProps {
- UNSAFE_className?: UnsafeClassName
+ UNSAFE_className?: string
UNSAFE_style?: CSSProperties
aria-describedby?: string
aria-details?: string
aria-label?: string
autoFocus?: boolean
children: ReactNode
download?: boolean | string
fillStyle?: 'fill' | 'outline' = 'fill'
href?: Href
hrefLang?: string
isDisabled?: boolean
onBlur?: (FocusEvent<Target>) => void
onFocus?: (FocusEvent<Target>) => void
onFocusChange?: (boolean) => void
onHoverChange?: (boolean) => void
onHoverEnd?: (HoverEvent) => void
onHoverStart?: (HoverEvent) => void
onKeyDown?: (KeyboardEvent) => void
onKeyUp?: (KeyboardEvent) => void
onPress?: (PressEvent) => void
onPressChange?: (boolean) => void
onPressEnd?: (PressEvent) => void
onPressStart?: (PressEvent) => void
onPressUp?: (PressEvent) => void
ping?: string
referrerPolicy?: HTMLAttributeReferrerPolicy
rel?: string
routerOptions?: RouterOptions
size?: 'S' | 'M' | 'L' | 'XL' = 'M'
slot?: string | null
staticColor?: 'white' | 'black' | 'auto'
styles?: StylesProp
target?: HTMLAttributeAnchorTarget
variant?: 'primary' | 'secondary' | 'accent' | 'negative' | 'premium' | 'genai' = 'primary'
}/@react-spectrum/s2:ButtonGroupProps ButtonGroupProps {
- UNSAFE_className?: UnsafeClassName
+ UNSAFE_className?: string
UNSAFE_style?: CSSProperties
align?: 'start' | 'end' | 'center' = 'start'
children: ReactNode
id?: string
orientation?: 'horizontal' | 'vertical' = 'horizontal'
size?: 'S' | 'M' | 'L' | 'XL' = 'M'
slot?: string | null
styles?: StylesProp
}/@react-spectrum/s2:CardProps CardProps {
- UNSAFE_className?: UnsafeClassName
+ UNSAFE_className?: string
UNSAFE_style?: CSSProperties
children: ReactNode | (CardRenderProps) => ReactNode
density?: 'compact' | 'regular' | 'spacious' = 'regular'
download?: boolean | string
hrefLang?: string
id?: Key
isDisabled?: boolean
onAction?: () => void
ping?: string
referrerPolicy?: HTMLAttributeReferrerPolicy
rel?: string
routerOptions?: RouterOptions
size?: 'XS' | 'S' | 'M' | 'L' | 'XL' = 'M'
styles?: StylesProp
target?: HTMLAttributeAnchorTarget
textValue?: string
value?: T
variant?: 'primary' | 'secondary' | 'tertiary' | 'quiet' = 'primary'
}/@react-spectrum/s2:CardPreviewProps CardPreviewProps {
- UNSAFE_className?: UnsafeClassName
+ UNSAFE_className?: string
UNSAFE_style?: CSSProperties
children: ReactNode
id?: string
}/@react-spectrum/s2:AssetCardProps AssetCardProps {
- UNSAFE_className?: UnsafeClassName
+ UNSAFE_className?: string
UNSAFE_style?: CSSProperties
children: ReactNode | (CardRenderProps) => ReactNode
download?: boolean | string
href?: Href
id?: Key
isDisabled?: boolean
onAction?: () => void
ping?: string
referrerPolicy?: HTMLAttributeReferrerPolicy
rel?: string
routerOptions?: RouterOptions
size?: 'XS' | 'S' | 'M' | 'L' | 'XL' = 'M'
styles?: StylesProp
target?: HTMLAttributeAnchorTarget
textValue?: string
value?: T
variant?: 'primary' | 'secondary' | 'tertiary' | 'quiet' = 'primary'
}/@react-spectrum/s2:ProductCardProps ProductCardProps {
- UNSAFE_className?: UnsafeClassName
+ UNSAFE_className?: string
UNSAFE_style?: CSSProperties
children: ReactNode | (CardRenderProps) => ReactNode
download?: boolean | string
href?: Href
id?: Key
isDisabled?: boolean
onAction?: () => void
ping?: string
referrerPolicy?: HTMLAttributeReferrerPolicy
rel?: string
routerOptions?: RouterOptions
size?: 'XS' | 'S' | 'M' | 'L' | 'XL' = 'M'
styles?: StylesProp
target?: HTMLAttributeAnchorTarget
textValue?: string
value?: T
variant?: 'primary' | 'secondary' | 'tertiary'
}/@react-spectrum/s2:UserCardProps UserCardProps {
- UNSAFE_className?: UnsafeClassName
+ UNSAFE_className?: string
UNSAFE_style?: CSSProperties
children: ReactNode | (CardRenderProps) => ReactNode
download?: boolean | string
href?: Href
id?: Key
isDisabled?: boolean
onAction?: () => void
ping?: string
referrerPolicy?: HTMLAttributeReferrerPolicy
rel?: string
routerOptions?: RouterOptions
size?: 'XS' | 'S' | 'M' | 'L' | 'XL' = 'M'
styles?: StylesProp
target?: HTMLAttributeAnchorTarget
textValue?: string
value?: T
variant?: 'primary' | 'secondary' | 'tertiary'
}/@react-spectrum/s2:CardViewProps CardViewProps <T> {
- UNSAFE_className?: UnsafeClassName
+ 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>
density?: 'compact' | 'regular' | 'spacious' = 'regular'
dependencies?: ReadonlyArray<any>
disabledBehavior?: DisabledBehavior
disabledKeys?: Iterable<Key>
disallowEmptySelection?: boolean
disallowTypeAhead?: boolean = false
dragAndDropHooks?: DragAndDropHooks
escapeKeyBehavior?: 'clearSelection' | 'none' = 'clearSelection'
id?: string
items?: Iterable<T>
layout?: 'grid' | 'waterfall' = 'grid'
loadingState?: LoadingState
onAction?: (Key) => void
onLoadMore?: () => void
onScroll?: (UIEvent<Element>) => void
onSelectionChange?: (Selection) => void
renderActionBar?: ('all' | Set<Key>) => ReactElement
renderEmptyState?: (GridListRenderProps) => ReactNode
selectedKeys?: 'all' | Iterable<Key>
selectionMode?: SelectionMode
selectionStyle?: 'checkbox' | 'highlight' = 'checkbox'
- shouldSelectOnPressUp?: boolean
size?: 'XS' | 'S' | 'M' | 'L' | 'XL' = 'M'
slot?: string | null
styles?: StylesPropWithHeight
variant?: 'primary' | 'secondary' | 'tertiary' | 'quiet' = 'primary'/@react-spectrum/s2:CheckboxProps CheckboxProps {
- UNSAFE_className?: UnsafeClassName
+ UNSAFE_className?: string
UNSAFE_style?: CSSProperties
aria-controls?: string
aria-describedby?: string
aria-details?: string
aria-label?: string
aria-labelledby?: string
autoFocus?: boolean
children?: ReactNode
defaultSelected?: boolean
excludeFromTabOrder?: boolean
id?: string
inputRef?: RefObject<HTMLInputElement | null>
isDisabled?: boolean
isEmphasized?: boolean
isIndeterminate?: boolean
isInvalid?: boolean
isReadOnly?: boolean
isRequired?: boolean
isSelected?: boolean
name?: string
onBlur?: (FocusEvent<Target>) => void
onChange?: (boolean) => void
onFocus?: (FocusEvent<Target>) => void
onFocusChange?: (boolean) => void
onKeyDown?: (KeyboardEvent) => void
onKeyUp?: (KeyboardEvent) => void
size?: 'S' | 'M' | 'L' | 'XL' = 'M'
slot?: string | null
styles?: StylesProp
validate?: (boolean) => ValidationError | boolean | null | undefined
validationBehavior?: 'native' | 'aria' = 'native'
value?: string
}/@react-spectrum/s2:CheckboxGroupProps CheckboxGroupProps {
- UNSAFE_className?: UnsafeClassName
+ UNSAFE_className?: string
UNSAFE_style?: CSSProperties
aria-describedby?: string
aria-details?: string
aria-errormessage?: string
aria-labelledby?: string
children: ReactNode
contextualHelp?: ReactNode
defaultValue?: Array<string>
description?: ReactNode
errorMessage?: ReactNode | (ValidationResult) => ReactNode
id?: string
isDisabled?: boolean
isEmphasized?: boolean
isInvalid?: boolean
isReadOnly?: boolean
isRequired?: boolean
label?: ReactNode
labelAlign?: Alignment = 'start'
labelPosition?: LabelPosition = 'top'
name?: string
necessityIndicator?: NecessityIndicator = 'icon'
onBlur?: (FocusEvent<Target>) => void
onChange?: (T) => void
onFocus?: (FocusEvent<Target>) => void
onFocusChange?: (boolean) => void
orientation?: Orientation = 'vertical'
size?: 'S' | 'M' | 'L' | 'XL' = 'M'
slot?: string | null
styles?: StylesProp
validate?: (Array<string>) => ValidationError | boolean | null | undefined
validationBehavior?: 'native' | 'aria' = 'native'
value?: Array<string>
}/@react-spectrum/s2:CloseButtonProps CloseButtonProps {
- UNSAFE_className?: UnsafeClassName
+ UNSAFE_className?: string
UNSAFE_style?: CSSProperties
isDisabled?: boolean
onPress?: (PressEvent) => void
size?: 'S' | 'M' | 'L' | 'XL' = 'M'
styles?: StylesProp
}/@react-spectrum/s2:ColorAreaProps ColorAreaProps {
- UNSAFE_className?: UnsafeClassName
+ UNSAFE_className?: string
UNSAFE_style?: CSSProperties
aria-describedby?: string
aria-details?: string
aria-label?: string
colorSpace?: ColorSpace
defaultValue?: T
id?: string
isDisabled?: boolean
onChange?: (Color) => void
onChangeEnd?: (Color) => void
slot?: string | null
styles?: StylesProp
value?: T
xChannel?: ColorChannel
xName?: string
yChannel?: ColorChannel
yName?: string
}/@react-spectrum/s2:ColorFieldProps ColorFieldProps {
- UNSAFE_className?: UnsafeClassName
+ UNSAFE_className?: string
UNSAFE_style?: CSSProperties
aria-describedby?: string
aria-details?: string
aria-errormessage?: string
aria-labelledby?: string
autoFocus?: boolean
channel?: ColorChannel
colorSpace?: ColorSpace
contextualHelp?: ReactNode
defaultValue?: T
description?: ReactNode
errorMessage?: ReactNode | (ValidationResult) => ReactNode
excludeFromTabOrder?: boolean
id?: string
isDisabled?: boolean
isInvalid?: boolean
isReadOnly?: boolean
isRequired?: boolean
isWheelDisabled?: boolean
label?: ReactNode
labelAlign?: Alignment = 'start'
labelPosition?: LabelPosition = 'top'
name?: string
necessityIndicator?: NecessityIndicator = 'icon'
onBeforeInput?: FormEventHandler<HTMLInputElement>
onBlur?: (FocusEvent<Target>) => void
onChange?: (Color | null) => void
onCompositionEnd?: CompositionEventHandler<HTMLInputElement>
onCompositionStart?: CompositionEventHandler<HTMLInputElement>
onCompositionUpdate?: CompositionEventHandler<HTMLInputElement>
onCopy?: ClipboardEventHandler<HTMLInputElement>
onCut?: ClipboardEventHandler<HTMLInputElement>
onFocus?: (FocusEvent<Target>) => void
onFocusChange?: (boolean) => void
onInput?: FormEventHandler<HTMLInputElement>
onKeyDown?: (KeyboardEvent) => void
onKeyUp?: (KeyboardEvent) => void
onPaste?: ClipboardEventHandler<HTMLInputElement>
onSelect?: ReactEventHandler<HTMLInputElement>
size?: 'S' | 'M' | 'L' | 'XL' = 'M'
slot?: string | null
styles?: StylesProp
validate?: (Color | null) => ValidationError | boolean | null | undefined
validationBehavior?: 'native' | 'aria' = 'native'
value?: T
}/@react-spectrum/s2:ColorSliderProps ColorSliderProps {
- UNSAFE_className?: UnsafeClassName
+ UNSAFE_className?: string
UNSAFE_style?: CSSProperties
aria-describedby?: string
aria-details?: string
aria-label?: string
channel: ColorChannel
colorSpace?: ColorSpace
contextualHelp?: ReactNode
defaultValue?: T
id?: string
isDisabled?: boolean
label?: string
name?: string
onChange?: (Color) => void
onChangeEnd?: (Color) => void
orientation?: Orientation = 'horizontal'
slot?: string | null
styles?: StylesProp
value?: T
}/@react-spectrum/s2:ColorSwatchProps ColorSwatchProps {
- UNSAFE_className?: UnsafeClassName
+ UNSAFE_className?: string
UNSAFE_style?: CSSProperties
aria-describedby?: string
aria-details?: string
aria-label?: string
color?: string | Color
colorName?: string
id?: string
rounding?: 'default' | 'none' | 'full' = 'default'
size?: 'XS' | 'S' | 'M' | 'L' = 'M'
slot?: string | null
styles?: StylesPropWithHeight
}/@react-spectrum/s2:ColorSwatchPickerProps ColorSwatchPickerProps {
- UNSAFE_className?: UnsafeClassName
+ UNSAFE_className?: string
UNSAFE_style?: CSSProperties
children: ReactNode
defaultValue?: string | Color
density?: 'compact' | 'regular' | 'spacious' = 'regular'
rounding?: 'none' | 'default' | 'full' = 'none'
size?: 'XS' | 'S' | 'M' | 'L' = 'M'
slot?: string | null
styles?: StylesProp
value?: string | Color
}/@react-spectrum/s2:ColorWheelProps ColorWheelProps {
- UNSAFE_className?: UnsafeClassName
+ UNSAFE_className?: string
UNSAFE_style?: CSSProperties
aria-describedby?: string
aria-details?: string
aria-label?: string
defaultValue?: string | Color = 'hsl(0, 100%, 50%)'
id?: string
isDisabled?: boolean
name?: string
onChange?: (Color) => void
onChangeEnd?: (Color) => void
size?: number = 192
slot?: string | null
styles?: StylesProp
value?: T
}/@react-spectrum/s2:ComboBoxProps ComboBoxProps <T extends {}> {
- UNSAFE_className?: UnsafeClassName
+ UNSAFE_className?: string
UNSAFE_style?: CSSProperties
align?: 'start' | 'end' = 'start'
allowsCustomValue?: boolean
aria-describedby?: string
aria-details?: string
aria-label?: string
aria-labelledby?: string
autoFocus?: boolean
children: ReactNode | ({}) => ReactNode
contextualHelp?: ReactNode
defaultInputValue?: string
defaultItems?: Iterable<T>
defaultSelectedKey?: Key
description?: ReactNode
direction?: 'bottom' | 'top' = 'bottom'
disabledKeys?: Iterable<Key>
errorMessage?: ReactNode | (ValidationResult) => ReactNode
formValue?: 'text' | 'key' = 'key'
id?: string
inputValue?: string
isDisabled?: boolean
isInvalid?: boolean
isReadOnly?: boolean
isRequired?: boolean
items?: Iterable<T>
label?: ReactNode
labelAlign?: Alignment = 'start'
labelPosition?: LabelPosition = 'top'
+ loadingState?: LoadingState
menuTrigger?: MenuTriggerAction = 'input'
menuWidth?: number
name?: string
necessityIndicator?: NecessityIndicator = 'icon'
onBlur?: (FocusEvent<HTMLInputElement>) => void
onFocus?: (FocusEvent<HTMLInputElement>) => void
onFocusChange?: (boolean) => void
onInputChange?: (string) => void
onKeyDown?: (KeyboardEvent) => void
onKeyUp?: (KeyboardEvent) => void
+ onLoadMore?: () => any
onOpenChange?: (boolean, MenuTriggerAction) => void
onSelectionChange?: (Key | null) => void
selectedKey?: Key | null
shouldFlip?: boolean = true
size?: 'S' | 'M' | 'L' | 'XL' = 'M'
slot?: string | null
styles?: StylesProp
validate?: (ComboBoxValidationValue) => ValidationError | boolean | null | undefined
validationBehavior?: 'native' | 'aria' = 'native'
}/@react-spectrum/s2:ComboBoxItemProps ComboBoxItemProps {
- UNSAFE_className?: UnsafeClassName
+ UNSAFE_className?: string
UNSAFE_style?: CSSProperties
aria-label?: string
children: ReactNode
download?: boolean | string
hrefLang?: string
id?: Key
isDisabled?: boolean
onAction?: () => void
onHoverChange?: (boolean) => void
onHoverEnd?: (HoverEvent) => void
onHoverStart?: (HoverEvent) => void
ping?: string
referrerPolicy?: HTMLAttributeReferrerPolicy
rel?: string
routerOptions?: RouterOptions
styles?: StylesProp
target?: HTMLAttributeAnchorTarget
textValue?: string
value?: T
}/@react-spectrum/s2:DialogProps DialogProps {
- UNSAFE_className?: UnsafeClassName
+ UNSAFE_className?: string
UNSAFE_style?: CSSProperties
aria-describedby?: string
aria-details?: string
aria-label?: string
children?: ReactNode | (DialogRenderProps) => ReactNode
id?: string
isDismissible?: boolean
isKeyboardDismissDisabled?: boolean
role?: 'dialog' | 'alertdialog' = 'dialog'
size?: 'S' | 'M' | 'L' = 'M'
slot?: string | null
styles?: StylesProp
}/@react-spectrum/s2:CustomDialogProps CustomDialogProps {
- UNSAFE_className?: UnsafeClassName
+ UNSAFE_className?: string
UNSAFE_style?: CSSProperties
aria-describedby?: string
aria-details?: string
aria-label?: string
children?: ReactNode | (DialogRenderProps) => ReactNode
id?: string
isDismissible?: boolean
isKeyboardDismissDisabled?: boolean
padding?: 'default' | 'none' = 'default'
role?: 'dialog' | 'alertdialog' = 'dialog'
size?: 'S' | 'M' | 'L' | 'fullscreen' | 'fullscreenTakeover'
slot?: string | null
styles?: StylesProp
}/@react-spectrum/s2:FullscreenDialogProps FullscreenDialogProps {
- UNSAFE_className?: UnsafeClassName
+ UNSAFE_className?: string
UNSAFE_style?: CSSProperties
aria-describedby?: string
aria-details?: string
aria-label?: string
children?: ReactNode | (DialogRenderProps) => ReactNode
id?: string
isKeyboardDismissDisabled?: boolean
role?: 'dialog' | 'alertdialog' = 'dialog'
slot?: string | null
styles?: StylesProp
variant?: 'fullscreen' | 'fullscreenTakeover' = "fullscreen"
}/@react-spectrum/s2:DisclosureProps DisclosureProps {
- UNSAFE_className?: UnsafeClassName
+ UNSAFE_className?: string
UNSAFE_style?: CSSProperties
children: ReactNode
defaultExpanded?: boolean
density?: 'compact' | 'regular' | 'spacious' = 'regular'
isDisabled?: boolean
isExpanded?: boolean
isQuiet?: boolean
onExpandedChange?: (boolean) => void
size?: 'S' | 'M' | 'L' | 'XL' = 'M'
slot?: string | null
styles?: StylesProp
}/@react-spectrum/s2:DisclosurePanelProps DisclosurePanelProps {
- UNSAFE_className?: UnsafeClassName
+ UNSAFE_className?: string
UNSAFE_style?: CSSProperties
aria-describedby?: string
aria-details?: string
aria-label?: string
children: React.ReactNode
id?: string
role?: 'group' | 'region' = 'group'
}/@react-spectrum/s2:DividerProps DividerProps {
- UNSAFE_className?: UnsafeClassName
+ UNSAFE_className?: string
UNSAFE_style?: CSSProperties
aria-describedby?: string
aria-details?: string
aria-label?: string
id?: string
orientation?: 'horizontal' | 'vertical' = 'horizontal'
size?: 'S' | 'M' | 'L' = 'M'
slot?: string | null
staticColor?: 'white' | 'black' | 'auto'
styles?: StylesProp
}/@react-spectrum/s2:DropZoneProps DropZoneProps {
- UNSAFE_className?: UnsafeClassName
+ UNSAFE_className?: string
UNSAFE_style?: CSSProperties
aria-describedby?: string
aria-details?: string
aria-label?: string
children: ReactNode
getDropOperation?: (DragTypes, Array<DropOperation>) => DropOperation
id?: string
isFilled?: boolean
onDrop?: (DropEvent) => void
onDropEnter?: (DropEnterEvent) => void
onDropExit?: (DropExitEvent) => void
onDropMove?: (DropMoveEvent) => void
replaceMessage?: string
size?: 'S' | 'M' | 'L' = 'M'
slot?: string | null
styles?: StylesPropWithHeight
}/@react-spectrum/s2:FormProps FormProps {
- UNSAFE_className?: UnsafeClassName
+ UNSAFE_className?: string
UNSAFE_style?: CSSProperties
action?: string | FormHTMLAttributes<HTMLFormElement>['action']
aria-describedby?: string
aria-details?: string
aria-labelledby?: string
autoCapitalize?: 'off' | 'none' | 'on' | 'sentences' | 'words' | 'characters'
autoComplete?: 'off' | 'on'
children: ReactNode
encType?: 'application/x-www-form-urlencoded' | 'multipart/form-data' | 'text/plain'
id?: string
isDisabled?: boolean
isEmphasized?: boolean
isRequired?: boolean
labelAlign?: Alignment = 'start'
labelPosition?: LabelPosition = 'top'
method?: 'get' | 'post' | 'dialog'
necessityIndicator?: NecessityIndicator = 'icon'
onInvalid?: (FormEvent<HTMLFormElement>) => void
onReset?: (FormEvent<HTMLFormElement>) => void
onSubmit?: (FormEvent<HTMLFormElement>) => void
role?: 'search' | 'presentation'
size?: 'S' | 'M' | 'L' | 'XL' = 'M'
styles?: StylesProp
target?: '_blank' | '_self' | '_parent' | '_top'
validationBehavior?: 'aria' | 'native' = 'native'
validationErrors?: ValidationErrors
}/@react-spectrum/s2:IconProps IconProps {
- UNSAFE_className?: UnsafeClassName
+ UNSAFE_className?: string
UNSAFE_style?: CSSProperties
aria-describedby?: string
aria-details?: string
aria-hidden?: boolean | 'false' | 'true'
aria-labelledby?: string
id?: string
slot?: string | null
}/@react-spectrum/s2:IconContextValue IconContextValue {
- UNSAFE_className?: UnsafeClassName
+ UNSAFE_className?: string
UNSAFE_style?: CSSProperties
render?: (ReactNode) => ReactNode
slot?: string | null
styles?: StyleString/@react-spectrum/s2:InlineAlertProps InlineAlertProps {
- UNSAFE_className?: UnsafeClassName
+ UNSAFE_className?: string
UNSAFE_style?: CSSProperties
autoFocus?: boolean
children: ReactNode
fillStyle?: 'border' | 'subtleFill' | 'boldFill' = border
slot?: string | null
styles?: StylesProp
variant?: 'informative' | 'positive' | 'notice' | 'negative' | 'neutral' = neutral
}/@react-spectrum/s2:ImageProps ImageProps {
- UNSAFE_className?: UnsafeClassName
+ UNSAFE_className?: string
UNSAFE_style?: CSSProperties
alt?: string
crossOrigin?: 'anonymous' | 'use-credentials'
decoding?: 'async' | 'auto' | 'sync'
group?: ImageGroup
loading?: 'eager' | 'lazy'
referrerPolicy?: HTMLAttributeReferrerPolicy
renderError?: () => ReactNode
slot?: string | null
src?: string
styles?: StyleString
}/@react-spectrum/s2:LinkProps LinkProps {
- UNSAFE_className?: UnsafeClassName
+ UNSAFE_className?: string
UNSAFE_style?: CSSProperties
aria-describedby?: string
aria-details?: string
aria-label?: string
autoFocus?: boolean
children: ReactNode
download?: boolean | string
href?: Href
hrefLang?: string
isQuiet?: boolean
isStandalone?: boolean
onBlur?: (FocusEvent<Target>) => void
onFocus?: (FocusEvent<Target>) => void
onFocusChange?: (boolean) => void
onKeyDown?: (KeyboardEvent) => void
onKeyUp?: (KeyboardEvent) => void
onPress?: (PressEvent) => void
onPressChange?: (boolean) => void
onPressEnd?: (PressEvent) => void
onPressStart?: (PressEvent) => void
onPressUp?: (PressEvent) => void
ping?: string
referrerPolicy?: HTMLAttributeReferrerPolicy
rel?: string
routerOptions?: RouterOptions
slot?: string | null
staticColor?: 'white' | 'black' | 'auto'
styles?: StylesProp
target?: HTMLAttributeAnchorTarget
variant?: 'primary' | 'secondary' = 'primary'
}/@react-spectrum/s2:MenuProps MenuProps <T> {
- UNSAFE_className?: UnsafeClassName
+ UNSAFE_className?: string
UNSAFE_style?: CSSProperties
aria-describedby?: string
aria-details?: string
aria-label?: string
autoFocus?: boolean | FocusStrategy
children: ReactNode | (T) => ReactNode
defaultSelectedKeys?: 'all' | Iterable<Key>
disabledKeys?: Iterable<Key>
disallowEmptySelection?: boolean
escapeKeyBehavior?: 'clearSelection' | 'none' = 'clearSelection'
hideLinkOutIcon?: boolean
id?: string
items?: Iterable<T>
onAction?: (Key) => void
onClose?: () => void
onScroll?: (UIEvent<Element>) => void
onSelectionChange?: (Selection) => void
selectedKeys?: 'all' | Iterable<Key>
selectionMode?: SelectionMode
shouldFocusWrap?: boolean
size?: 'S' | 'M' | 'L' | 'XL' = 'M'
slot?: string | null
styles?: StylesProp
}/@react-spectrum/s2:MenuItemProps MenuItemProps {
- UNSAFE_className?: UnsafeClassName
+ UNSAFE_className?: string
UNSAFE_style?: CSSProperties
aria-label?: string
children: ReactNode
download?: boolean | string
hrefLang?: string
id?: Key
isDisabled?: boolean
onAction?: () => void
onHoverChange?: (boolean) => void
onHoverEnd?: (HoverEvent) => void
onHoverStart?: (HoverEvent) => void
ping?: string
referrerPolicy?: HTMLAttributeReferrerPolicy
rel?: string
routerOptions?: RouterOptions
styles?: StylesProp
target?: HTMLAttributeAnchorTarget
textValue?: string
value?: T
}/@react-spectrum/s2:MeterProps MeterProps {
- UNSAFE_className?: UnsafeClassName
+ UNSAFE_className?: string
UNSAFE_style?: CSSProperties
aria-describedby?: string
aria-details?: string
aria-label?: string
formatOptions?: Intl.NumberFormatOptions = {style: 'percent'}
id?: string
label?: ReactNode
labelPosition?: LabelPosition = 'top'
maxValue?: number = 100
minValue?: number = 0
size?: 'S' | 'M' | 'L' | 'XL' = 'M'
slot?: string | null
staticColor?: 'white' | 'black' | 'auto'
styles?: StylesProp
value?: number = 0
valueLabel?: ReactNode
variant?: 'informative' | 'positive' | 'notice' | 'negative' = 'informative'
}/@react-spectrum/s2:NotificationBadgeProps NotificationBadgeProps {
- UNSAFE_className?: UnsafeClassName
+ UNSAFE_className?: string
UNSAFE_style?: CSSProperties
aria-describedby?: string
aria-details?: string
aria-label?: string
id?: string
size?: 'S' | 'M' | 'L' | 'XL' = 'S'
slot?: string | null
styles?: StylesProp
value?: number | null
}/@react-spectrum/s2:PickerProps PickerProps <T extends {}> {
- UNSAFE_className?: UnsafeClassName
+ UNSAFE_className?: string
UNSAFE_style?: CSSProperties
align?: 'start' | 'end' = 'start'
aria-describedby?: string
aria-details?: string
aria-label?: string
aria-labelledby?: string
autoComplete?: string
autoFocus?: boolean
children: ReactNode | ({}) => ReactNode
contextualHelp?: ReactNode
defaultOpen?: boolean
defaultSelectedKey?: Key
description?: ReactNode
direction?: 'bottom' | 'top' = 'bottom'
disabledKeys?: Iterable<Key>
errorMessage?: ReactNode | (ValidationResult) => ReactNode
excludeFromTabOrder?: boolean
id?: string
isDisabled?: boolean
isInvalid?: boolean
+ isLoading?: boolean
isOpen?: boolean
isRequired?: boolean
items?: Iterable<T>
label?: ReactNode
labelAlign?: Alignment = 'start'
labelPosition?: LabelPosition = 'top'
menuWidth?: number
name?: string
necessityIndicator?: NecessityIndicator = 'icon'
onBlur?: (FocusEvent<Target>) => void
onFocus?: (FocusEvent<Target>) => void
onFocusChange?: (boolean) => void
onKeyDown?: (KeyboardEvent) => void
onKeyUp?: (KeyboardEvent) => void
+ onLoadMore?: () => any
onOpenChange?: (boolean) => void
onSelectionChange?: (Key) => void
- placeholder?: string = 'Select an item' (localized)
+ placeholder?: string
selectedKey?: Key | null
shouldFlip?: boolean = true
size?: 'S' | 'M' | 'L' | 'XL' = 'M'
slot?: string | null
validate?: (Key) => ValidationError | boolean | null | undefined
validationBehavior?: 'native' | 'aria' = 'native'
}/@react-spectrum/s2:PickerItemProps PickerItemProps {
- UNSAFE_className?: UnsafeClassName
+ UNSAFE_className?: string
UNSAFE_style?: CSSProperties
aria-label?: string
children: ReactNode
download?: boolean | string
hrefLang?: string
id?: Key
isDisabled?: boolean
onAction?: () => void
onHoverChange?: (boolean) => void
onHoverEnd?: (HoverEvent) => void
onHoverStart?: (HoverEvent) => void
ping?: string
referrerPolicy?: HTMLAttributeReferrerPolicy
rel?: string
routerOptions?: RouterOptions
styles?: StylesProp
target?: HTMLAttributeAnchorTarget
textValue?: string
value?: T
}/@react-spectrum/s2:PopoverProps PopoverProps {
- UNSAFE_className?: UnsafeClassName
+ UNSAFE_className?: string
UNSAFE_style?: CSSProperties
aria-describedby?: string
aria-details?: string
aria-label?: string
boundaryElement?: Element = document.body
children?: ReactNode | ((PopoverRenderProps & {
defaultChildren: ReactNode | undefined
})) => ReactNode
className?: string | ((PopoverRenderProps & {
defaultClassName: string | undefined
})) => string
containerPadding?: number = 12
crossOffset?: number = 0
defaultOpen?: boolean
hideArrow?: boolean = false
isEntering?: boolean
isExiting?: boolean
isOpen?: boolean
maxHeight?: number
offset?: number = 8
onOpenChange?: (boolean) => void
placement?: Placement = 'bottom'
scrollRef?: RefObject<Element | null> = overlayRef
shouldFlip?: boolean = true
size?: 'S' | 'M' | 'L'
slot?: string | null
style?: CSSProperties | ((PopoverRenderProps & {
defaultStyle: CSSProperties
})) => CSSProperties | undefined
styles?: StyleString
trigger?: string
triggerRef?: RefObject<Element | null>
}/@react-spectrum/s2:ProgressBarProps ProgressBarProps {
- UNSAFE_className?: UnsafeClassName
+ UNSAFE_className?: string
UNSAFE_style?: CSSProperties
aria-describedby?: string
aria-details?: string
aria-label?: string
formatOptions?: Intl.NumberFormatOptions = {style: 'percent'}
id?: string
isIndeterminate?: boolean
label?: ReactNode
labelPosition?: LabelPosition = 'top'
maxValue?: number = 100
minValue?: number = 0
size?: 'S' | 'M' | 'L' | 'XL' = 'M'
slot?: string | null
staticColor?: 'white' | 'black' | 'auto'
styles?: StylesProp
value?: number = 0
valueLabel?: ReactNode
}/@react-spectrum/s2:ProgressCircleProps ProgressCircleProps {
- UNSAFE_className?: UnsafeClassName
+ UNSAFE_className?: string
UNSAFE_style?: CSSProperties
aria-describedby?: string
aria-details?: string
aria-label?: string
id?: string
isIndeterminate?: boolean
maxValue?: number = 100
minValue?: number = 0
size?: 'S' | 'M' | 'L' = 'M'
slot?: string | null
staticColor?: 'black' | 'white' | 'auto'
styles?: StylesPropWithHeight
value?: number = 0
}/@react-spectrum/s2:ProviderProps ProviderProps {
- UNSAFE_className?: UnsafeClassName
+ UNSAFE_className?: string
UNSAFE_style?: CSSProperties
background?: 'base' | 'layer-1' | 'layer-2'
children: ReactNode
colorScheme?: ColorScheme
locale?: string = 'en-US'
router?: Router
styles?: StyleString
}/@react-spectrum/s2:RadioProps RadioProps {
- UNSAFE_className?: UnsafeClassName
+ UNSAFE_className?: string
UNSAFE_style?: CSSProperties
aria-describedby?: string
aria-details?: string
aria-label?: string
autoFocus?: boolean
children?: ReactNode
id?: string
inputRef?: RefObject<HTMLInputElement | null>
isDisabled?: boolean
onBlur?: (FocusEvent<Target>) => void
onFocus?: (FocusEvent<Target>) => void
onFocusChange?: (boolean) => void
onKeyDown?: (KeyboardEvent) => void
onKeyUp?: (KeyboardEvent) => void
slot?: string | null
styles?: StylesProp
value: string
}/@react-spectrum/s2:RadioGroupProps RadioGroupProps {
- UNSAFE_className?: UnsafeClassName
+ UNSAFE_className?: string
UNSAFE_style?: CSSProperties
aria-describedby?: string
aria-details?: string
aria-errormessage?: string
aria-labelledby?: string
children: ReactNode
contextualHelp?: ReactNode
defaultValue?: string | null
description?: ReactNode
errorMessage?: ReactNode | (ValidationResult) => ReactNode
id?: string
isDisabled?: boolean
isEmphasized?: boolean
isInvalid?: boolean
isReadOnly?: boolean
isRequired?: boolean
label?: ReactNode
labelAlign?: Alignment = 'start'
labelPosition?: LabelPosition = 'top'
name?: string
necessityIndicator?: NecessityIndicator = 'icon'
onBlur?: (FocusEvent<Target>) => void
onChange?: (string) => void
onFocus?: (FocusEvent<Target>) => void
onFocusChange?: (boolean) => void
orientation?: Orientation = 'vertical'
size?: 'S' | 'M' | 'L' | 'XL' = 'M'
slot?: string | null
styles?: StylesProp
validate?: (string | null) => ValidationError | boolean | null | undefined
validationBehavior?: 'native' | 'aria' = 'native'
value?: string | null
}/@react-spectrum/s2:SearchFieldProps SearchFieldProps {
- UNSAFE_className?: UnsafeClassName
+ UNSAFE_className?: string
UNSAFE_style?: CSSProperties
aria-activedescendant?: string
aria-autocomplete?: 'none' | 'inline' | 'list' | 'both'
aria-controls?: string
aria-details?: string
aria-errormessage?: string
aria-haspopup?: boolean | 'false' | 'true' | 'menu' | 'listbox' | 'tree' | 'grid' | 'dialog'
aria-label?: string
aria-labelledby?: string
autoComplete?: string
autoCorrect?: string
autoFocus?: boolean
contextualHelp?: ReactNode
defaultValue?: string
description?: ReactNode
enterKeyHint?: 'enter' | 'done' | 'go' | 'next' | 'previous' | 'search' | 'send'
errorMessage?: ReactNode | (ValidationResult) => ReactNode
excludeFromTabOrder?: boolean
id?: string
inputMode?: 'none' | 'text' | 'tel' | 'url' | 'email' | 'numeric' | 'decimal' | 'search'
isDisabled?: boolean
isInvalid?: boolean
isReadOnly?: boolean
isRequired?: boolean
label?: ReactNode
labelAlign?: Alignment = 'start'
labelPosition?: LabelPosition = 'top'
maxLength?: number
minLength?: number
name?: string
necessityIndicator?: NecessityIndicator = 'icon'
onBeforeInput?: FormEventHandler<HTMLInputElement>
onBlur?: (FocusEvent<T>) => void
onChange?: (T) => void
onClear?: () => void
onCompositionEnd?: CompositionEventHandler<HTMLInputElement>
onCompositionStart?: CompositionEventHandler<HTMLInputElement>
onCompositionUpdate?: CompositionEventHandler<HTMLInputElement>
onCopy?: ClipboardEventHandler<HTMLInputElement>
onCut?: ClipboardEventHandler<HTMLInputElement>
onFocus?: (FocusEvent<T>) => void
onFocusChange?: (boolean) => void
onInput?: FormEventHandler<HTMLInputElement>
onKeyDown?: (KeyboardEvent) => void
onKeyUp?: (KeyboardEvent) => void
onPaste?: ClipboardEventHandler<HTMLInputElement>
onSelect?: ReactEventHandler<HTMLInputElement>
onSubmit?: (string) => void
pattern?: string
size?: 'S' | 'M' | 'L' | 'XL' = 'M'
slot?: string | null
spellCheck?: string
styles?: StylesProp
type?: 'text' | 'search' | 'url' | 'tel' | 'email' | 'password' | (string & {
})
validate?: (string) => ValidationError | boolean | null | undefined
validationBehavior?: 'native' | 'aria' = 'native'
value?: string
}/@react-spectrum/s2:SegmentedControlProps SegmentedControlProps {
- UNSAFE_className?: UnsafeClassName
+ UNSAFE_className?: string
UNSAFE_style?: CSSProperties
aria-describedby?: string
aria-details?: string
aria-label?: string
children: ReactNode
defaultSelectedKey?: Key
isDisabled?: boolean
isJustified?: boolean
onSelectionChange?: (Key) => void
selectedKey?: Key | null
slot?: string | null
styles?: StylesProp
}/@react-spectrum/s2:SegmentedControlItemProps SegmentedControlItemProps {
- UNSAFE_className?: UnsafeClassName
+ UNSAFE_className?: string
UNSAFE_style?: CSSProperties
aria-describedby?: string
aria-details?: string
aria-label?: string
children: ReactNode
id: Key
isDisabled?: boolean
styles?: StylesProp
}/@react-spectrum/s2:SliderProps SliderProps {
- UNSAFE_className?: UnsafeClassName
+ UNSAFE_className?: string
UNSAFE_style?: CSSProperties
aria-describedby?: string
aria-details?: string
aria-label?: string
contextualHelp?: ReactNode
defaultValue?: T
fillOffset?: number
formatOptions?: Intl.NumberFormatOptions
id?: string
isDisabled?: boolean
isEmphasized?: boolean
label?: ReactNode
labelAlign?: Alignment = 'start'
labelPosition?: LabelPosition = 'top'
maxValue?: number = 100
minValue?: number = 0
name?: string
onChange?: (T) => void
onChangeEnd?: (T) => void
size?: 'S' | 'M' | 'L' | 'XL' = 'M'
slot?: string | null
step?: number = 1
styles?: StylesProp
thumbStyle?: 'default' | 'precise' = 'default'
trackStyle?: 'thin' | 'thick' = 'thin'
value?: T
}/@react-spectrum/s2:RangeSliderProps RangeSliderProps {
- UNSAFE_className?: UnsafeClassName
+ UNSAFE_className?: string
UNSAFE_style?: CSSProperties
aria-describedby?: string
aria-details?: string
aria-label?: string
contextualHelp?: ReactNode
defaultValue?: T
endName?: string
formatOptions?: Intl.NumberFormatOptions
id?: string
isDisabled?: boolean
isEmphasized?: boolean
label?: ReactNode
labelAlign?: Alignment = 'start'
labelPosition?: LabelPosition = 'top'
maxValue?: number = 100
minValue?: number = 0
onChange?: (T) => void
onChangeEnd?: (T) => void
size?: 'S' | 'M' | 'L' | 'XL' = 'M'
slot?: string | null
startName?: string
step?: number = 1
styles?: StylesProp
thumbStyle?: 'default' | 'precise' = 'default'
trackStyle?: 'thin' | 'thick' = 'thin'
value?: T
}/@react-spectrum/s2:StatusLightProps StatusLightProps {
- UNSAFE_className?: UnsafeClassName
+ UNSAFE_className?: string
UNSAFE_style?: CSSProperties
aria-describedby?: string
aria-details?: string
aria-label?: string
children?: ReactNode
id?: string
role?: 'status'
size?: 'S' | 'M' | 'L' | 'XL' = 'M'
slot?: string | null
styles?: StylesProp
variant: 'informative' | 'neutral' | 'positive' | 'notice' | 'negative' | 'celery' | 'chartreuse' | 'cyan' | 'fuchsia' | 'purple' | 'magenta' | 'indigo' | 'seafoam' | 'yellow' | 'pink' | 'turquoise' | 'cinnamon' | 'brown' | 'silver'
}/@react-spectrum/s2:SwitchProps SwitchProps {
- UNSAFE_className?: UnsafeClassName
+ UNSAFE_className?: string
UNSAFE_style?: CSSProperties
aria-controls?: string
aria-describedby?: string
aria-details?: string
aria-labelledby?: string
autoFocus?: boolean
children?: ReactNode
defaultSelected?: boolean
excludeFromTabOrder?: boolean
id?: string
inputRef?: RefObject<HTMLInputElement | null>
isDisabled?: boolean
isEmphasized?: boolean
isReadOnly?: boolean
isSelected?: boolean
name?: string
onBlur?: (FocusEvent<Target>) => void
onChange?: (boolean) => void
onFocus?: (FocusEvent<Target>) => void
onFocusChange?: (boolean) => void
onKeyDown?: (KeyboardEvent) => void
onKeyUp?: (KeyboardEvent) => void
size?: 'S' | 'M' | 'L' | 'XL' = 'M'
slot?: string | null
styles?: StylesProp
value?: string
}/@react-spectrum/s2:TableViewProps TableViewProps {
- UNSAFE_className?: UnsafeClassName
+ UNSAFE_className?: string
UNSAFE_style?: CSSProperties
aria-describedby?: string
aria-details?: string
aria-label?: string
aria-labelledby?: string
children?: ReactNode
defaultSelectedKeys?: 'all' | Iterable<Key>
density?: 'compact' | 'spacious' | 'regular' = 'regular'
disabledKeys?: Iterable<Key>
disallowEmptySelection?: boolean
escapeKeyBehavior?: 'clearSelection' | 'none' = 'clearSelection'
isQuiet?: boolean
loadingState?: LoadingState
onAction?: (Key) => void
onLoadMore?: () => any
onResize?: (Map<Key, ColumnSize>) => void
onResizeEnd?: (Map<Key, ColumnSize>) => void
onResizeStart?: (Map<Key, ColumnSize>) => void
onSelectionChange?: (Selection) => void
onSortChange?: (SortDescriptor) => any
overflowMode?: 'wrap' | 'truncate' = 'truncate'
renderActionBar?: ('all' | Set<Key>) => ReactElement
selectedKeys?: 'all' | Iterable<Key>
selectionMode?: SelectionMode
- shouldSelectOnPressUp?: boolean
slot?: string | null
sortDescriptor?: SortDescriptor
styles?: StylesPropWithHeight
}/@react-spectrum/s2:ColumnProps ColumnProps {
- UNSTABLE_menuItems?: ReactNode
align?: 'start' | 'center' | 'end' = 'start'
allowsResizing?: boolean
allowsSorting?: boolean
children: ReactNode
defaultClassName: string | undefined
})) => string
defaultWidth?: ColumnSize | null
id?: Key
isRowHeader?: boolean
maxWidth?: ColumnStaticSize | null
minWidth?: ColumnStaticSize | null
showDivider?: boolean
style?: CSSProperties | ((ColumnRenderProps & {
defaultStyle: CSSProperties
})) => CSSProperties | undefined
textValue?: string
width?: ColumnSize | null
}/@react-spectrum/s2:TabsProps TabsProps {
- UNSAFE_className?: UnsafeClassName
+ UNSAFE_className?: string
UNSAFE_style?: CSSProperties
aria-describedby?: string
aria-details?: string
aria-label?: string
children: ReactNode
defaultSelectedKey?: Key
density?: 'compact' | 'regular' = 'regular'
disabledKeys?: Iterable<Key>
id?: string
isDisabled?: boolean
keyboardActivation?: 'automatic' | 'manual' = 'automatic'
labelBehavior?: 'show' | 'hide' = 'show'
onSelectionChange?: (Key) => void
orientation?: Orientation = 'horizontal'
selectedKey?: Key | null
slot?: string | null
styles?: StylesPropWithHeight
}/@react-spectrum/s2:TabProps TabProps {
- UNSAFE_className?: UnsafeClassName
+ UNSAFE_className?: string
UNSAFE_style?: CSSProperties
aria-describedby?: string
aria-details?: string
aria-label?: string
children: ReactNode
download?: boolean | string
href?: Href
hrefLang?: string
id?: Key
isDisabled?: boolean
onHoverChange?: (boolean) => void
onHoverEnd?: (HoverEvent) => void
onHoverStart?: (HoverEvent) => void
ping?: string
referrerPolicy?: HTMLAttributeReferrerPolicy
rel?: string
routerOptions?: RouterOptions
styles?: StylesProp
target?: HTMLAttributeAnchorTarget
}/@react-spectrum/s2:TabListProps TabListProps <T> {
- UNSAFE_className?: UnsafeClassName
+ UNSAFE_className?: string
UNSAFE_style?: CSSProperties
aria-describedby?: string
aria-details?: string
children: ReactNode | (T) => ReactNode
items?: Iterable<T>
styles?: StylesProp
}/@react-spectrum/s2:TabPanelProps TabPanelProps {
- UNSAFE_className?: UnsafeClassName
+ UNSAFE_className?: string
UNSAFE_style?: CSSProperties
aria-describedby?: string
aria-details?: string
aria-label?: string
children: ReactNode
id?: string
shouldForceMount?: boolean = false
styles?: StylesPropWithHeight
}/@react-spectrum/s2:TagGroupProps TagGroupProps <T> {
- UNSAFE_className?: UnsafeClassName
+ UNSAFE_className?: string
UNSAFE_style?: CSSProperties
aria-describedby?: string
aria-details?: string
aria-label?: string
aria-labelledby?: string
children?: ReactNode | (T) => ReactNode
contextualHelp?: ReactNode
defaultSelectedKeys?: 'all' | Iterable<Key>
description?: ReactNode
disabledKeys?: Iterable<Key>
disallowEmptySelection?: boolean
errorMessage?: ReactNode
groupActionLabel?: string
id?: string
isEmphasized?: boolean
isInvalid?: boolean
items?: Iterable<T>
label?: ReactNode
labelAlign?: Alignment = 'start'
labelPosition?: LabelPosition = 'top'
maxRows?: number
onGroupAction?: () => void
onRemove?: (Set<Key>) => void
onSelectionChange?: (Selection) => void
renderEmptyState?: () => ReactNode
selectedKeys?: 'all' | Iterable<Key>
selectionBehavior?: SelectionBehavior
selectionMode?: SelectionMode
- shouldSelectOnPressUp?: boolean
size?: 'S' | 'M' | 'L' = 'M'
slot?: string | null
styles?: StylesProp
}/@react-spectrum/s2:TextFieldProps TextFieldProps {
- UNSAFE_className?: UnsafeClassName
+ UNSAFE_className?: string
UNSAFE_style?: CSSProperties
aria-activedescendant?: string
aria-autocomplete?: 'none' | 'inline' | 'list' | 'both'
aria-controls?: string
aria-details?: string
aria-errormessage?: string
aria-haspopup?: boolean | 'false' | 'true' | 'menu' | 'listbox' | 'tree' | 'grid' | 'dialog'
aria-label?: string
aria-labelledby?: string
autoComplete?: string
autoCorrect?: string
autoFocus?: boolean
contextualHelp?: ReactNode
defaultValue?: string
description?: ReactNode
enterKeyHint?: 'enter' | 'done' | 'go' | 'next' | 'previous' | 'search' | 'send'
errorMessage?: ReactNode | (ValidationResult) => ReactNode
excludeFromTabOrder?: boolean
id?: string
inputMode?: 'none' | 'text' | 'tel' | 'url' | 'email' | 'numeric' | 'decimal' | 'search'
isDisabled?: boolean
isInvalid?: boolean
isReadOnly?: boolean
isRequired?: boolean
label?: ReactNode
labelAlign?: Alignment = 'start'
labelPosition?: LabelPosition = 'top'
maxLength?: number
minLength?: number
name?: string
necessityIndicator?: NecessityIndicator = 'icon'
onBeforeInput?: FormEventHandler<HTMLInputElement>
onBlur?: (FocusEvent<T>) => void
onChange?: (T) => void
onCompositionEnd?: CompositionEventHandler<HTMLInputElement>
onCompositionStart?: CompositionEventHandler<HTMLInputElement>
onCompositionUpdate?: CompositionEventHandler<HTMLInputElement>
onCopy?: ClipboardEventHandler<HTMLInputElement>
onCut?: ClipboardEventHandler<HTMLInputElement>
onFocus?: (FocusEvent<T>) => void
onFocusChange?: (boolean) => void
onInput?: FormEventHandler<HTMLInputElement>
onKeyDown?: (KeyboardEvent) => void
onKeyUp?: (KeyboardEvent) => void
onPaste?: ClipboardEventHandler<HTMLInputElement>
onSelect?: ReactEventHandler<HTMLInputElement>
pattern?: string
size?: 'S' | 'M' | 'L' | 'XL' = 'M'
slot?: string | null
spellCheck?: string
styles?: StylesProp
type?: 'text' | 'search' | 'url' | 'tel' | 'email' | 'password' | (string & {
})
validate?: (string) => ValidationError | boolean | null | undefined
validationBehavior?: 'native' | 'aria' = 'native'
value?: string
}/@react-spectrum/s2:TextAreaProps TextAreaProps {
- UNSAFE_className?: UnsafeClassName
+ UNSAFE_className?: string
UNSAFE_style?: CSSProperties
aria-activedescendant?: string
aria-autocomplete?: 'none' | 'inline' | 'list' | 'both'
aria-controls?: string
aria-details?: string
aria-errormessage?: string
aria-haspopup?: boolean | 'false' | 'true' | 'menu' | 'listbox' | 'tree' | 'grid' | 'dialog'
aria-label?: string
aria-labelledby?: string
autoComplete?: string
autoCorrect?: string
autoFocus?: boolean
contextualHelp?: ReactNode
defaultValue?: string
description?: ReactNode
enterKeyHint?: 'enter' | 'done' | 'go' | 'next' | 'previous' | 'search' | 'send'
errorMessage?: ReactNode | (ValidationResult) => ReactNode
excludeFromTabOrder?: boolean
id?: string
inputMode?: 'none' | 'text' | 'tel' | 'url' | 'email' | 'numeric' | 'decimal' | 'search'
isDisabled?: boolean
isInvalid?: boolean
isReadOnly?: boolean
isRequired?: boolean
label?: ReactNode
labelAlign?: Alignment = 'start'
labelPosition?: LabelPosition = 'top'
maxLength?: number
minLength?: number
name?: string
necessityIndicator?: NecessityIndicator = 'icon'
onBeforeInput?: FormEventHandler<HTMLInputElement>
onBlur?: (FocusEvent<T>) => void
onChange?: (T) => void
onCompositionEnd?: CompositionEventHandler<HTMLInputElement>
onCompositionStart?: CompositionEventHandler<HTMLInputElement>
onCompositionUpdate?: CompositionEventHandler<HTMLInputElement>
onCopy?: ClipboardEventHandler<HTMLInputElement>
onCut?: ClipboardEventHandler<HTMLInputElement>
onFocus?: (FocusEvent<T>) => void
onFocusChange?: (boolean) => void
onInput?: FormEventHandler<HTMLInputElement>
onKeyDown?: (KeyboardEvent) => void
onKeyUp?: (KeyboardEvent) => void
onPaste?: ClipboardEventHandler<HTMLInputElement>
onSelect?: ReactEventHandler<HTMLInputElement>
size?: 'S' | 'M' | 'L' | 'XL' = 'M'
slot?: string | null
spellCheck?: string
styles?: StylesProp
validate?: (string) => ValidationError | boolean | null | undefined
validationBehavior?: 'native' | 'aria' = 'native'
value?: string
}/@react-spectrum/s2:ToastOptions-ToastOptions {
- actionLabel?: string
- id?: string
- onAction?: () => void
- onClose?: () => void
- shouldCloseOnAction?: boolean
- timeout?: number
-}/@react-spectrum/s2:ToastContainerProps-ToastContainerProps {
- aria-describedby?: string
- aria-details?: string
- aria-label?: string = "Notifications"
- aria-labelledby?: string
- className?: string | ((ToastRegionRenderProps<T> & {
- defaultClassName: string | undefined
-})) => string
- placement?: ToastPlacement = "bottom"
- style?: CSSProperties | ((ToastRegionRenderProps<T> & {
- defaultStyle: CSSProperties
-})) => CSSProperties | undefined
-}/@react-spectrum/s2:ToggleButtonProps ToggleButtonProps {
- UNSAFE_className?: UnsafeClassName
+ UNSAFE_className?: string
UNSAFE_style?: CSSProperties
aria-controls?: string
aria-describedby?: string
aria-details?: string
aria-haspopup?: boolean | 'menu' | 'listbox' | 'tree' | 'grid' | 'dialog' | 'true' | 'false'
aria-label?: string
aria-labelledby?: string
aria-pressed?: boolean | 'true' | 'false' | 'mixed'
autoFocus?: boolean
children: ReactNode
defaultSelected?: boolean
excludeFromTabOrder?: boolean
id?: Key
isDisabled?: boolean
isEmphasized?: boolean
isQuiet?: boolean
isSelected?: boolean
onBlur?: (FocusEvent<Target>) => void
onChange?: (boolean) => void
onFocus?: (FocusEvent<Target>) => void
onFocusChange?: (boolean) => void
onKeyDown?: (KeyboardEvent) => void
onKeyUp?: (KeyboardEvent) => void
onPress?: (PressEvent) => void
onPressChange?: (boolean) => void
onPressEnd?: (PressEvent) => void
onPressStart?: (PressEvent) => void
onPressUp?: (PressEvent) => void
preventFocusOnPress?: boolean
size?: 'XS' | 'S' | 'M' | 'L' | 'XL' = 'M'
slot?: string | null
staticColor?: 'black' | 'white' | 'auto'
styles?: StylesProp
type?: 'button' | 'submit' | 'reset' = 'button'
}/@react-spectrum/s2:ToggleButtonGroupProps ToggleButtonGroupProps {
- UNSAFE_className?: UnsafeClassName
+ UNSAFE_className?: string
UNSAFE_style?: CSSProperties
aria-describedby?: string
aria-details?: string
aria-label?: string
children: ReactNode
defaultSelectedKeys?: Iterable<Key>
density?: 'compact' | 'regular' = "regular"
disallowEmptySelection?: boolean
isDisabled?: boolean
isEmphasized?: boolean
isJustified?: boolean
isQuiet?: boolean
onSelectionChange?: (Set<Key>) => void
orientation?: 'horizontal' | 'vertical' = 'horizontal'
selectedKeys?: Iterable<Key>
selectionMode?: 'single' | 'multiple'
size?: 'XS' | 'S' | 'M' | 'L' | 'XL' = "M"
slot?: string | null
staticColor?: 'white' | 'black' | 'auto'
styles?: StylesPropWithHeight
}/@react-spectrum/s2:TooltipProps TooltipProps {
- UNSAFE_className?: UnsafeClassName
+ UNSAFE_className?: string
UNSAFE_style?: CSSProperties
aria-describedby?: string
aria-details?: string
aria-label?: string
children: ReactNode
}/@react-spectrum/s2:TreeViewProps TreeViewProps {
- UNSAFE_className?: UnsafeClassName
+ 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
defaultExpandedKeys?: Iterable<Key>
defaultSelectedKeys?: 'all' | Iterable<Key>
dependencies?: ReadonlyArray<any>
disabledBehavior?: DisabledBehavior = 'all'
disabledKeys?: Iterable<Key>
disallowEmptySelection?: boolean
escapeKeyBehavior?: 'clearSelection' | 'none' = 'clearSelection'
expandedKeys?: Iterable<Key>
id?: string
isDetached?: boolean
isEmphasized?: boolean
items?: Iterable<T>
onAction?: (Key) => void
onExpandedChange?: (Set<Key>) => any
onSelectionChange?: (Selection) => void
renderEmptyState?: (TreeEmptyStateRenderProps) => ReactNode
selectedKeys?: 'all' | Iterable<Key>
selectionMode?: SelectionMode
- shouldSelectOnPressUp?: boolean
slot?: string | null
styles?: StylesPropWithHeight
}/@react-spectrum/s2:AutocompleteContext+AutocompleteContext {
+ UNTYPED
+}/@react-spectrum/s2:AutocompleteStateContext+AutocompleteStateContext {
+ UNTYPED
+}@react-spectrum/table/@react-spectrum/table:TableView TableView <T extends {}> {
UNSAFE_className?: string
UNSAFE_style?: CSSProperties
alignSelf?: Responsive<'auto' | 'normal' | 'start' | 'end' | 'center' | 'flex-start' | 'flex-end' | 'self-start' | 'self-end' | 'stretch'>
aria-describedby?: string
aria-details?: string
aria-label?: string
aria-labelledby?: string
bottom?: Responsive<DimensionValue>
children: [ReactElement<TableHeaderProps<{}>>, ReactElement<TableBodyProps<{}>>]
defaultSelectedKeys?: 'all' | Iterable<Key>
density?: 'compact' | 'regular' | 'spacious' = 'regular'
disabledBehavior?: DisabledBehavior = "selection"
disabledKeys?: Iterable<Key>
disallowEmptySelection?: boolean
dragAndDropHooks?: DragAndDropHooks['dragAndDropHooks']
end?: Responsive<DimensionValue>
escapeKeyBehavior?: 'clearSelection' | 'none' = 'clearSelection'
flex?: Responsive<string | number | boolean>
flexBasis?: Responsive<number | string>
flexGrow?: Responsive<number>
flexShrink?: Responsive<number>
gridArea?: Responsive<string>
gridColumn?: Responsive<string>
gridColumnEnd?: Responsive<string>
gridColumnStart?: Responsive<string>
gridRow?: Responsive<string>
gridRowEnd?: Responsive<string>
gridRowStart?: Responsive<string>
height?: Responsive<DimensionValue>
id?: string
isHidden?: Responsive<boolean>
isQuiet?: boolean
justifySelf?: Responsive<'auto' | 'normal' | 'start' | 'end' | 'flex-start' | 'flex-end' | 'self-start' | 'self-end' | 'center' | 'left' | 'right' | 'stretch'>
left?: Responsive<DimensionValue>
margin?: Responsive<DimensionValue>
marginBottom?: Responsive<DimensionValue>
marginEnd?: Responsive<DimensionValue>
marginStart?: Responsive<DimensionValue>
marginTop?: Responsive<DimensionValue>
marginX?: Responsive<DimensionValue>
marginY?: Responsive<DimensionValue>
maxHeight?: Responsive<DimensionValue>
maxWidth?: Responsive<DimensionValue>
minHeight?: Responsive<DimensionValue>
minWidth?: Responsive<DimensionValue>
onAction?: (Key) => void
onResize?: (Map<Key, ColumnSize>) => void
onResizeEnd?: (Map<Key, ColumnSize>) => void
onResizeStart?: (Map<Key, ColumnSize>) => void
onSelectionChange?: (Selection) => void
onSortChange?: (SortDescriptor) => any
order?: Responsive<number>
overflowMode?: 'wrap' | 'truncate' = 'truncate'
position?: Responsive<'static' | 'relative' | 'absolute' | 'fixed' | 'sticky'>
renderEmptyState?: () => JSX.Element
right?: Responsive<DimensionValue>
selectedKeys?: 'all' | Iterable<Key>
selectionMode?: SelectionMode
selectionStyle?: 'checkbox' | 'highlight'
- shouldSelectOnPressUp?: boolean
sortDescriptor?: SortDescriptor
start?: Responsive<DimensionValue>
top?: Responsive<DimensionValue>
width?: Responsive<DimensionValue>
}/@react-spectrum/table:SpectrumTableProps SpectrumTableProps <T> {
UNSAFE_className?: string
UNSAFE_style?: CSSProperties
alignSelf?: Responsive<'auto' | 'normal' | 'start' | 'end' | 'center' | 'flex-start' | 'flex-end' | 'self-start' | 'self-end' | 'stretch'>
aria-describedby?: string
aria-details?: string
aria-label?: string
aria-labelledby?: string
bottom?: Responsive<DimensionValue>
children: [ReactElement<TableHeaderProps<T>>, ReactElement<TableBodyProps<T>>]
defaultSelectedKeys?: 'all' | Iterable<Key>
density?: 'compact' | 'regular' | 'spacious' = 'regular'
disabledBehavior?: DisabledBehavior = "selection"
disabledKeys?: Iterable<Key>
disallowEmptySelection?: boolean
dragAndDropHooks?: DragAndDropHooks['dragAndDropHooks']
end?: Responsive<DimensionValue>
escapeKeyBehavior?: 'clearSelection' | 'none' = 'clearSelection'
flex?: Responsive<string | number | boolean>
flexBasis?: Responsive<number | string>
flexGrow?: Responsive<number>
flexShrink?: Responsive<number>
gridArea?: Responsive<string>
gridColumn?: Responsive<string>
gridColumnEnd?: Responsive<string>
gridColumnStart?: Responsive<string>
gridRow?: Responsive<string>
gridRowEnd?: Responsive<string>
gridRowStart?: Responsive<string>
height?: Responsive<DimensionValue>
id?: string
isHidden?: Responsive<boolean>
isQuiet?: boolean
justifySelf?: Responsive<'auto' | 'normal' | 'start' | 'end' | 'flex-start' | 'flex-end' | 'self-start' | 'self-end' | 'center' | 'left' | 'right' | 'stretch'>
left?: Responsive<DimensionValue>
margin?: Responsive<DimensionValue>
marginBottom?: Responsive<DimensionValue>
marginEnd?: Responsive<DimensionValue>
marginStart?: Responsive<DimensionValue>
marginTop?: Responsive<DimensionValue>
marginX?: Responsive<DimensionValue>
marginY?: Responsive<DimensionValue>
maxHeight?: Responsive<DimensionValue>
maxWidth?: Responsive<DimensionValue>
minHeight?: Responsive<DimensionValue>
minWidth?: Responsive<DimensionValue>
onAction?: (Key) => void
onResize?: (Map<Key, ColumnSize>) => void
onResizeEnd?: (Map<Key, ColumnSize>) => void
onResizeStart?: (Map<Key, ColumnSize>) => void
onSelectionChange?: (Selection) => void
onSortChange?: (SortDescriptor) => any
order?: Responsive<number>
overflowMode?: 'wrap' | 'truncate' = 'truncate'
position?: Responsive<'static' | 'relative' | 'absolute' | 'fixed' | 'sticky'>
renderEmptyState?: () => JSX.Element
right?: Responsive<DimensionValue>
selectedKeys?: 'all' | Iterable<Key>
selectionMode?: SelectionMode
selectionStyle?: 'checkbox' | 'highlight'
- shouldSelectOnPressUp?: boolean
sortDescriptor?: SortDescriptor
start?: Responsive<DimensionValue>
top?: Responsive<DimensionValue>
width?: Responsive<DimensionValue>
}@react-spectrum/tag/@react-spectrum/tag:TagGroup TagGroup <T extends {}> {
UNSAFE_className?: string
UNSAFE_style?: CSSProperties
actionLabel?: string
alignSelf?: Responsive<'auto' | 'normal' | 'start' | 'end' | 'center' | 'flex-start' | 'flex-end' | 'self-start' | 'self-end' | 'stretch'>
aria-describedby?: string
aria-details?: string
aria-label?: string
aria-labelledby?: string
bottom?: Responsive<DimensionValue>
children: CollectionChildren<T>
contextualHelp?: ReactNode
description?: ReactNode
end?: Responsive<DimensionValue>
errorMessage?: ReactNode
flex?: Responsive<string | number | boolean>
flexBasis?: Responsive<number | string>
flexGrow?: Responsive<number>
flexShrink?: Responsive<number>
gridArea?: Responsive<string>
gridColumn?: Responsive<string>
gridColumnEnd?: Responsive<string>
gridColumnStart?: Responsive<string>
gridRow?: Responsive<string>
gridRowEnd?: Responsive<string>
gridRowStart?: Responsive<string>
height?: Responsive<DimensionValue>
id?: string
isHidden?: Responsive<boolean>
isInvalid?: boolean
items?: Iterable<T>
justifySelf?: Responsive<'auto' | 'normal' | 'start' | 'end' | 'flex-start' | 'flex-end' | 'self-start' | 'self-end' | 'center' | 'left' | 'right' | 'stretch'>
label?: ReactNode
labelAlign?: Alignment = 'start'
labelPosition?: LabelPosition = 'top'
left?: Responsive<DimensionValue>
margin?: Responsive<DimensionValue>
marginBottom?: Responsive<DimensionValue>
marginEnd?: Responsive<DimensionValue>
marginStart?: Responsive<DimensionValue>
marginTop?: Responsive<DimensionValue>
marginX?: Responsive<DimensionValue>
marginY?: Responsive<DimensionValue>
maxHeight?: Responsive<DimensionValue>
maxRows?: number
maxWidth?: Responsive<DimensionValue>
minHeight?: Responsive<DimensionValue>
minWidth?: Responsive<DimensionValue>
onAction?: () => void
onRemove?: (Set<Key>) => void
order?: Responsive<number>
position?: Responsive<'static' | 'relative' | 'absolute' | 'fixed' | 'sticky'>
renderEmptyState?: () => JSX.Element
right?: Responsive<DimensionValue>
- shouldSelectOnPressUp?: boolean
start?: Responsive<DimensionValue>
top?: Responsive<DimensionValue>
width?: Responsive<DimensionValue>
zIndex?: Responsive<number>/@react-spectrum/tag:SpectrumTagGroupProps SpectrumTagGroupProps <T> {
UNSAFE_className?: string
UNSAFE_style?: CSSProperties
actionLabel?: string
alignSelf?: Responsive<'auto' | 'normal' | 'start' | 'end' | 'center' | 'flex-start' | 'flex-end' | 'self-start' | 'self-end' | 'stretch'>
aria-describedby?: string
aria-details?: string
aria-label?: string
aria-labelledby?: string
bottom?: Responsive<DimensionValue>
children: CollectionChildren<T>
contextualHelp?: ReactNode
description?: ReactNode
end?: Responsive<DimensionValue>
errorMessage?: ReactNode
flex?: Responsive<string | number | boolean>
flexBasis?: Responsive<number | string>
flexGrow?: Responsive<number>
flexShrink?: Responsive<number>
gridArea?: Responsive<string>
gridColumn?: Responsive<string>
gridColumnEnd?: Responsive<string>
gridColumnStart?: Responsive<string>
gridRow?: Responsive<string>
gridRowEnd?: Responsive<string>
gridRowStart?: Responsive<string>
height?: Responsive<DimensionValue>
id?: string
isHidden?: Responsive<boolean>
isInvalid?: boolean
items?: Iterable<T>
justifySelf?: Responsive<'auto' | 'normal' | 'start' | 'end' | 'flex-start' | 'flex-end' | 'self-start' | 'self-end' | 'center' | 'left' | 'right' | 'stretch'>
label?: ReactNode
labelAlign?: Alignment = 'start'
labelPosition?: LabelPosition = 'top'
left?: Responsive<DimensionValue>
margin?: Responsive<DimensionValue>
marginBottom?: Responsive<DimensionValue>
marginEnd?: Responsive<DimensionValue>
marginStart?: Responsive<DimensionValue>
marginTop?: Responsive<DimensionValue>
marginX?: Responsive<DimensionValue>
marginY?: Responsive<DimensionValue>
maxHeight?: Responsive<DimensionValue>
maxRows?: number
maxWidth?: Responsive<DimensionValue>
minHeight?: Responsive<DimensionValue>
minWidth?: Responsive<DimensionValue>
onAction?: () => void
onRemove?: (Set<Key>) => void
order?: Responsive<number>
position?: Responsive<'static' | 'relative' | 'absolute' | 'fixed' | 'sticky'>
renderEmptyState?: () => JSX.Element
right?: Responsive<DimensionValue>
- shouldSelectOnPressUp?: boolean
start?: Responsive<DimensionValue>
top?: Responsive<DimensionValue>
width?: Responsive<DimensionValue>
zIndex?: Responsive<number>@react-spectrum/tree/@react-spectrum/tree:TreeView TreeView <T extends {}> {
UNSAFE_className?: string
UNSAFE_style?: CSSProperties
alignSelf?: Responsive<'auto' | 'normal' | 'start' | 'end' | 'center' | 'flex-start' | 'flex-end' | 'self-start' | 'self-end' | 'stretch'>
aria-describedby?: string
aria-details?: string
aria-label?: string
aria-labelledby?: string
autoFocus?: boolean | FocusStrategy
bottom?: Responsive<DimensionValue>
children?: ReactNode | ({}) => ReactNode
defaultExpandedKeys?: Iterable<Key>
defaultSelectedKeys?: 'all' | Iterable<Key>
disabledBehavior?: DisabledBehavior
disabledKeys?: Iterable<Key>
disallowEmptySelection?: boolean
end?: Responsive<DimensionValue>
escapeKeyBehavior?: 'clearSelection' | 'none' = 'clearSelection'
expandedKeys?: Iterable<Key>
flex?: Responsive<string | number | boolean>
flexBasis?: Responsive<number | string>
flexGrow?: Responsive<number>
flexShrink?: Responsive<number>
gridArea?: Responsive<string>
gridColumn?: Responsive<string>
gridColumnEnd?: Responsive<string>
gridColumnStart?: Responsive<string>
gridRow?: Responsive<string>
gridRowEnd?: Responsive<string>
gridRowStart?: Responsive<string>
height?: Responsive<DimensionValue>
id?: string
isHidden?: Responsive<boolean>
items?: Iterable<T>
justifySelf?: Responsive<'auto' | 'normal' | 'start' | 'end' | 'flex-start' | 'flex-end' | 'self-start' | 'self-end' | 'center' | 'left' | 'right' | 'stretch'>
left?: Responsive<DimensionValue>
margin?: Responsive<DimensionValue>
marginBottom?: Responsive<DimensionValue>
marginEnd?: Responsive<DimensionValue>
marginStart?: Responsive<DimensionValue>
marginTop?: Responsive<DimensionValue>
marginX?: Responsive<DimensionValue>
marginY?: Responsive<DimensionValue>
maxHeight?: Responsive<DimensionValue>
maxWidth?: Responsive<DimensionValue>
minHeight?: Responsive<DimensionValue>
minWidth?: Responsive<DimensionValue>
onAction?: (Key) => void
onExpandedChange?: (Set<Key>) => any
onSelectionChange?: (Selection) => void
order?: Responsive<number>
position?: Responsive<'static' | 'relative' | 'absolute' | 'fixed' | 'sticky'>
renderEmptyState?: () => JSX.Element
right?: Responsive<DimensionValue>
selectedKeys?: 'all' | Iterable<Key>
selectionMode?: SelectionMode
selectionStyle?: 'checkbox' | 'highlight'
- shouldSelectOnPressUp?: boolean
start?: Responsive<DimensionValue>
top?: Responsive<DimensionValue>
width?: Responsive<DimensionValue>
zIndex?: Responsive<number>/@react-spectrum/tree:SpectrumTreeViewProps SpectrumTreeViewProps <T> {
UNSAFE_className?: string
UNSAFE_style?: CSSProperties
alignSelf?: Responsive<'auto' | 'normal' | 'start' | 'end' | 'center' | 'flex-start' | 'flex-end' | 'self-start' | 'self-end' | 'stretch'>
aria-describedby?: string
aria-details?: string
aria-label?: string
aria-labelledby?: string
autoFocus?: boolean | FocusStrategy
bottom?: Responsive<DimensionValue>
children?: ReactNode | (T) => ReactNode
defaultExpandedKeys?: Iterable<Key>
defaultSelectedKeys?: 'all' | Iterable<Key>
disabledBehavior?: DisabledBehavior
disabledKeys?: Iterable<Key>
disallowEmptySelection?: boolean
end?: Responsive<DimensionValue>
escapeKeyBehavior?: 'clearSelection' | 'none' = 'clearSelection'
expandedKeys?: Iterable<Key>
flex?: Responsive<string | number | boolean>
flexBasis?: Responsive<number | string>
flexGrow?: Responsive<number>
flexShrink?: Responsive<number>
gridArea?: Responsive<string>
gridColumn?: Responsive<string>
gridColumnEnd?: Responsive<string>
gridColumnStart?: Responsive<string>
gridRow?: Responsive<string>
gridRowEnd?: Responsive<string>
gridRowStart?: Responsive<string>
height?: Responsive<DimensionValue>
id?: string
isHidden?: Responsive<boolean>
items?: Iterable<T>
justifySelf?: Responsive<'auto' | 'normal' | 'start' | 'end' | 'flex-start' | 'flex-end' | 'self-start' | 'self-end' | 'center' | 'left' | 'right' | 'stretch'>
left?: Responsive<DimensionValue>
margin?: Responsive<DimensionValue>
marginBottom?: Responsive<DimensionValue>
marginEnd?: Responsive<DimensionValue>
marginStart?: Responsive<DimensionValue>
marginTop?: Responsive<DimensionValue>
marginX?: Responsive<DimensionValue>
marginY?: Responsive<DimensionValue>
maxHeight?: Responsive<DimensionValue>
maxWidth?: Responsive<DimensionValue>
minHeight?: Responsive<DimensionValue>
minWidth?: Responsive<DimensionValue>
onAction?: (Key) => void
onExpandedChange?: (Set<Key>) => any
onSelectionChange?: (Selection) => void
order?: Responsive<number>
position?: Responsive<'static' | 'relative' | 'absolute' | 'fixed' | 'sticky'>
renderEmptyState?: () => JSX.Element
right?: Responsive<DimensionValue>
selectedKeys?: 'all' | Iterable<Key>
selectionMode?: SelectionMode
selectionStyle?: 'checkbox' | 'highlight'
- shouldSelectOnPressUp?: boolean
start?: Responsive<DimensionValue>
top?: Responsive<DimensionValue>
width?: Responsive<DimensionValue>
zIndex?: Responsive<number>@react-stately/layout/@react-stately/layout:GridLayout GridLayout <O extends GridLayoutOptions = GridLayoutOptions, T> {
getContentSize: () => Size
getDropTargetFromPoint: (number, number, (DropTarget) => boolean) => DropTarget
getDropTargetLayoutInfo: (ItemDropTarget) => LayoutInfo
- getLayoutInfo: (Key) => LayoutInfo | null
+ getLayoutInfo: (Key) => LayoutInfo
getVisibleLayoutInfos: (Rect) => Array<LayoutInfo>
shouldInvalidate: (Rect, Rect) => boolean
shouldInvalidateLayoutOptions: (GridLayoutOptions, GridLayoutOptions) => boolean
update: (InvalidationContext<GridLayoutOptions>) => void
virtualizer: Virtualizer<{}, any> | null
}@react-stately/toast/@react-stately/toast:ToastQueue ToastQueue <T> {
add: (T, ToastOptions) => string
- clear: () => void
close: (string) => void
constructor: (ToastStateProps) => void
pauseAll: () => void
resumeAll: () => void
- subscribe: (() => void) => () => void
+ subscribe: (() => void) => () => boolean
visibleToasts: Array<QueuedToast<T>>
}/@react-stately/toast:ToastStateProps ToastStateProps {
maxVisibleToasts?: number
- wrapUpdate?: (() => void, ToastAction) => void
+ wrapUpdate?: (() => void) => void
} |
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.
Closes
✅ Pull Request Checklist:
📝 Test Instructions:
Test S2 Combobox/Picker async loading stories and make sure it works as expected (aka infinite scrolling). Also test the RAC equivalents as well as S2 CardView/Table/other components that already had async loading support.
🧢 Your Project:
RSP