refactor: Make it a TypeScript error to pass style macro to UNSAFE_className #8109
Conversation
This file contains hidden or 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
## API Changes
@react-spectrum/s2/@react-spectrum/s2:Accordion Accordion {
- UNSAFE_className?: string
+ UNSAFE_className?: UnsafeClassName
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?: string
+ UNSAFE_className?: UnsafeClassName
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?: string
+ UNSAFE_className?: UnsafeClassName
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?: string
+ UNSAFE_className?: UnsafeClassName
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?: string
+ UNSAFE_className?: UnsafeClassName
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?: string
+ UNSAFE_className?: UnsafeClassName
UNSAFE_style?: CSSProperties
alt?: string
id?: string
isOverBackground?: boolean
}) = 24
slot?: string | null
src?: string
styles?: StylesPropWithoutWidth
}/@react-spectrum/s2:AvatarGroup AvatarGroup {
- UNSAFE_className?: string
+ UNSAFE_className?: UnsafeClassName
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?: string
+ UNSAFE_className?: UnsafeClassName
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?: string
+ UNSAFE_className?: UnsafeClassName
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?: string
+ UNSAFE_className?: UnsafeClassName
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?: string
+ UNSAFE_className?: UnsafeClassName
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?: string
+ UNSAFE_className?: UnsafeClassName
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?: string
+ UNSAFE_className?: UnsafeClassName
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?: string
+ UNSAFE_className?: UnsafeClassName
UNSAFE_style?: CSSProperties
children: ReactNode
id?: string
}/@react-spectrum/s2:CollectionCardPreview CollectionCardPreview {
- UNSAFE_className?: string
+ UNSAFE_className?: UnsafeClassName
UNSAFE_style?: CSSProperties
children: ReactNode
id?: string
}/@react-spectrum/s2:AssetCard AssetCard {
- UNSAFE_className?: string
+ UNSAFE_className?: UnsafeClassName
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?: string
+ UNSAFE_className?: UnsafeClassName
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?: string
+ UNSAFE_className?: UnsafeClassName
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?: string
+ UNSAFE_className?: UnsafeClassName
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?: string
+ UNSAFE_className?: UnsafeClassName
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?: string
+ UNSAFE_className?: UnsafeClassName
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?: string
+ UNSAFE_className?: UnsafeClassName
UNSAFE_style?: CSSProperties
isDisabled?: boolean
onPress?: (PressEvent) => void
size?: 'S' | 'M' | 'L' | 'XL' = 'M'
styles?: StylesProp
}/@react-spectrum/s2:ColorArea ColorArea {
- UNSAFE_className?: string
+ UNSAFE_className?: UnsafeClassName
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?: string
+ UNSAFE_className?: UnsafeClassName
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?: string
+ UNSAFE_className?: UnsafeClassName
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?: string
+ UNSAFE_className?: UnsafeClassName
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?: string
+ UNSAFE_className?: UnsafeClassName
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?: string
+ UNSAFE_className?: UnsafeClassName
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?: string
+ UNSAFE_className?: UnsafeClassName
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?: string
+ UNSAFE_className?: UnsafeClassName
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?: string
+ UNSAFE_className?: UnsafeClassName
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?: string
+ UNSAFE_className?: UnsafeClassName
UNSAFE_style?: CSSProperties
children: React.ReactNode
id?: string
}/@react-spectrum/s2:Disclosure Disclosure {
- UNSAFE_className?: string
+ UNSAFE_className?: UnsafeClassName
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?: string
+ UNSAFE_className?: UnsafeClassName
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?: string
+ UNSAFE_className?: UnsafeClassName
UNSAFE_style?: CSSProperties
children: React.ReactNode
id?: string
level?: number = 3/@react-spectrum/s2:Heading Heading {
- UNSAFE_className?: string
+ UNSAFE_className?: UnsafeClassName
UNSAFE_style?: CSSProperties
children: ReactNode
id?: string
isHidden?: boolean
slot?: string | null
styles?: StyleString
}/@react-spectrum/s2:Header Header {
- UNSAFE_className?: string
+ UNSAFE_className?: UnsafeClassName
UNSAFE_style?: CSSProperties
children: ReactNode
id?: string
isHidden?: boolean
styles?: StyleString
}/@react-spectrum/s2:Content Content {
- UNSAFE_className?: string
+ UNSAFE_className?: UnsafeClassName
UNSAFE_style?: CSSProperties
children: ReactNode
id?: string
isHidden?: boolean
styles?: StyleString
}/@react-spectrum/s2:Footer Footer {
- UNSAFE_className?: string
+ UNSAFE_className?: UnsafeClassName
UNSAFE_style?: CSSProperties
children: ReactNode
id?: string
isHidden?: boolean
styles?: StyleString
}/@react-spectrum/s2:Text Text {
- UNSAFE_className?: string
+ UNSAFE_className?: UnsafeClassName
UNSAFE_style?: CSSProperties
children: ReactNode
id?: string
isHidden?: boolean
styles?: StyleString
}/@react-spectrum/s2:Keyboard Keyboard {
- UNSAFE_className?: string
+ UNSAFE_className?: UnsafeClassName
UNSAFE_style?: CSSProperties
children: ReactNode
id?: string
isHidden?: boolean
styles?: StyleString
}/@react-spectrum/s2:Dialog Dialog {
- UNSAFE_className?: string
+ UNSAFE_className?: UnsafeClassName
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?: string
+ UNSAFE_className?: UnsafeClassName
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?: string
+ UNSAFE_className?: UnsafeClassName
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?: string
+ UNSAFE_className?: UnsafeClassName
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?: string
+ UNSAFE_className?: UnsafeClassName
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?: string
+ UNSAFE_className?: UnsafeClassName
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?: string
+ UNSAFE_className?: UnsafeClassName
UNSAFE_style?: CSSProperties
children: ReactNode
id?: string
orientation?: 'horizontal' | 'vertical' = 'vertical'
styles?: StylesPropWithHeight
}/@react-spectrum/s2:InlineAlert InlineAlert {
- UNSAFE_className?: string
+ UNSAFE_className?: UnsafeClassName
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?: string
+ UNSAFE_className?: UnsafeClassName
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?: string
+ UNSAFE_className?: UnsafeClassName
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?: string
+ UNSAFE_className?: UnsafeClassName
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?: string
+ UNSAFE_className?: UnsafeClassName
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?: string
+ UNSAFE_className?: UnsafeClassName
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?: string
+ UNSAFE_className?: UnsafeClassName
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?: string
+ UNSAFE_className?: UnsafeClassName
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?: string
+ UNSAFE_className?: UnsafeClassName
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?: string
+ UNSAFE_className?: UnsafeClassName
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?: string
+ UNSAFE_className?: UnsafeClassName
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?: string
+ UNSAFE_className?: UnsafeClassName
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?: string
+ UNSAFE_className?: UnsafeClassName
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?: string
+ UNSAFE_className?: UnsafeClassName
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?: string
+ UNSAFE_className?: UnsafeClassName
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?: string
+ UNSAFE_className?: UnsafeClassName
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?: string
+ UNSAFE_className?: UnsafeClassName
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?: string
+ UNSAFE_className?: UnsafeClassName
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?: string
+ UNSAFE_className?: UnsafeClassName
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?: string
+ UNSAFE_className?: UnsafeClassName
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?: string
+ UNSAFE_className?: UnsafeClassName
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?: string
+ UNSAFE_className?: UnsafeClassName
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?: string
+ UNSAFE_className?: UnsafeClassName
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?: string
+ UNSAFE_className?: UnsafeClassName
UNSAFE_style?: CSSProperties
aria-describedby?: string
aria-details?: string
children: ReactNode | ({}) => ReactNode
items?: Iterable<T>
styles?: StylesProp
}/@react-spectrum/s2:Tab Tab {
- UNSAFE_className?: string
+ UNSAFE_className?: UnsafeClassName
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?: string
+ UNSAFE_className?: UnsafeClassName
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?: string
+ UNSAFE_className?: UnsafeClassName
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?: string
+ UNSAFE_className?: UnsafeClassName
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?: string
+ UNSAFE_className?: UnsafeClassName
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?: string
+ UNSAFE_className?: UnsafeClassName
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?: string
+ UNSAFE_className?: UnsafeClassName
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?: string
+ UNSAFE_className?: UnsafeClassName
UNSAFE_style?: CSSProperties
aria-describedby?: string
aria-details?: string
aria-label?: string
children: ReactNode
}/@react-spectrum/s2:TreeView TreeView {
- UNSAFE_className?: string
+ UNSAFE_className?: UnsafeClassName
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?: string
+ UNSAFE_className?: UnsafeClassName
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?: string
+ UNSAFE_className?: UnsafeClassName
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?: string
+ UNSAFE_className?: UnsafeClassName
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?: string
+ UNSAFE_className?: UnsafeClassName
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?: string
+ UNSAFE_className?: UnsafeClassName
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?: string
+ UNSAFE_className?: UnsafeClassName
UNSAFE_style?: CSSProperties
alt?: string
id?: string
isOverBackground?: boolean
}) = 24
slot?: string | null
src?: string
styles?: StylesPropWithoutWidth
}/@react-spectrum/s2:AvatarGroupProps AvatarGroupProps {
- UNSAFE_className?: string
+ UNSAFE_className?: UnsafeClassName
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?: string
+ UNSAFE_className?: UnsafeClassName
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?: string
+ UNSAFE_className?: UnsafeClassName
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?: string
+ UNSAFE_className?: UnsafeClassName
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?: string
+ UNSAFE_className?: UnsafeClassName
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?: string
+ UNSAFE_className?: UnsafeClassName
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?: string
+ UNSAFE_className?: UnsafeClassName
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?: string
+ UNSAFE_className?: UnsafeClassName
UNSAFE_style?: CSSProperties
children: ReactNode
id?: string
}/@react-spectrum/s2:AssetCardProps AssetCardProps {
- UNSAFE_className?: string
+ UNSAFE_className?: UnsafeClassName
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?: string
+ UNSAFE_className?: UnsafeClassName
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?: string
+ UNSAFE_className?: UnsafeClassName
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?: string
+ UNSAFE_className?: UnsafeClassName
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?: string
+ UNSAFE_className?: UnsafeClassName
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?: string
+ UNSAFE_className?: UnsafeClassName
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?: string
+ UNSAFE_className?: UnsafeClassName
UNSAFE_style?: CSSProperties
isDisabled?: boolean
onPress?: (PressEvent) => void
size?: 'S' | 'M' | 'L' | 'XL' = 'M'
styles?: StylesProp
}/@react-spectrum/s2:ColorAreaProps ColorAreaProps {
- UNSAFE_className?: string
+ UNSAFE_className?: UnsafeClassName
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?: string
+ UNSAFE_className?: UnsafeClassName
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?: string
+ UNSAFE_className?: UnsafeClassName
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?: string
+ UNSAFE_className?: UnsafeClassName
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?: string
+ UNSAFE_className?: UnsafeClassName
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?: string
+ UNSAFE_className?: UnsafeClassName
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?: string
+ UNSAFE_className?: UnsafeClassName
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?: string
+ UNSAFE_className?: UnsafeClassName
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?: string
+ UNSAFE_className?: UnsafeClassName
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?: string
+ UNSAFE_className?: UnsafeClassName
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?: string
+ UNSAFE_className?: UnsafeClassName
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?: string
+ UNSAFE_className?: UnsafeClassName
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?: string
+ UNSAFE_className?: UnsafeClassName
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?: string
+ UNSAFE_className?: UnsafeClassName
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?: string
+ UNSAFE_className?: UnsafeClassName
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?: string
+ UNSAFE_className?: UnsafeClassName
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?: string
+ UNSAFE_className?: UnsafeClassName
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?: string
+ UNSAFE_className?: UnsafeClassName
UNSAFE_style?: CSSProperties
render?: (ReactNode) => ReactNode
slot?: string | null
styles?: StyleString/@react-spectrum/s2:InlineAlertProps InlineAlertProps {
- UNSAFE_className?: string
+ UNSAFE_className?: UnsafeClassName
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?: string
+ UNSAFE_className?: UnsafeClassName
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?: string
+ UNSAFE_className?: UnsafeClassName
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?: string
+ UNSAFE_className?: UnsafeClassName
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?: string
+ UNSAFE_className?: UnsafeClassName
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?: string
+ UNSAFE_className?: UnsafeClassName
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?: string
+ UNSAFE_className?: UnsafeClassName
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?: string
+ UNSAFE_className?: UnsafeClassName
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?: string
+ UNSAFE_className?: UnsafeClassName
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?: string
+ UNSAFE_className?: UnsafeClassName
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?: string
+ UNSAFE_className?: UnsafeClassName
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?: string
+ UNSAFE_className?: UnsafeClassName
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?: string
+ UNSAFE_className?: UnsafeClassName
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?: string
+ UNSAFE_className?: UnsafeClassName
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?: string
+ UNSAFE_className?: UnsafeClassName
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?: string
+ UNSAFE_className?: UnsafeClassName
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?: string
+ UNSAFE_className?: UnsafeClassName
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?: string
+ UNSAFE_className?: UnsafeClassName
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?: string
+ UNSAFE_className?: UnsafeClassName
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?: string
+ UNSAFE_className?: UnsafeClassName
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?: string
+ UNSAFE_className?: UnsafeClassName
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?: string
+ UNSAFE_className?: UnsafeClassName
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?: string
+ UNSAFE_className?: UnsafeClassName
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?: string
+ UNSAFE_className?: UnsafeClassName
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?: string
+ UNSAFE_className?: UnsafeClassName
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?: string
+ UNSAFE_className?: UnsafeClassName
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?: string
+ UNSAFE_className?: UnsafeClassName
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?: string
+ UNSAFE_className?: UnsafeClassName
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?: string
+ UNSAFE_className?: UnsafeClassName
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?: string
+ UNSAFE_className?: UnsafeClassName
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?: string
+ UNSAFE_className?: UnsafeClassName
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?: string
+ UNSAFE_className?: UnsafeClassName
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?: string
+ UNSAFE_className?: UnsafeClassName
UNSAFE_style?: CSSProperties
aria-describedby?: string
aria-details?: string
aria-label?: string
children: ReactNode
}/@react-spectrum/s2:TreeViewProps TreeViewProps {
- UNSAFE_className?: string
+ UNSAFE_className?: UnsafeClassName
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
} |
reidbarber
approved these changes
Apr 17, 2025
snowystinger
approved these changes
Apr 17, 2025
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
This is not allowed because it is truly unsafe. UNSAFE_className is not merged with the component's own styles, it is appended. So if someone passes in a style macro class that sets a property but the component also has a class setting the same property, both will be applied and result in undefined behavior depending on the order the CSS was loaded on the page.