wip: S2 combobox picker virtualizer #8110
Draft
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
yihuiliao
commented
Apr 17, 2025
| ); | ||
| } | ||
|
|
||
| const Separator = /*#__PURE__*/ createLeafComponent('separator', function Separator(props: SeparatorProps & {size?: 'S' | 'M' | 'L' | 'XL'}, ref: ForwardedRef<HTMLElement>) { |
There was a problem hiding this comment.
it does feel a little overkill to import separator separately but it's at least a pretty simple component ...i can probably simplify the code since this isn't being used anywhere else except for picker + combobox. given that it's not interactive and just a visual thing, i don't think it has any accessibility requirements.
otherwise, i experimented a little bit with adding a bottom border which would work i think? i would need to play around with the linear-gradient so that the visible border aligns with the item text and it'd require some additional targeting of first-child/last-child but i think it should be possible. that said, not sure if it's worth the time figuring this out if this current solution works
| ':is(:last-child > &)': 'none', | ||
| default: 'flex' | ||
| }, | ||
| // marginX: { |
There was a problem hiding this comment.
if anyone knows why edgeToText isn't working, let me know...
## API Changes
react-aria-components/react-aria-components:useRenderProps-useRenderProps <T> {
- props: RenderPropsHookOptions<T>
- returnVal: undefined
-}/react-aria-components:RenderProps-RenderProps <T> {
- children?: ReactNode | ((T & {
- defaultChildren: ReactNode | undefined
-})) => ReactNode
- className?: string | ((T & {
- defaultClassName: string | undefined
-})) => string
- style?: CSSProperties | ((T & {
- defaultStyle: CSSProperties
-})) => CSSProperties | undefined
-}/react-aria-components:StyleRenderProps-StyleRenderProps <T> {
- className?: string | ((T & {
- defaultClassName: string | undefined
-})) => string
- style?: CSSProperties | ((T & {
- defaultStyle: CSSProperties
-})) => CSSProperties | undefined
-}@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
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-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'
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
onOpenChange?: (boolean, MenuTriggerAction) => void
onSelectionChange?: (Key | null) => void
selectedKey?: Key | null
shouldFlip?: boolean = true
shouldFocusWrap?: boolean
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-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
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
onOpenChange?: (boolean) => void
onSelectionChange?: (Key) => void
placeholder?: string = 'Select an item' (localized)
selectedKey?: Key | null
shouldFlip?: boolean = true
size?: 'S' | 'M' | 'L' | 'XL' = 'M'
slot?: string | null
styles?: StylesProp
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
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: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
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: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
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
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-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'
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
onOpenChange?: (boolean, MenuTriggerAction) => void
onSelectionChange?: (Key | null) => void
selectedKey?: Key | null
shouldFlip?: boolean = true
shouldFocusWrap?: boolean
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-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
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
onOpenChange?: (boolean) => void
onSelectionChange?: (Key) => void
placeholder?: string = 'Select an item' (localized)
selectedKey?: Key | null
shouldFlip?: boolean = true
size?: 'S' | 'M' | 'L' | 'XL' = 'M'
slot?: string | null
styles?: StylesProp
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
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: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
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: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
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
} |
yihuiliao
commented
Apr 18, 2025
| ); | ||
| } | ||
|
|
||
| export const ManyItems: Story = { |
There was a problem hiding this comment.
i noticed that the picker's popover is pretty slow to open once it's clicked. not an issue when it's just opened by keyboard tho. i haven't looked into it too much but if anyone might have leads that would be appreciated
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:
🧢 Your Project: