-
Notifications
You must be signed in to change notification settings - Fork 1.3k
docs: Improve styling API docs #8968
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Merged
Merged
+1,181
−352
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
Build successful! 🎉 |
Build successful! 🎉 |
## API Changes
react-aria-components/react-aria-components:Breadcrumbs Breadcrumbs <T extends {}> {
aria-describedby?: string
aria-details?: string
aria-label?: string
aria-labelledby?: string
children?: ReactNode | (T) => ReactNode
- className?: string
+ className?: string = 'react-aria-Breadcrumbs'
dependencies?: ReadonlyArray<any>
id?: string
isDisabled?: boolean
items?: Iterable<T>
slot?: string | null
style?: CSSProperties
} /react-aria-components:Breadcrumb Breadcrumb {
children?: ChildrenOrFunction<BreadcrumbRenderProps>
- className?: ClassNameOrFunction<BreadcrumbRenderProps>
+ className?: ClassNameOrFunction<BreadcrumbRenderProps> = 'react-aria-Breadcrumb'
id?: Key
style?: StyleOrFunction<BreadcrumbRenderProps>
} /react-aria-components:Button Button {
aria-controls?: string
aria-current?: boolean | 'true' | 'false' | 'page' | 'step' | 'location' | 'date' | 'time'
aria-describedby?: string
aria-details?: string
aria-disabled?: boolean | 'true' | 'false'
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?: ChildrenOrFunction<ButtonRenderProps>
- className?: ClassNameOrFunction<ButtonRenderProps>
+ className?: ClassNameOrFunction<ButtonRenderProps> = 'react-aria-Button'
excludeFromTabOrder?: boolean
form?: string
formAction?: string
formEncType?: string
formNoValidate?: boolean
formTarget?: string
id?: string
isDisabled?: boolean
isPending?: boolean
name?: string
onBlur?: (FocusEvent<Target>) => void
onClick?: (MouseEvent<FocusableElement>) => 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
preventFocusOnPress?: boolean
slot?: string | null
style?: StyleOrFunction<ButtonRenderProps>
type?: 'button' | 'submit' | 'reset' = 'button'
value?: string
} /react-aria-components:Calendar Calendar <T extends DateValue> {
aria-describedby?: string
aria-details?: string
aria-label?: string
aria-labelledby?: string
autoFocus?: boolean = false
children?: ChildrenOrFunction<CalendarRenderProps>
- className?: ClassNameOrFunction<CalendarRenderProps>
+ className?: ClassNameOrFunction<CalendarRenderProps> = 'react-aria-Calendar'
createCalendar?: (CalendarIdentifier) => Calendar
defaultFocusedValue?: DateValue | null
defaultValue?: DateValue | null
firstDayOfWeek?: 'sun' | 'mon' | 'tue' | 'wed' | 'thu' | 'fri' | 'sat'
id?: string
isDateUnavailable?: (DateValue) => boolean
isDisabled?: boolean = false
isInvalid?: boolean
isReadOnly?: boolean = false
maxValue?: DateValue | null
minValue?: DateValue | null
onChange?: (MappedDateValue<DateValue>) => void
onFocusChange?: (CalendarDate) => void
pageBehavior?: PageBehavior = visible
selectionAlignment?: 'start' | 'center' | 'end' = 'center'
slot?: string | null
style?: StyleOrFunction<CalendarRenderProps>
value?: DateValue | null
visibleDuration?: DateDuration = {months: 1}
} /react-aria-components:CalendarGrid CalendarGrid {
children?: ReactElement | Array<ReactElement> | (CalendarDate) => ReactElement
- className?: string
+ className?: string = 'react-aria-CalendarGrid'
offset?: DateDuration
style?: CSSProperties
weekdayStyle?: 'narrow' | 'short' | 'long' = "narrow"
} /react-aria-components:CalendarGridHeader CalendarGridHeader {
children: (string) => ReactElement
- className?: string
+ className?: string = 'react-aria-CalendarGridHeader'
style?: CSSProperties
} /react-aria-components:CalendarGridBody CalendarGridBody {
children: (CalendarDate) => ReactElement
- className?: string
+ className?: string = 'react-aria-CalendarGridBody'
style?: CSSProperties
} /react-aria-components:CalendarHeaderCell CalendarHeaderCell {
children?: ReactNode
- className?: string
+ className?: string = 'react-aria-CalendarHeaderCell'
id?: string
style?: CSSProperties
} /react-aria-components:CalendarCell CalendarCell {
children?: ChildrenOrFunction<CalendarCellRenderProps>
- className?: ClassNameOrFunction<CalendarCellRenderProps>
+ className?: ClassNameOrFunction<CalendarCellRenderProps> = 'react-aria-CalendarCell'
date: CalendarDate
onHoverChange?: (boolean) => void
onHoverEnd?: (HoverEvent) => void
onHoverStart?: (HoverEvent) => void
} /react-aria-components:RangeCalendar RangeCalendar <T extends DateValue> {
allowsNonContiguousRanges?: boolean
aria-describedby?: string
aria-details?: string
aria-label?: string
aria-labelledby?: string
autoFocus?: boolean = false
children?: ChildrenOrFunction<RangeCalendarRenderProps>
- className?: ClassNameOrFunction<RangeCalendarRenderProps>
+ className?: ClassNameOrFunction<RangeCalendarRenderProps> = 'react-aria-RangeCalendar'
createCalendar?: (CalendarIdentifier) => Calendar
defaultFocusedValue?: DateValue | null
defaultValue?: RangeValue<DateValue> | null
firstDayOfWeek?: 'sun' | 'mon' | 'tue' | 'wed' | 'thu' | 'fri' | 'sat'
id?: string
isDateUnavailable?: (DateValue) => boolean
isDisabled?: boolean = false
isInvalid?: boolean
isReadOnly?: boolean = false
maxValue?: DateValue | null
minValue?: DateValue | null
onChange?: (RangeValue<MappedDateValue<DateValue>>) => void
onFocusChange?: (CalendarDate) => void
pageBehavior?: PageBehavior = visible
selectionAlignment?: 'start' | 'center' | 'end' = 'center'
slot?: string | null
style?: StyleOrFunction<RangeCalendarRenderProps>
value?: RangeValue<DateValue> | null
visibleDuration?: DateDuration = {months: 1}
} /react-aria-components:Checkbox Checkbox {
aria-controls?: string
aria-describedby?: string
aria-details?: string
aria-errormessage?: string
aria-label?: string
aria-labelledby?: string
autoFocus?: boolean
children?: ChildrenOrFunction<CheckboxRenderProps>
- className?: ClassNameOrFunction<CheckboxRenderProps>
+ className?: ClassNameOrFunction<CheckboxRenderProps> = 'react-aria-Checkbox'
defaultSelected?: boolean
excludeFromTabOrder?: boolean
form?: string
id?: string
isDisabled?: boolean
isIndeterminate?: boolean
isInvalid?: boolean
isReadOnly?: boolean
isRequired?: boolean
isSelected?: boolean
name?: string
onBlur?: (FocusEvent<Target>) => void
onChange?: (boolean) => void
onClick?: (MouseEvent<FocusableElement>) => 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
slot?: string | null
style?: StyleOrFunction<CheckboxRenderProps>
validate?: (boolean) => ValidationError | boolean | null | undefined
validationBehavior?: 'native' | 'aria' = 'native'
value?: string
} /react-aria-components:CheckboxGroup CheckboxGroup {
aria-describedby?: string
aria-details?: string
aria-errormessage?: string
aria-label?: string
aria-labelledby?: string
children?: ChildrenOrFunction<CheckboxGroupRenderProps>
- className?: ClassNameOrFunction<CheckboxGroupRenderProps>
+ className?: ClassNameOrFunction<CheckboxGroupRenderProps> = 'react-aria-CheckboxGroup'
defaultValue?: Array<string>
form?: string
id?: string
isDisabled?: boolean
isReadOnly?: boolean
isRequired?: boolean
name?: string
onBlur?: (FocusEvent<Target>) => void
onChange?: (T) => void
onFocus?: (FocusEvent<Target>) => void
onFocusChange?: (boolean) => void
slot?: string | null
style?: StyleOrFunction<CheckboxGroupRenderProps>
validate?: (Array<string>) => ValidationError | boolean | null | undefined
validationBehavior?: 'native' | 'aria' = 'native'
value?: Array<string>
} /react-aria-components:ColorArea ColorArea {
aria-describedby?: string
aria-details?: string
aria-label?: string
aria-labelledby?: string
children?: ChildrenOrFunction<ColorAreaRenderProps>
- className?: ClassNameOrFunction<ColorAreaRenderProps>
+ className?: ClassNameOrFunction<ColorAreaRenderProps> = 'react-aria-ColorArea'
colorSpace?: ColorSpace
defaultValue?: T
form?: string
id?: string
onChange?: (Color) => void
onChangeEnd?: (Color) => void
slot?: string | null
style?: StyleOrFunction<ColorAreaRenderProps>
value?: T
xChannel?: ColorChannel
xName?: string
yChannel?: ColorChannel
yName?: string
} /react-aria-components:ColorField ColorField {
aria-describedby?: string
aria-details?: string
aria-errormessage?: string
aria-label?: string
aria-labelledby?: string
autoFocus?: boolean
channel?: ColorChannel
children?: ChildrenOrFunction<ColorFieldRenderProps>
- className?: ClassNameOrFunction<ColorFieldRenderProps>
+ className?: ClassNameOrFunction<ColorFieldRenderProps> = 'react-aria-ColorField'
colorSpace?: ColorSpace
defaultValue?: T
excludeFromTabOrder?: boolean
form?: string
isDisabled?: boolean
isInvalid?: boolean
isReadOnly?: boolean
isRequired?: boolean
isWheelDisabled?: boolean
name?: string
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>
slot?: string | null
style?: StyleOrFunction<ColorFieldRenderProps>
validate?: (Color | null) => ValidationError | boolean | null | undefined
validationBehavior?: 'native' | 'aria' = 'native'
value?: T
} /react-aria-components:ColorPicker ColorPicker {
- children?: ChildrenOrFunction<T>
+ children: ChildrenOrFunction<ColorPickerRenderProps>
defaultValue?: string | Color
onChange?: (Color) => void
slot?: string | null
value?: string | Color /react-aria-components:ColorSlider ColorSlider {
aria-describedby?: string
aria-details?: string
aria-label?: string
aria-labelledby?: string
channel: ColorChannel
children?: ChildrenOrFunction<ColorSliderRenderProps>
- className?: ClassNameOrFunction<ColorSliderRenderProps>
+ className?: ClassNameOrFunction<ColorSliderRenderProps> = 'react-aria-ColorSlider'
colorSpace?: ColorSpace
defaultValue?: T
form?: string
id?: string
name?: string
onChange?: (Color) => void
onChangeEnd?: (Color) => void
orientation?: Orientation = 'horizontal'
slot?: string | null
style?: StyleOrFunction<ColorSliderRenderProps>
value?: T
} /react-aria-components:ColorSwatch ColorSwatch {
aria-describedby?: string
aria-details?: string
aria-label?: string
aria-labelledby?: string
- className?: ClassNameOrFunction<ColorSwatchRenderProps>
+ className?: ClassNameOrFunction<ColorSwatchRenderProps> = 'react-aria-ColorSwatch'
color?: string | Color
colorName?: string
id?: string
slot?: string | null
} /react-aria-components:ColorSwatchPicker ColorSwatchPicker {
aria-describedby?: string
aria-details?: string
aria-label?: string
aria-labelledby?: string
children?: ReactNode
- className?: ClassNameOrFunction<ColorSwatchPickerRenderProps>
+ className?: ClassNameOrFunction<ColorSwatchPickerRenderProps> = 'react-aria-ColorSwatchPicker'
defaultValue?: string | Color
layout?: 'grid' | 'stack' = 'grid'
onChange?: (Color) => void
style?: StyleOrFunction<ColorSwatchPickerRenderProps>
} /react-aria-components:ColorSwatchPickerItem ColorSwatchPickerItem {
children?: ChildrenOrFunction<ColorSwatchPickerItemRenderProps>
- className?: ClassNameOrFunction<ColorSwatchPickerItemRenderProps>
+ className?: ClassNameOrFunction<ColorSwatchPickerItemRenderProps> = 'react-aria-ColorSwatchPickerItem'
color: string | Color
isDisabled?: boolean
onClick?: (MouseEvent<FocusableElement>) => void
onHoverChange?: (boolean) => void
onHoverStart?: (HoverEvent) => void
onPress?: (PressEvent) => void
onPressChange?: (boolean) => void
onPressEnd?: (PressEvent) => void
onPressStart?: (PressEvent) => void
onPressUp?: (PressEvent) => void
style?: StyleOrFunction<ColorSwatchPickerItemRenderProps>
} /react-aria-components:ColorThumb ColorThumb {
children?: ChildrenOrFunction<ColorThumbRenderProps>
- className?: ClassNameOrFunction<ColorThumbRenderProps>
+ className?: ClassNameOrFunction<ColorThumbRenderProps> = 'react-aria-ColorThumb'
onHoverChange?: (boolean) => void
onHoverEnd?: (HoverEvent) => void
onHoverStart?: (HoverEvent) => void
style?: StyleOrFunction<ColorThumbRenderProps> /react-aria-components:ColorWheel ColorWheel {
aria-describedby?: string
aria-details?: string
aria-label?: string
aria-labelledby?: string
children?: ChildrenOrFunction<ColorWheelRenderProps>
- className?: ClassNameOrFunction<ColorWheelRenderProps>
+ className?: ClassNameOrFunction<ColorWheelRenderProps> = 'react-aria-ColorWheel'
defaultValue?: string | Color = 'hsl(0, 100%, 50%)'
form?: string
id?: string
innerRadius: number
name?: string
onChange?: (Color) => void
onChangeEnd?: (Color) => void
outerRadius: number
slot?: string | null
style?: StyleOrFunction<ColorWheelRenderProps>
value?: T
} /react-aria-components:ColorWheelTrack ColorWheelTrack {
- className?: ClassNameOrFunction<ColorWheelTrackRenderProps>
+ className?: ClassNameOrFunction<ColorWheelTrackRenderProps> = 'react-aria-ColorWheelTrack'
style?: StyleOrFunction<ColorWheelTrackRenderProps>
} /react-aria-components:ComboBox ComboBox <T extends {}> {
allowsCustomValue?: boolean
allowsEmptyCollection?: boolean
aria-describedby?: string
aria-details?: string
aria-label?: string
aria-labelledby?: string
autoFocus?: boolean
children?: ChildrenOrFunction<ComboBoxRenderProps>
- className?: ClassNameOrFunction<ComboBoxRenderProps>
+ className?: ClassNameOrFunction<ComboBoxRenderProps> = 'react-aria-ComboBox'
defaultFilter?: (string, string) => boolean
defaultInputValue?: string
defaultItems?: Iterable<T>
defaultSelectedKey?: Key
form?: string
formValue?: 'text' | 'key' = 'key'
id?: string
inputValue?: string
isDisabled?: boolean
isInvalid?: boolean
isReadOnly?: boolean
isRequired?: boolean
items?: Iterable<T>
menuTrigger?: MenuTriggerAction = 'input'
name?: string
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
shouldFocusWrap?: boolean
slot?: string | null
style?: StyleOrFunction<ComboBoxRenderProps>
validate?: (ComboBoxValidationValue) => ValidationError | boolean | null | undefined
validationBehavior?: 'native' | 'aria' = 'native'
} /react-aria-components:DateField DateField <T extends DateValue> {
aria-describedby?: string
aria-details?: string
aria-label?: string
aria-labelledby?: string
autoComplete?: string
autoFocus?: boolean
children?: ChildrenOrFunction<DateFieldRenderProps>
- className?: ClassNameOrFunction<DateFieldRenderProps>
+ className?: ClassNameOrFunction<DateFieldRenderProps> = 'react-aria-DateField'
defaultValue?: DateValue | null
form?: string
granularity?: Granularity
hideTimeZone?: boolean = false
id?: string
isDateUnavailable?: (DateValue) => boolean
isDisabled?: boolean
isInvalid?: boolean
isReadOnly?: boolean
isRequired?: boolean
maxValue?: DateValue | null
minValue?: DateValue | null
name?: string
onBlur?: (FocusEvent<Target>) => void
onChange?: (MappedDateValue<DateValue> | null) => void
onFocus?: (FocusEvent<Target>) => void
onFocusChange?: (boolean) => void
onKeyDown?: (KeyboardEvent) => void
onKeyUp?: (KeyboardEvent) => void
placeholderValue?: DateValue | null
shouldForceLeadingZeros?: boolean
slot?: string | null
style?: StyleOrFunction<DateFieldRenderProps>
validate?: (MappedDateValue<DateValue>) => ValidationError | boolean | null | undefined
validationBehavior?: 'native' | 'aria' = 'native'
value?: DateValue | null
} /react-aria-components:DateInput DateInput {
children: (DateSegment) => ReactElement
- className?: ClassNameOrFunction<DateInputRenderProps>
+ className?: ClassNameOrFunction<DateInputRenderProps> = 'react-aria-DateInput'
slot?: string | null
style?: StyleOrFunction<DateInputRenderProps>
} /react-aria-components:DateSegment DateSegment {
children?: ChildrenOrFunction<DateSegmentRenderProps>
- className?: ClassNameOrFunction<DateSegmentRenderProps>
+ className?: ClassNameOrFunction<DateSegmentRenderProps> = 'react-aria-DateSegment'
onHoverChange?: (boolean) => void
onHoverEnd?: (HoverEvent) => void
onHoverStart?: (HoverEvent) => void
segment: DateSegment
} /react-aria-components:TimeField TimeField <T extends TimeValue> {
aria-describedby?: string
aria-details?: string
aria-label?: string
aria-labelledby?: string
autoFocus?: boolean
children?: ChildrenOrFunction<DateFieldRenderProps>
- className?: ClassNameOrFunction<DateFieldRenderProps>
+ className?: ClassNameOrFunction<DateFieldRenderProps> = 'react-aria-TimeField'
defaultValue?: TimeValue | null
form?: string
granularity?: 'hour' | 'minute' | 'second' = 'minute'
hideTimeZone?: boolean
id?: string
isDisabled?: boolean
isInvalid?: boolean
isReadOnly?: boolean
isRequired?: boolean
maxValue?: TimeValue | null
minValue?: TimeValue | null
name?: string
onBlur?: (FocusEvent<Target>) => void
onChange?: (MappedTimeValue<TimeValue> | null) => void
onFocus?: (FocusEvent<Target>) => void
onFocusChange?: (boolean) => void
onKeyDown?: (KeyboardEvent) => void
onKeyUp?: (KeyboardEvent) => void
placeholderValue?: TimeValue
shouldForceLeadingZeros?: boolean
slot?: string | null
style?: StyleOrFunction<DateFieldRenderProps>
validate?: (MappedTimeValue<TimeValue>) => ValidationError | boolean | null | undefined
validationBehavior?: 'native' | 'aria' = 'native'
value?: TimeValue | null
} /react-aria-components:DatePicker DatePicker <T extends DateValue> {
aria-describedby?: string
aria-details?: string
aria-label?: string
aria-labelledby?: string
autoComplete?: string
autoFocus?: boolean
children?: ChildrenOrFunction<DatePickerRenderProps>
- className?: ClassNameOrFunction<DatePickerRenderProps>
+ className?: ClassNameOrFunction<DatePickerRenderProps> = 'react-aria-DatePicker'
defaultOpen?: boolean
defaultValue?: DateValue | null
firstDayOfWeek?: 'sun' | 'mon' | 'tue' | 'wed' | 'thu' | 'fri' | 'sat'
form?: string
hideTimeZone?: boolean = false
hourCycle?: number | number
id?: string
isDateUnavailable?: (DateValue) => boolean
isDisabled?: boolean
isInvalid?: boolean
isOpen?: boolean
isReadOnly?: boolean
isRequired?: boolean
maxValue?: DateValue | null
minValue?: DateValue | null
name?: string
onBlur?: (FocusEvent<Target>) => void
onChange?: (MappedDateValue<DateValue> | null) => void
onFocus?: (FocusEvent<Target>) => void
onFocusChange?: (boolean) => void
onKeyDown?: (KeyboardEvent) => void
onKeyUp?: (KeyboardEvent) => void
onOpenChange?: (boolean) => void
pageBehavior?: PageBehavior = visible
placeholderValue?: DateValue | null
shouldCloseOnSelect?: boolean | () => boolean = true
shouldForceLeadingZeros?: boolean
slot?: string | null
style?: StyleOrFunction<DatePickerRenderProps>
validate?: (MappedDateValue<DateValue>) => ValidationError | boolean | null | undefined
validationBehavior?: 'native' | 'aria' = 'native'
value?: DateValue | null
} /react-aria-components:DateRangePicker DateRangePicker <T extends DateValue> {
allowsNonContiguousRanges?: boolean
aria-describedby?: string
aria-details?: string
aria-label?: string
aria-labelledby?: string
autoFocus?: boolean
children?: ChildrenOrFunction<DateRangePickerRenderProps>
- className?: ClassNameOrFunction<DateRangePickerRenderProps>
+ className?: ClassNameOrFunction<DateRangePickerRenderProps> = 'react-aria-DateRangePicker'
defaultOpen?: boolean
defaultValue?: RangeValue<DateValue> | null
endName?: string
firstDayOfWeek?: 'sun' | 'mon' | 'tue' | 'wed' | 'thu' | 'fri' | 'sat'
granularity?: Granularity
hideTimeZone?: boolean = false
hourCycle?: number | number
id?: string
isDateUnavailable?: (DateValue) => boolean
isDisabled?: boolean
isInvalid?: boolean
isOpen?: boolean
isReadOnly?: boolean
isRequired?: boolean
maxValue?: DateValue | null
minValue?: DateValue | null
onBlur?: (FocusEvent<Target>) => void
onChange?: (RangeValue<MappedDateValue<DateValue>> | null) => void
onFocus?: (FocusEvent<Target>) => void
onFocusChange?: (boolean) => void
onKeyDown?: (KeyboardEvent) => void
onKeyUp?: (KeyboardEvent) => void
onOpenChange?: (boolean) => void
pageBehavior?: PageBehavior = visible
placeholderValue?: DateValue | null
shouldCloseOnSelect?: boolean | () => boolean = true
shouldForceLeadingZeros?: boolean
slot?: string | null
startName?: string
style?: StyleOrFunction<DateRangePickerRenderProps>
validate?: (RangeValue<MappedDateValue<DateValue>>) => ValidationError | boolean | null | undefined
validationBehavior?: 'native' | 'aria' = 'native'
value?: RangeValue<DateValue> | null
} /react-aria-components:Dialog Dialog {
aria-describedby?: string
aria-details?: string
aria-label?: string
aria-labelledby?: string
children?: ReactNode | (DialogRenderProps) => ReactNode
- className?: string
+ className?: string = 'react-aria-Dialog'
id?: string
role?: 'dialog' | 'alertdialog' = 'dialog'
slot?: string | null
style?: CSSProperties /react-aria-components:Disclosure Disclosure {
children?: ChildrenOrFunction<DisclosureRenderProps>
- className?: ClassNameOrFunction<DisclosureRenderProps>
+ className?: ClassNameOrFunction<DisclosureRenderProps> = 'react-aria-Disclosure'
defaultExpanded?: boolean
id?: Key
isDisabled?: boolean
isExpanded?: boolean
slot?: string | null
style?: StyleOrFunction<DisclosureRenderProps>
} /react-aria-components:DisclosureGroup DisclosureGroup {
allowsMultipleExpanded?: boolean
children?: ChildrenOrFunction<DisclosureGroupRenderProps>
- className?: ClassNameOrFunction<DisclosureGroupRenderProps>
+ className?: ClassNameOrFunction<DisclosureGroupRenderProps> = 'react-aria-DisclosureGroup'
defaultExpandedKeys?: Iterable<Key>
expandedKeys?: Iterable<Key>
id?: string
isDisabled?: boolean
style?: StyleOrFunction<DisclosureGroupRenderProps>
} /react-aria-components:DisclosurePanel DisclosurePanel {
children: ReactNode
- className?: ClassNameOrFunction<DisclosurePanelRenderProps>
+ className?: ClassNameOrFunction<DisclosurePanelRenderProps> = 'react-aria-DisclosurePanel'
id?: string
role?: 'group' | 'region' = 'group'
style?: StyleOrFunction<DisclosurePanelRenderProps>
} /react-aria-components:DropZone DropZone {
aria-describedby?: string
aria-details?: string
aria-label?: string
aria-labelledby?: string
children?: ChildrenOrFunction<DropZoneRenderProps>
- className?: ClassNameOrFunction<DropZoneRenderProps>
+ className?: ClassNameOrFunction<DropZoneRenderProps> = 'react-aria-DropZone'
getDropOperation?: (DragTypes, Array<DropOperation>) => DropOperation
isDisabled?: boolean
onDrop?: (DropEvent) => void
onDropActivate?: (DropActivateEvent) => void
onDropExit?: (DropExitEvent) => void
onDropMove?: (DropMoveEvent) => void
onHoverChange?: (boolean) => void
onHoverEnd?: (HoverEvent) => void
onHoverStart?: (HoverEvent) => void
slot?: string | null
style?: StyleOrFunction<DropZoneRenderProps>
} /react-aria-components:FieldError FieldError {
children?: ChildrenOrFunction<FieldErrorRenderProps>
- className?: ClassNameOrFunction<FieldErrorRenderProps>
+ className?: ClassNameOrFunction<FieldErrorRenderProps> = 'react-aria-FieldError'
id?: string
style?: StyleOrFunction<FieldErrorRenderProps>
} /react-aria-components:Form Form {
action?: string | FormHTMLAttributes<HTMLFormElement>['action']
aria-describedby?: string
aria-details?: string
aria-label?: string
aria-labelledby?: string
autoCapitalize?: 'off' | 'none' | 'on' | 'sentences' | 'words' | 'characters'
autoComplete?: 'off' | 'on'
children?: ReactNode
- className?: string
+ className?: string = 'react-aria-Form'
encType?: 'application/x-www-form-urlencoded' | 'multipart/form-data' | 'text/plain'
id?: string
method?: 'get' | 'post' | 'dialog'
onInvalid?: (FormEvent<HTMLFormElement>) => void
onSubmit?: (FormEvent<HTMLFormElement>) => void
role?: 'search' | 'presentation'
style?: CSSProperties
target?: '_blank' | '_self' | '_parent' | '_top'
validationBehavior?: 'aria' | 'native' = 'native'
validationErrors?: ValidationErrors
} /react-aria-components:GridListLoadMoreItem GridListLoadMoreItem {
children?: ReactNode
- className?: string
+ className?: string = 'react-aria-GridListLoadMoreItem'
isLoading?: boolean
onLoadMore?: () => any
scrollOffset?: number = 1
style?: CSSProperties /react-aria-components:GridList GridList <T extends {}> {
aria-describedby?: string
aria-details?: string
aria-label?: string
aria-labelledby?: string
autoFocus?: boolean | FocusStrategy
children?: ReactNode | ({}) => ReactNode
- className?: ClassNameOrFunction<GridListRenderProps>
+ className?: ClassNameOrFunction<GridListRenderProps> = 'react-aria-GridList'
defaultSelectedKeys?: 'all' | Iterable<Key>
dependencies?: ReadonlyArray<any>
disabledBehavior?: DisabledBehavior = "all"
disabledKeys?: Iterable<Key>
disallowTypeAhead?: boolean = false
dragAndDropHooks?: DragAndDropHooks<NoInfer<{}>>
escapeKeyBehavior?: 'clearSelection' | 'none' = 'clearSelection'
id?: string
items?: Iterable<T>
keyboardNavigationBehavior?: 'arrow' | 'tab' = 'arrow'
layout?: 'stack' | 'grid' = 'stack'
onAction?: (Key) => void
onSelectionChange?: (Selection) => void
renderEmptyState?: (GridListRenderProps) => ReactNode
selectedKeys?: 'all' | Iterable<Key>
selectionBehavior?: SelectionBehavior = "toggle"
selectionMode?: SelectionMode
shouldSelectOnPressUp?: boolean
slot?: string | null
style?: StyleOrFunction<GridListRenderProps>
} /react-aria-components:GridListItem GridListItem <T extends {}> {
children?: ChildrenOrFunction<GridListItemRenderProps>
- className?: ClassNameOrFunction<GridListItemRenderProps>
+ className?: ClassNameOrFunction<GridListItemRenderProps> = 'react-aria-GridListItem'
download?: boolean | string
href?: Href
hrefLang?: string
id?: Key
onAction?: () => void
onClick?: (MouseEvent<FocusableElement>) => void
onHoverChange?: (boolean) => void
onHoverEnd?: (HoverEvent) => void
onHoverStart?: (HoverEvent) => void
onPress?: (PressEvent) => void
onPressChange?: (boolean) => void
onPressEnd?: (PressEvent) => void
onPressStart?: (PressEvent) => void
onPressUp?: (PressEvent) => void
ping?: string
referrerPolicy?: HTMLAttributeReferrerPolicy
rel?: string
routerOptions?: RouterOptions
style?: StyleOrFunction<GridListItemRenderProps>
target?: HTMLAttributeAnchorTarget
textValue?: string
value?: {}
} /react-aria-components:GridListSection GridListSection <T extends {}> {
aria-label?: string
children?: ReactNode | ({}) => ReactElement
- className?: string
+ className?: string = 'react-aria-GridListSection'
dependencies?: ReadonlyArray<any>
id?: Key
items?: Iterable<{}>
style?: CSSProperties
} /react-aria-components:Group Group extends HTMLAttributes {
aria-describedby?: string
aria-details?: string
aria-label?: string
aria-labelledby?: string
children?: ChildrenOrFunction<GroupRenderProps>
- className?: ClassNameOrFunction<GroupRenderProps>
+ className?: ClassNameOrFunction<GroupRenderProps> = 'react-aria-Group'
id?: string
isDisabled?: boolean
isInvalid?: boolean
isReadOnly?: boolean
onHoverEnd?: (HoverEvent) => void
onHoverStart?: (HoverEvent) => void
role?: 'group' | 'region' | 'presentation' = 'group'
slot?: string | null
style?: StyleOrFunction<GroupRenderProps>
} /react-aria-components:Input Input extends InputHTMLAttributes {
- className?: ClassNameOrFunction<InputRenderProps>
+ className?: ClassNameOrFunction<InputRenderProps> = 'react-aria-Input'
onHoverChange?: (boolean) => void
onHoverEnd?: (HoverEvent) => void
onHoverStart?: (HoverEvent) => void
placeholder?: string
} /react-aria-components:Link Link {
aria-describedby?: string
aria-details?: string
aria-label?: string
aria-labelledby?: string
autoFocus?: boolean
children?: ChildrenOrFunction<LinkRenderProps>
- className?: ClassNameOrFunction<LinkRenderProps>
+ className?: ClassNameOrFunction<LinkRenderProps> = 'react-aria-Link'
download?: boolean | string
href?: Href
hrefLang?: string
isDisabled?: boolean
onClick?: (MouseEvent<FocusableElement>) => 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
slot?: string | null
style?: StyleOrFunction<LinkRenderProps>
target?: HTMLAttributeAnchorTarget
} /react-aria-components:ListBoxLoadMoreItem ListBoxLoadMoreItem {
children?: ReactNode
- className?: string
+ className?: string = 'react-aria-ListBoxLoadMoreItem'
isLoading?: boolean
onLoadMore?: () => any
scrollOffset?: number = 1
style?: CSSProperties /react-aria-components:ListBox ListBox <T extends {}> {
aria-describedby?: string
aria-details?: string
aria-label?: string
aria-labelledby?: string
autoFocus?: boolean | FocusStrategy
children?: ReactNode | ({}) => ReactNode
- className?: ClassNameOrFunction<ListBoxRenderProps>
+ className?: ClassNameOrFunction<ListBoxRenderProps> = 'react-aria-ListBox'
defaultSelectedKeys?: 'all' | Iterable<Key>
dependencies?: ReadonlyArray<any>
disabledKeys?: Iterable<Key>
disallowEmptySelection?: boolean
escapeKeyBehavior?: 'clearSelection' | 'none' = 'clearSelection'
id?: string
items?: Iterable<T>
layout?: 'stack' | 'grid' = 'stack'
onAction?: (Key) => void
onBlur?: (FocusEvent<Target>) => void
onFocus?: (FocusEvent<Target>) => void
onFocusChange?: (boolean) => void
onSelectionChange?: (Selection) => void
orientation?: Orientation = 'vertical'
renderEmptyState?: (ListBoxRenderProps) => ReactNode
selectedKeys?: 'all' | Iterable<Key>
selectionBehavior?: SelectionBehavior = "toggle"
selectionMode?: SelectionMode
shouldFocusOnHover?: boolean
shouldFocusWrap?: boolean
shouldSelectOnPressUp?: boolean
slot?: string | null
style?: StyleOrFunction<ListBoxRenderProps>
} /react-aria-components:ListBoxItem ListBoxItem <T extends {}> {
aria-label?: string
children?: ChildrenOrFunction<ListBoxItemRenderProps>
- className?: ClassNameOrFunction<ListBoxItemRenderProps>
+ className?: ClassNameOrFunction<ListBoxItemRenderProps> = 'react-aria-ListBoxItem'
download?: boolean | string
href?: Href
hrefLang?: string
id?: Key
onAction?: () => void
onClick?: (MouseEvent<FocusableElement>) => void
onHoverChange?: (boolean) => void
onHoverEnd?: (HoverEvent) => void
onHoverStart?: (HoverEvent) => void
onPress?: (PressEvent) => void
onPressChange?: (boolean) => void
onPressEnd?: (PressEvent) => void
onPressStart?: (PressEvent) => void
onPressUp?: (PressEvent) => void
ping?: string
referrerPolicy?: HTMLAttributeReferrerPolicy
rel?: string
routerOptions?: RouterOptions
style?: StyleOrFunction<ListBoxItemRenderProps>
target?: HTMLAttributeAnchorTarget
textValue?: string
value?: {}
} /react-aria-components:ListBoxSection ListBoxSection <T extends {}> {
aria-label?: string
children?: ReactNode | ({}) => ReactElement
- className?: string
+ className?: string = 'react-aria-ListBoxSection'
dependencies?: ReadonlyArray<any>
id?: Key
items?: Iterable<{}>
style?: CSSProperties
} /react-aria-components:Menu Menu <T extends {}> {
aria-describedby?: string
aria-details?: string
aria-label?: string
aria-labelledby?: string
autoFocus?: boolean | FocusStrategy
children?: ReactNode | ({}) => ReactNode
- className?: ClassNameOrFunction<MenuRenderProps>
+ className?: ClassNameOrFunction<MenuRenderProps> = 'react-aria-Menu'
defaultSelectedKeys?: 'all' | Iterable<Key>
dependencies?: ReadonlyArray<any>
disabledKeys?: Iterable<Key>
disallowEmptySelection?: boolean
id?: string
items?: Iterable<T>
onAction?: (Key) => void
onClose?: () => void
onSelectionChange?: (Selection) => void
renderEmptyState?: () => ReactNode
selectedKeys?: 'all' | Iterable<Key>
selectionMode?: SelectionMode
shouldFocusWrap?: boolean
slot?: string | null
style?: StyleOrFunction<MenuRenderProps>
} /react-aria-components:MenuItem MenuItem <T extends {}> {
aria-label?: string
children?: ChildrenOrFunction<MenuItemRenderProps>
- className?: ClassNameOrFunction<MenuItemRenderProps>
+ className?: ClassNameOrFunction<MenuItemRenderProps> = 'react-aria-MenuItem'
download?: boolean | string
href?: Href
hrefLang?: string
id?: Key
onAction?: () => void
onClick?: (MouseEvent<FocusableElement>) => void
onHoverChange?: (boolean) => void
onHoverEnd?: (HoverEvent) => void
onHoverStart?: (HoverEvent) => void
onPress?: (PressEvent) => void
onPressChange?: (boolean) => void
onPressEnd?: (PressEvent) => void
onPressStart?: (PressEvent) => void
onPressUp?: (PressEvent) => void
ping?: string
referrerPolicy?: HTMLAttributeReferrerPolicy
rel?: string
routerOptions?: RouterOptions
style?: StyleOrFunction<MenuItemRenderProps>
target?: HTMLAttributeAnchorTarget
textValue?: string
value?: {}
} /react-aria-components:MenuSection MenuSection <T extends {}> {
aria-label?: string
children?: ReactNode | ({}) => ReactElement
- className?: string
+ className?: string = 'react-aria-MenuSection'
defaultSelectedKeys?: 'all' | Iterable<Key>
dependencies?: ReadonlyArray<any>
disabledKeys?: Iterable<Key>
disallowEmptySelection?: boolean
items?: Iterable<{}>
onSelectionChange?: (Selection) => void
selectedKeys?: 'all' | Iterable<Key>
selectionMode?: SelectionMode
style?: CSSProperties
value?: {}
} /react-aria-components:Meter Meter {
aria-describedby?: string
aria-details?: string
aria-label?: string
aria-labelledby?: string
children?: ChildrenOrFunction<MeterRenderProps>
- className?: ClassNameOrFunction<MeterRenderProps>
+ className?: ClassNameOrFunction<MeterRenderProps> = 'react-aria-Meter'
formatOptions?: Intl.NumberFormatOptions = {style: 'percent'}
id?: string
maxValue?: number = 100
minValue?: number = 0
style?: StyleOrFunction<MeterRenderProps>
value?: number = 0
valueLabel?: ReactNode
} /react-aria-components:Modal Modal {
children?: ChildrenOrFunction<ModalRenderProps>
- className?: ClassNameOrFunction<ModalRenderProps>
+ className?: ClassNameOrFunction<ModalRenderProps> = 'react-aria-ModalOverlay'
defaultOpen?: boolean
isDismissable?: boolean = false
isEntering?: boolean
isExiting?: boolean
isOpen?: boolean
onOpenChange?: (boolean) => void
shouldCloseOnInteractOutside?: (Element) => boolean
slot?: string | null
style?: StyleOrFunction<ModalRenderProps>
} /react-aria-components:ModalOverlay ModalOverlay {
children?: ChildrenOrFunction<ModalRenderProps>
- className?: ClassNameOrFunction<ModalRenderProps>
+ className?: ClassNameOrFunction<ModalRenderProps> = 'react-aria-ModalOverlay'
defaultOpen?: boolean
isDismissable?: boolean = false
isEntering?: boolean
isExiting?: boolean
isOpen?: boolean
onOpenChange?: (boolean) => void
shouldCloseOnInteractOutside?: (Element) => boolean
slot?: string | null
style?: StyleOrFunction<ModalRenderProps>
} /react-aria-components:NumberField NumberField {
aria-describedby?: string
aria-details?: string
aria-label?: string
aria-labelledby?: string
autoFocus?: boolean
children?: ChildrenOrFunction<NumberFieldRenderProps>
- className?: ClassNameOrFunction<NumberFieldRenderProps>
+ className?: ClassNameOrFunction<NumberFieldRenderProps> = 'react-aria-NumberField'
decrementAriaLabel?: string
defaultValue?: number
form?: string
formatOptions?: Intl.NumberFormatOptions
incrementAriaLabel?: string
isDisabled?: boolean
isInvalid?: boolean
isReadOnly?: boolean
isRequired?: boolean
isWheelDisabled?: boolean
maxValue?: number
minValue?: number
name?: string
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>
slot?: string | null
step?: number
style?: StyleOrFunction<NumberFieldRenderProps>
validate?: (number) => ValidationError | boolean | null | undefined
validationBehavior?: 'native' | 'aria' = 'native'
value?: number
} /react-aria-components:OverlayArrow OverlayArrow extends HTMLAttributes {
children?: ChildrenOrFunction<OverlayArrowRenderProps>
- className?: ClassNameOrFunction<OverlayArrowRenderProps>
+ className?: ClassNameOrFunction<OverlayArrowRenderProps> = 'react-aria-OverlayArrow'
id?: string
style?: StyleOrFunction<OverlayArrowRenderProps>
} /react-aria-components:Popover Popover {
aria-describedby?: string
aria-details?: string
aria-label?: string
aria-labelledby?: string
arrowBoundaryOffset?: number = 0
arrowRef?: RefObject<Element | null>
boundaryElement?: Element = document.body
children?: ChildrenOrFunction<PopoverRenderProps>
- className?: ClassNameOrFunction<PopoverRenderProps>
+ className?: ClassNameOrFunction<PopoverRenderProps> = 'react-aria-Popover'
containerPadding?: number = 12
crossOffset?: number = 0
defaultOpen?: boolean
isEntering?: boolean
isKeyboardDismissDisabled?: boolean = false
isNonModal?: boolean
isOpen?: boolean
maxHeight?: number
offset?: number = 8
onOpenChange?: (boolean) => void
placement?: Placement = 'bottom'
scrollRef?: RefObject<Element | null> = overlayRef
shouldCloseOnInteractOutside?: (Element) => boolean
shouldFlip?: boolean = true
shouldUpdatePosition?: boolean = true
slot?: string | null
style?: StyleOrFunction<PopoverRenderProps>
trigger?: string
triggerRef?: RefObject<Element | null>
} /react-aria-components:ProgressBar ProgressBar {
aria-describedby?: string
aria-details?: string
aria-label?: string
aria-labelledby?: string
children?: ChildrenOrFunction<ProgressBarRenderProps>
- className?: ClassNameOrFunction<ProgressBarRenderProps>
+ className?: ClassNameOrFunction<ProgressBarRenderProps> = 'react-aria-ProgressBar'
formatOptions?: Intl.NumberFormatOptions = {style: 'percent'}
id?: string
isIndeterminate?: boolean
maxValue?: number = 100
slot?: string | null
style?: StyleOrFunction<ProgressBarRenderProps>
value?: number = 0
valueLabel?: ReactNode
} /react-aria-components:RadioGroup RadioGroup {
aria-describedby?: string
aria-details?: string
aria-errormessage?: string
aria-label?: string
aria-labelledby?: string
children?: ChildrenOrFunction<RadioGroupRenderProps>
- className?: ClassNameOrFunction<RadioGroupRenderProps>
+ className?: ClassNameOrFunction<RadioGroupRenderProps> = 'react-aria-RadioGroup'
defaultValue?: string | null
form?: string
id?: string
isDisabled?: boolean
isReadOnly?: boolean
isRequired?: boolean
name?: string
onBlur?: (FocusEvent<Target>) => void
onChange?: (string) => void
onFocus?: (FocusEvent<Target>) => void
onFocusChange?: (boolean) => void
orientation?: Orientation = 'vertical'
slot?: string | null
style?: StyleOrFunction<RadioGroupRenderProps>
validate?: (string | null) => ValidationError | boolean | null | undefined
validationBehavior?: 'native' | 'aria' = 'native'
value?: string | null
} /react-aria-components:Radio Radio {
aria-describedby?: string
aria-details?: string
aria-label?: string
aria-labelledby?: string
autoFocus?: boolean
children?: ChildrenOrFunction<RadioRenderProps>
- className?: ClassNameOrFunction<RadioRenderProps>
+ className?: ClassNameOrFunction<RadioRenderProps> = 'react-aria-Radio'
id?: string
inputRef?: RefObject<HTMLInputElement | null>
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
slot?: string | null
style?: StyleOrFunction<RadioRenderProps>
value: string
} /react-aria-components:SearchField SearchField {
aria-activedescendant?: string
aria-autocomplete?: 'none' | 'inline' | 'list' | 'both'
aria-controls?: string
aria-describedby?: 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
children?: ChildrenOrFunction<SearchFieldRenderProps>
- className?: ClassNameOrFunction<SearchFieldRenderProps>
+ className?: ClassNameOrFunction<SearchFieldRenderProps> = 'react-aria-SearchField'
defaultValue?: string
enterKeyHint?: 'enter' | 'done' | 'go' | 'next' | 'previous' | 'search' | 'send'
excludeFromTabOrder?: boolean
form?: string
inputMode?: 'none' | 'text' | 'tel' | 'url' | 'email' | 'numeric' | 'decimal' | 'search'
isDisabled?: boolean
isInvalid?: boolean
isReadOnly?: boolean
isRequired?: boolean
maxLength?: number
minLength?: number
name?: string
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
slot?: string | null
spellCheck?: string
style?: StyleOrFunction<SearchFieldRenderProps>
type?: 'text' | 'search' | 'url' | 'tel' | 'email' | 'password' | (string & {
}) = 'search'
validate?: (string) => ValidationError | boolean | null | undefined
validationBehavior?: 'native' | 'aria' = 'native'
value?: string
} /react-aria-components:Select Select <M extends SelectionMode = 'single', T extends {} = {
}> {
aria-describedby?: string
aria-details?: string
aria-label?: string
aria-labelledby?: string
autoComplete?: string
autoFocus?: boolean
children?: ChildrenOrFunction<SelectRenderProps>
- className?: ClassNameOrFunction<SelectRenderProps>
+ className?: ClassNameOrFunction<SelectRenderProps> = 'react-aria-Select'
defaultOpen?: boolean
defaultValue?: ValueType<SelectionMode>
disabledKeys?: Iterable<Key>
excludeFromTabOrder?: boolean
id?: string
isDisabled?: boolean
isInvalid?: boolean
isOpen?: boolean
isRequired?: boolean
name?: string
onBlur?: (FocusEvent<Target>) => void
onChange?: (T) => void
onFocus?: (FocusEvent<Target>) => void
onFocusChange?: (boolean) => void
onKeyDown?: (KeyboardEvent) => void
onKeyUp?: (KeyboardEvent) => void
onOpenChange?: (boolean) => void
placeholder?: string = 'Select an item' (localized)
selectionMode?: SelectionMode = 'single'
slot?: string | null
style?: StyleOrFunction<SelectRenderProps>
validate?: (ValidationType<SelectionMode>) => ValidationError | boolean | null | undefined
validationBehavior?: 'native' | 'aria' = 'native'
value?: ValueType<SelectionMode>
} /react-aria-components:SelectValue SelectValue <T extends {}> extends HTMLAttributes {
children?: ChildrenOrFunction<SelectValueRenderProps<{}>>
- className?: ClassNameOrFunction<SelectValueRenderProps<{}>>
+ className?: ClassNameOrFunction<SelectValueRenderProps<{}>> = 'react-aria-SelectValue'
style?: StyleOrFunction<SelectValueRenderProps<{}>>
} /react-aria-components:SelectionIndicator SelectionIndicator {
children?: ChildrenOrFunction<SharedElementRenderProps>
- className?: ClassNameOrFunction<SharedElementRenderProps>
+ className?: ClassNameOrFunction<SharedElementRenderProps> = 'react-aria-SelectionIndicator'
isSelected?: boolean
style?: StyleOrFunction<SharedElementRenderProps>
} /react-aria-components:Separator Separator {
aria-describedby?: string
aria-details?: string
aria-label?: string
aria-labelledby?: string
- className?: string
+ className?: string = 'react-aria-Separator'
elementType?: string
id?: string
orientation?: Orientation = 'horizontal'
slot?: string | null
} /react-aria-components:Slider Slider <T extends number | Array<number>> {
aria-describedby?: string
aria-details?: string
aria-label?: string
aria-labelledby?: string
children?: ChildrenOrFunction<SliderRenderProps>
- className?: ClassNameOrFunction<SliderRenderProps>
+ className?: ClassNameOrFunction<SliderRenderProps> = 'react-aria-Slider'
defaultValue?: T
formatOptions?: Intl.NumberFormatOptions
id?: string
isDisabled?: boolean
minValue?: number = 0
onChange?: (T) => void
onChangeEnd?: (T) => void
orientation?: Orientation = 'horizontal'
slot?: string | null
step?: number = 1
style?: StyleOrFunction<SliderRenderProps>
value?: T
} /react-aria-components:SliderOutput SliderOutput {
children?: ChildrenOrFunction<SliderRenderProps>
- className?: ClassNameOrFunction<SliderRenderProps>
+ className?: ClassNameOrFunction<SliderRenderProps> = 'react-aria-SliderOutput'
style?: StyleOrFunction<SliderRenderProps>
} /react-aria-components:SliderTrack SliderTrack {
children?: ChildrenOrFunction<SliderTrackRenderProps>
- className?: ClassNameOrFunction<SliderTrackRenderProps>
+ className?: ClassNameOrFunction<SliderTrackRenderProps> = 'react-aria-SliderTrack'
onHoverChange?: (boolean) => void
onHoverEnd?: (HoverEvent) => void
onHoverStart?: (HoverEvent) => void
style?: StyleOrFunction<SliderTrackRenderProps> /react-aria-components:SliderThumb SliderThumb {
aria-describedby?: string
aria-details?: string
aria-errormessage?: string
aria-label?: string
aria-labelledby?: string
autoFocus?: boolean
children?: ChildrenOrFunction<SliderThumbRenderProps>
- className?: ClassNameOrFunction<SliderThumbRenderProps>
+ className?: ClassNameOrFunction<SliderThumbRenderProps> = 'react-aria-SliderThumb'
form?: string
id?: string
index?: number = 0
inputRef?: RefObject<HTMLInputElement | null>
name?: string
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
style?: StyleOrFunction<SliderThumbRenderProps>
} /react-aria-components:Switch Switch {
aria-controls?: string
aria-describedby?: string
aria-details?: string
aria-label?: string
aria-labelledby?: string
autoFocus?: boolean
children?: ChildrenOrFunction<SwitchRenderProps>
- className?: ClassNameOrFunction<SwitchRenderProps>
+ className?: ClassNameOrFunction<SwitchRenderProps> = 'react-aria-Switch'
defaultSelected?: boolean
excludeFromTabOrder?: boolean
form?: string
id?: string
isDisabled?: boolean
isReadOnly?: boolean
isSelected?: boolean
name?: string
onBlur?: (FocusEvent<Target>) => void
onChange?: (boolean) => void
onFocus?: (FocusEvent<Target>) => void
onFocusChange?: (boolean) => void
onHoverChange?: (boolean) => void
onHoverEnd?: (HoverEvent) => void
onHoverStart?: (HoverEvent) => void
onKeyDown?: (KeyboardEvent) => void
onKeyUp?: (KeyboardEvent) => void
slot?: string | null
style?: StyleOrFunction<SwitchRenderProps>
value?: string
} /react-aria-components:TableLoadMoreItem TableLoadMoreItem {
children?: ReactNode
- className?: string
+ className?: string = 'react-aria-TableLoadMoreItem'
isLoading?: boolean
onLoadMore?: () => any
scrollOffset?: number = 1
style?: CSSProperties /react-aria-components:Table Table {
aria-describedby?: string
aria-details?: string
aria-label?: string
aria-labelledby?: string
children?: ReactNode
- className?: ClassNameOrFunction<TableRenderProps>
+ className?: ClassNameOrFunction<TableRenderProps> = 'react-aria-Table'
defaultSelectedKeys?: 'all' | Iterable<Key>
disabledBehavior?: DisabledBehavior = "selection"
disabledKeys?: Iterable<Key>
disallowEmptySelection?: boolean
escapeKeyBehavior?: 'clearSelection' | 'none' = 'clearSelection'
onRowAction?: (Key) => void
onSelectionChange?: (Selection) => void
onSortChange?: (SortDescriptor) => any
selectedKeys?: 'all' | Iterable<Key>
selectionBehavior?: SelectionBehavior = "toggle"
selectionMode?: SelectionMode
shouldSelectOnPressUp?: boolean
slot?: string | null
sortDescriptor?: SortDescriptor
style?: StyleOrFunction<TableRenderProps>
} /react-aria-components:Row Row <T extends {}> {
children?: ReactNode | ({}) => ReactElement
- className?: ClassNameOrFunction<RowRenderProps>
+ className?: ClassNameOrFunction<RowRenderProps> = 'react-aria-Row'
columns?: Iterable<{}>
dependencies?: ReadonlyArray<any>
download?: boolean | string
href?: Href
id?: Key
isDisabled?: boolean
onAction?: () => void
onClick?: (MouseEvent<FocusableElement>) => void
onHoverChange?: (boolean) => void
onHoverEnd?: (HoverEvent) => void
onHoverStart?: (HoverEvent) => void
onPress?: (PressEvent) => void
onPressChange?: (boolean) => void
onPressEnd?: (PressEvent) => void
onPressStart?: (PressEvent) => void
onPressUp?: (PressEvent) => void
ping?: string
referrerPolicy?: HTMLAttributeReferrerPolicy
rel?: string
routerOptions?: RouterOptions
style?: StyleOrFunction<RowRenderProps>
target?: HTMLAttributeAnchorTarget
textValue?: string
value?: {}
} /react-aria-components:Cell Cell {
children?: ChildrenOrFunction<CellRenderProps>
- className?: ClassNameOrFunction<CellRenderProps>
+ className?: ClassNameOrFunction<CellRenderProps> = 'react-aria-Cell'
colSpan?: number
id?: Key
style?: StyleOrFunction<CellRenderProps>
textValue?: string /react-aria-components:Column Column {
allowsSorting?: boolean
children?: ChildrenOrFunction<ColumnRenderProps>
- className?: ClassNameOrFunction<ColumnRenderProps>
+ className?: ClassNameOrFunction<ColumnRenderProps> = 'react-aria-Column'
defaultWidth?: ColumnSize | null
id?: Key
isRowHeader?: boolean
maxWidth?: ColumnStaticSize | null
style?: StyleOrFunction<ColumnRenderProps>
textValue?: string
width?: ColumnSize | null
} /react-aria-components:ColumnResizer ColumnResizer {
aria-label?: string
children?: ChildrenOrFunction<ColumnResizerRenderProps>
- className?: ClassNameOrFunction<ColumnResizerRenderProps>
+ className?: ClassNameOrFunction<ColumnResizerRenderProps> = 'react-aria-ColumnResizer'
onHoverChange?: (boolean) => void
onHoverEnd?: (HoverEvent) => void
onHoverStart?: (HoverEvent) => void
style?: StyleOrFunction<ColumnResizerRenderProps> /react-aria-components:TableHeader TableHeader <T extends {}> {
children?: ReactNode | ({}) => ReactElement
- className?: ClassNameOrFunction<TableHeaderRenderProps>
+ className?: ClassNameOrFunction<TableHeaderRenderProps> = 'react-aria-TableHeader'
columns?: Iterable<{}>
dependencies?: ReadonlyArray<any>
onHoverChange?: (boolean) => void
onHoverEnd?: (HoverEvent) => void
style?: StyleOrFunction<TableHeaderRenderProps>
} /react-aria-components:TableBody TableBody <T extends {}> {
children?: ReactNode | (T) => ReactNode
- className?: ClassNameOrFunction<TableBodyRenderProps>
+ className?: ClassNameOrFunction<TableBodyRenderProps> = 'react-aria-TableBody'
dependencies?: ReadonlyArray<any>
items?: Iterable<T>
renderEmptyState?: (TableBodyRenderProps) => ReactNode
style?: StyleOrFunction<TableBodyRenderProps> /react-aria-components:ResizableTableContainer ResizableTableContainer {
children?: ReactNode
- className?: string
+ className?: string = 'react-aria-ResizableTableContainer'
id?: string
onResize?: (Map<Key, ColumnSize>) => void
onResizeEnd?: (Map<Key, ColumnSize>) => void
onResizeStart?: (Map<Key, ColumnSize>) => void
} /react-aria-components:Tabs Tabs {
aria-describedby?: string
aria-details?: string
aria-label?: string
aria-labelledby?: string
children?: ChildrenOrFunction<TabsRenderProps>
- className?: ClassNameOrFunction<TabsRenderProps>
+ className?: ClassNameOrFunction<TabsRenderProps> = 'react-aria-Tabs'
defaultSelectedKey?: Key
disabledKeys?: Iterable<Key>
id?: string
isDisabled?: boolean
onSelectionChange?: (Key) => void
orientation?: Orientation = 'horizontal'
selectedKey?: Key | null
slot?: string | null
style?: StyleOrFunction<TabsRenderProps>
} /react-aria-components:TabList TabList <T extends {}> {
aria-describedby?: string
aria-details?: string
aria-label?: string
aria-labelledby?: string
children?: ReactNode | (T) => ReactNode
- className?: ClassNameOrFunction<TabListRenderProps>
+ className?: ClassNameOrFunction<TabListRenderProps> = 'react-aria-TabList'
dependencies?: ReadonlyArray<any>
items?: Iterable<T>
style?: StyleOrFunction<TabListRenderProps>
} /react-aria-components:TabPanel TabPanel {
aria-describedby?: string
aria-details?: string
aria-label?: string
aria-labelledby?: string
children?: ChildrenOrFunction<TabPanelRenderProps>
- className?: ClassNameOrFunction<TabPanelRenderProps>
+ className?: ClassNameOrFunction<TabPanelRenderProps> = 'react-aria-TabPanel'
id?: Key
shouldForceMount?: boolean = false
style?: StyleOrFunction<TabPanelRenderProps>
} /react-aria-components:Tab Tab {
aria-describedby?: string
aria-details?: string
aria-label?: string
aria-labelledby?: string
children?: ChildrenOrFunction<TabRenderProps>
- className?: ClassNameOrFunction<TabRenderProps>
+ className?: ClassNameOrFunction<TabRenderProps> = 'react-aria-Tab'
download?: boolean | string
href?: Href
hrefLang?: string
id?: Key
onClick?: (MouseEvent<FocusableElement>) => void
onHoverChange?: (boolean) => void
onHoverEnd?: (HoverEvent) => void
onHoverStart?: (HoverEvent) => void
onPress?: (PressEvent) => void
onPressChange?: (boolean) => void
onPressEnd?: (PressEvent) => void
onPressStart?: (PressEvent) => void
onPressUp?: (PressEvent) => void
ping?: string
referrerPolicy?: HTMLAttributeReferrerPolicy
rel?: string
routerOptions?: RouterOptions
style?: StyleOrFunction<TabRenderProps>
target?: HTMLAttributeAnchorTarget
} /react-aria-components:TagGroup TagGroup {
aria-describedby?: string
aria-details?: string
aria-label?: string
aria-labelledby?: string
children?: ReactNode
- className?: string
+ className?: string = 'react-aria-TagGroup'
defaultSelectedKeys?: 'all' | Iterable<Key>
disabledKeys?: Iterable<Key>
disallowEmptySelection?: boolean
escapeKeyBehavior?: 'clearSelection' | 'none' = 'clearSelection'
onRemove?: (Set<Key>) => void
onSelectionChange?: (Selection) => void
selectedKeys?: 'all' | Iterable<Key>
selectionBehavior?: SelectionBehavior
selectionMode?: SelectionMode
shouldSelectOnPressUp?: boolean
slot?: string | null
style?: CSSProperties
} /react-aria-components:TagList TagList <T extends {}> {
children?: ReactNode | (T) => ReactNode
- className?: ClassNameOrFunction<TagListRenderProps>
+ className?: ClassNameOrFunction<TagListRenderProps> = 'react-aria-TagList'
dependencies?: ReadonlyArray<any>
items?: Iterable<T>
renderEmptyState?: (TagListRenderProps) => ReactNode
style?: StyleOrFunction<TagListRenderProps> /react-aria-components:Tag Tag {
children?: ChildrenOrFunction<TagRenderProps>
- className?: ClassNameOrFunction<TagRenderProps>
+ className?: ClassNameOrFunction<TagRenderProps> = 'react-aria-Tag'
download?: boolean | string
href?: Href
hrefLang?: string
id?: Key
onClick?: (MouseEvent<FocusableElement>) => void
onHoverChange?: (boolean) => void
onHoverEnd?: (HoverEvent) => void
onHoverStart?: (HoverEvent) => void
onPress?: (PressEvent) => void
onPressChange?: (boolean) => void
onPressEnd?: (PressEvent) => void
onPressStart?: (PressEvent) => void
onPressUp?: (PressEvent) => void
ping?: string
referrerPolicy?: HTMLAttributeReferrerPolicy
rel?: string
routerOptions?: RouterOptions
style?: StyleOrFunction<TagRenderProps>
target?: HTMLAttributeAnchorTarget
textValue?: string
} /react-aria-components:TextArea TextArea extends TextareaHTMLAttributes {
- className?: ClassNameOrFunction<InputRenderProps>
+ className?: ClassNameOrFunction<InputRenderProps> = 'react-aria-TextArea'
onHoverChange?: (boolean) => void
onHoverEnd?: (HoverEvent) => void
onHoverStart?: (HoverEvent) => void
style?: StyleOrFunction<InputRenderProps> /react-aria-components:TextField TextField {
aria-activedescendant?: string
aria-autocomplete?: 'none' | 'inline' | 'list' | 'both'
aria-controls?: string
aria-describedby?: 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
children?: ChildrenOrFunction<TextFieldRenderProps>
- className?: ClassNameOrFunction<TextFieldRenderProps>
+ className?: ClassNameOrFunction<TextFieldRenderProps> = 'react-aria-TextField'
defaultValue?: string
enterKeyHint?: 'enter' | 'done' | 'go' | 'next' | 'previous' | 'search' | 'send'
excludeFromTabOrder?: boolean
form?: string
inputMode?: 'none' | 'text' | 'tel' | 'url' | 'email' | 'numeric' | 'decimal' | 'search'
isDisabled?: boolean
isInvalid?: boolean
isReadOnly?: boolean
isRequired?: boolean
maxLength?: number
minLength?: number
name?: string
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
slot?: string | null
spellCheck?: string
style?: StyleOrFunction<TextFieldRenderProps>
type?: 'text' | 'search' | 'url' | 'tel' | 'email' | 'password' | (string & {
}) = 'text'
validate?: (string) => ValidationError | boolean | null | undefined
validationBehavior?: 'native' | 'aria' = 'native'
value?: string
} /react-aria-components:UNSTABLE_Toast UNSTABLE_Toast <T> {
aria-describedby?: string
aria-details?: string
aria-label?: string
aria-labelledby?: string
children?: ChildrenOrFunction<ToastRenderProps<T>>
- className?: ClassNameOrFunction<ToastRenderProps<T>>
+ className?: ClassNameOrFunction<ToastRenderProps<T>> = 'react-aria-Toast'
style?: StyleOrFunction<ToastRenderProps<T>>
toast: QueuedToast<T>
} /react-aria-components:UNSTABLE_ToastList UNSTABLE_ToastList <T> {
aria-describedby?: string
aria-details?: string
aria-label?: string = "Notifications"
aria-labelledby?: string
children: ({
toast: QueuedToast<T>
}) => ReactElement
- className?: ClassNameOrFunction<ToastRegionRenderProps<T>>
+ className?: ClassNameOrFunction<ToastRegionRenderProps<T>> = 'react-aria-ToastRegion'
style?: StyleOrFunction<ToastRegionRenderProps<T>>
} /react-aria-components:UNSTABLE_ToastRegion UNSTABLE_ToastRegion <T> {
aria-describedby?: string
aria-details?: string
aria-label?: string = "Notifications"
aria-labelledby?: string
children: ReactNode | ({
toast: QueuedToast<T>
}) => ReactElement
- className?: ClassNameOrFunction<ToastRegionRenderProps<T>>
+ className?: ClassNameOrFunction<ToastRegionRenderProps<T>> = 'react-aria-ToastRegion'
queue: ToastQueue<T>
style?: StyleOrFunction<ToastRegionRenderProps<T>>
} /react-aria-components:ToggleButton ToggleButton {
aria-controls?: string
aria-describedby?: string
aria-details?: string
aria-disabled?: boolean | 'true' | 'false'
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?: ChildrenOrFunction<ToggleButtonRenderProps>
- className?: ClassNameOrFunction<ToggleButtonRenderProps>
+ className?: ClassNameOrFunction<ToggleButtonRenderProps> = 'react-aria-ToggleButton'
defaultSelected?: boolean
excludeFromTabOrder?: boolean
id?: Key
isDisabled?: boolean
onBlur?: (FocusEvent<Target>) => void
onChange?: (boolean) => void
onClick?: (MouseEvent<FocusableElement>) => 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
preventFocusOnPress?: boolean
slot?: string | null
style?: StyleOrFunction<ToggleButtonRenderProps>
} /react-aria-components:ToggleButtonGroup ToggleButtonGroup {
aria-describedby?: string
aria-details?: string
aria-label?: string
aria-labelledby?: string
children?: ChildrenOrFunction<ToggleButtonGroupRenderProps>
- className?: ClassNameOrFunction<ToggleButtonGroupRenderProps>
+ className?: ClassNameOrFunction<ToggleButtonGroupRenderProps> = 'react-aria-ToggleButtonGroup'
defaultSelectedKeys?: Iterable<Key>
disallowEmptySelection?: boolean
isDisabled?: boolean
onSelectionChange?: (Set<Key>) => void
selectedKeys?: Iterable<Key>
selectionMode?: 'single' | 'multiple' = 'single'
slot?: string | null
style?: StyleOrFunction<ToggleButtonGroupRenderProps>
} /react-aria-components:Toolbar Toolbar {
aria-describedby?: string
aria-details?: string
aria-label?: string
aria-labelledby?: string
children?: ChildrenOrFunction<ToolbarRenderProps>
- className?: ClassNameOrFunction<ToolbarRenderProps>
+ className?: ClassNameOrFunction<ToolbarRenderProps> = 'react-aria-Toolbar'
orientation?: Orientation = 'horizontal'
slot?: string | null
style?: StyleOrFunction<ToolbarRenderProps>
} /react-aria-components:Tooltip Tooltip {
aria-describedby?: string
aria-details?: string
aria-label?: string
aria-labelledby?: string
arrowBoundaryOffset?: number = 0
children?: ChildrenOrFunction<TooltipRenderProps>
- className?: ClassNameOrFunction<TooltipRenderProps>
+ className?: ClassNameOrFunction<TooltipRenderProps> = 'react-aria-Tooltip'
containerPadding?: number = 12
crossOffset?: number = 0
defaultOpen?: boolean
isEntering?: boolean
isOpen?: boolean
offset?: number = 0
onOpenChange?: (boolean) => void
placement?: Placement = 'top'
shouldFlip?: boolean = true
style?: StyleOrFunction<TooltipRenderProps>
triggerRef?: RefObject<Element | null>
} /react-aria-components:TreeLoadMoreItem TreeLoadMoreItem <T extends {}> {
children?: ChildrenOrFunction<TreeLoadMoreItemRenderProps>
- className?: ClassNameOrFunction<TreeLoadMoreItemRenderProps>
+ className?: ClassNameOrFunction<TreeLoadMoreItemRenderProps> = 'react-aria-TreeLoadMoreItem'
isLoading?: boolean
onLoadMore?: () => any
scrollOffset?: number = 1
style?: StyleOrFunction<TreeLoadMoreItemRenderProps> /react-aria-components:Tree Tree <T extends {}> {
aria-describedby?: string
aria-details?: string
aria-label?: string
aria-labelledby?: string
autoFocus?: boolean | FocusStrategy
children?: ReactNode | ({}) => ReactNode
- className?: ClassNameOrFunction<TreeRenderProps>
+ className?: ClassNameOrFunction<TreeRenderProps> = 'react-aria-Tree'
defaultExpandedKeys?: Iterable<Key>
defaultSelectedKeys?: 'all' | Iterable<Key>
dependencies?: ReadonlyArray<any>
disabledBehavior?: DisabledBehavior = 'all'
disallowEmptySelection?: boolean
dragAndDropHooks?: DragAndDropHooks<NoInfer<{}>>
escapeKeyBehavior?: 'clearSelection' | 'none' = 'clearSelection'
expandedKeys?: Iterable<Key>
id?: string
items?: Iterable<T>
onAction?: (Key) => void
onExpandedChange?: (Set<Key>) => any
onSelectionChange?: (Selection) => void
renderEmptyState?: (TreeEmptyStateRenderProps) => ReactNode
selectedKeys?: 'all' | Iterable<Key>
selectionBehavior?: SelectionBehavior = "toggle"
selectionMode?: SelectionMode
shouldSelectOnPressUp?: boolean
slot?: string | null
style?: StyleOrFunction<TreeRenderProps>
} /react-aria-components:TreeItem TreeItem <T extends {}> {
aria-label?: string
children: ReactNode
- className?: ClassNameOrFunction<TreeItemRenderProps>
+ className?: ClassNameOrFunction<TreeItemRenderProps> = 'react-aria-TreeItem'
download?: boolean | string
hasChildItems?: boolean
href?: Href
hrefLang?: string
isDisabled?: boolean
onAction?: () => void
onClick?: (MouseEvent<FocusableElement>) => void
onHoverChange?: (boolean) => void
onHoverEnd?: (HoverEvent) => void
onHoverStart?: (HoverEvent) => void
onPress?: (PressEvent) => void
onPressChange?: (boolean) => void
onPressEnd?: (PressEvent) => void
onPressStart?: (PressEvent) => void
onPressUp?: (PressEvent) => void
ping?: string
referrerPolicy?: HTMLAttributeReferrerPolicy
rel?: string
routerOptions?: RouterOptions
style?: StyleOrFunction<TreeItemRenderProps>
target?: HTMLAttributeAnchorTarget
textValue: string
value?: {}
} /react-aria-components:TreeItemContent TreeItemContent {
- children?: ChildrenOrFunction<T>
+ children: ChildrenOrFunction<TreeItemContentRenderProps>
} /react-aria-components:DropIndicator DropIndicator {
children?: ChildrenOrFunction<DropIndicatorRenderProps>
- className?: ClassNameOrFunction<DropIndicatorRenderProps>
+ className?: ClassNameOrFunction<DropIndicatorRenderProps> = 'react-aria-DropIndicator'
style?: StyleOrFunction<DropIndicatorRenderProps>
target: DropTarget
} /react-aria-components:BreadcrumbsProps BreadcrumbsProps <T> {
aria-describedby?: string
aria-details?: string
aria-label?: string
aria-labelledby?: string
children?: ReactNode | (T) => ReactNode
- className?: string
+ className?: string = 'react-aria-Breadcrumbs'
dependencies?: ReadonlyArray<any>
id?: string
isDisabled?: boolean
items?: Iterable<T>
slot?: string | null
style?: CSSProperties
} /react-aria-components:BreadcrumbProps BreadcrumbProps {
children?: ChildrenOrFunction<BreadcrumbRenderProps>
- className?: ClassNameOrFunction<BreadcrumbRenderProps>
+ className?: ClassNameOrFunction<BreadcrumbRenderProps> = 'react-aria-Breadcrumb'
id?: Key
style?: StyleOrFunction<BreadcrumbRenderProps>
} /react-aria-components:ButtonProps ButtonProps {
aria-controls?: string
aria-current?: boolean | 'true' | 'false' | 'page' | 'step' | 'location' | 'date' | 'time'
aria-describedby?: string
aria-details?: string
aria-disabled?: boolean | 'true' | 'false'
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?: ChildrenOrFunction<ButtonRenderProps>
- className?: ClassNameOrFunction<ButtonRenderProps>
+ className?: ClassNameOrFunction<ButtonRenderProps> = 'react-aria-Button'
excludeFromTabOrder?: boolean
form?: string
formAction?: string
formEncType?: string
formNoValidate?: boolean
formTarget?: string
id?: string
isDisabled?: boolean
isPending?: boolean
name?: string
onBlur?: (FocusEvent<Target>) => void
onClick?: (MouseEvent<FocusableElement>) => 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
preventFocusOnPress?: boolean
slot?: string | null
style?: StyleOrFunction<ButtonRenderProps>
type?: 'button' | 'submit' | 'reset' = 'button'
value?: string
} /react-aria-components:CalendarCellProps CalendarCellProps {
children?: ChildrenOrFunction<CalendarCellRenderProps>
- className?: ClassNameOrFunction<CalendarCellRenderProps>
+ className?: ClassNameOrFunction<CalendarCellRenderProps> = 'react-aria-CalendarCell'
date: CalendarDate
onHoverChange?: (boolean) => void
onHoverEnd?: (HoverEvent) => void
onHoverStart?: (HoverEvent) => void
} /react-aria-components:CalendarProps CalendarProps <T extends DateValue> {
aria-describedby?: string
aria-details?: string
aria-label?: string
aria-labelledby?: string
autoFocus?: boolean = false
children?: ChildrenOrFunction<CalendarRenderProps>
- className?: ClassNameOrFunction<CalendarRenderProps>
+ className?: ClassNameOrFunction<CalendarRenderProps> = 'react-aria-Calendar'
createCalendar?: (CalendarIdentifier) => Calendar
defaultFocusedValue?: DateValue | null
defaultValue?: DateValue | null
firstDayOfWeek?: 'sun' | 'mon' | 'tue' | 'wed' | 'thu' | 'fri' | 'sat'
id?: string
isDateUnavailable?: (DateValue) => boolean
isDisabled?: boolean = false
isInvalid?: boolean
isReadOnly?: boolean = false
maxValue?: DateValue | null
minValue?: DateValue | null
onChange?: (MappedDateValue<DateValue>) => void
onFocusChange?: (CalendarDate) => void
pageBehavior?: PageBehavior = visible
selectionAlignment?: 'start' | 'center' | 'end' = 'center'
slot?: string | null
style?: StyleOrFunction<CalendarRenderProps>
value?: DateValue | null
visibleDuration?: DateDuration = {months: 1}
} /react-aria-components:CalendarGridProps CalendarGridProps {
children?: ReactElement | Array<ReactElement> | (CalendarDate) => ReactElement
- className?: string
+ className?: string = 'react-aria-CalendarGrid'
offset?: DateDuration
style?: CSSProperties
weekdayStyle?: 'narrow' | 'short' | 'long' = "narrow"
} /react-aria-components:CalendarGridHeaderProps CalendarGridHeaderProps {
children: (string) => ReactElement
- className?: string
+ className?: string = 'react-aria-CalendarGridHeader'
style?: CSSProperties
} /react-aria-components:CalendarGridBodyProps CalendarGridBodyProps {
children: (CalendarDate) => ReactElement
- className?: string
+ className?: string = 'react-aria-CalendarGridBody'
style?: CSSProperties
} /react-aria-components:CalendarHeaderCellProps CalendarHeaderCellProps {
children?: ReactNode
- className?: string
+ className?: string = 'react-aria-CalendarHeaderCell'
id?: string
style?: CSSProperties
} /react-aria-components:RangeCalendarProps RangeCalendarProps <T extends DateValue> {
allowsNonContiguousRanges?: boolean
aria-describedby?: string
aria-details?: string
aria-label?: string
aria-labelledby?: string
autoFocus?: boolean = false
children?: ChildrenOrFunction<RangeCalendarRenderProps>
- className?: ClassNameOrFunction<RangeCalendarRenderProps>
+ className?: ClassNameOrFunction<RangeCalendarRenderProps> = 'react-aria-RangeCalendar'
createCalendar?: (CalendarIdentifier) => Calendar
defaultFocusedValue?: DateValue | null
defaultValue?: RangeValue<DateValue> | null
firstDayOfWeek?: 'sun' | 'mon' | 'tue' | 'wed' | 'thu' | 'fri' | 'sat'
id?: string
isDateUnavailable?: (DateValue) => boolean
isDisabled?: boolean = false
isInvalid?: boolean
isReadOnly?: boolean = false
maxValue?: DateValue | null
minValue?: DateValue | null
onChange?: (RangeValue<MappedDateValue<DateValue>>) => void
onFocusChange?: (CalendarDate) => void
pageBehavior?: PageBehavior = visible
selectionAlignment?: 'start' | 'center' | 'end' = 'center'
slot?: string | null
style?: StyleOrFunction<RangeCalendarRenderProps>
value?: RangeValue<DateValue> | null
visibleDuration?: DateDuration = {months: 1}
} /react-aria-components:CheckboxGroupProps CheckboxGroupProps {
aria-describedby?: string
aria-details?: string
aria-errormessage?: string
aria-label?: string
aria-labelledby?: string
children?: ChildrenOrFunction<CheckboxGroupRenderProps>
- className?: ClassNameOrFunction<CheckboxGroupRenderProps>
+ className?: ClassNameOrFunction<CheckboxGroupRenderProps> = 'react-aria-CheckboxGroup'
defaultValue?: Array<string>
form?: string
id?: string
isDisabled?: boolean
isReadOnly?: boolean
isRequired?: boolean
name?: string
onBlur?: (FocusEvent<Target>) => void
onChange?: (T) => void
onFocus?: (FocusEvent<Target>) => void
onFocusChange?: (boolean) => void
slot?: string | null
style?: StyleOrFunction<CheckboxGroupRenderProps>
validate?: (Array<string>) => ValidationError | boolean | null | undefined
validationBehavior?: 'native' | 'aria' = 'native'
value?: Array<string>
} /react-aria-components:CheckboxProps CheckboxProps {
aria-controls?: string
aria-describedby?: string
aria-details?: string
aria-errormessage?: string
aria-label?: string
aria-labelledby?: string
autoFocus?: boolean
children?: ChildrenOrFunction<CheckboxRenderProps>
- className?: ClassNameOrFunction<CheckboxRenderProps>
+ className?: ClassNameOrFunction<CheckboxRenderProps> = 'react-aria-Checkbox'
defaultSelected?: boolean
excludeFromTabOrder?: boolean
form?: string
id?: string
isDisabled?: boolean
isIndeterminate?: boolean
isInvalid?: boolean
isReadOnly?: boolean
isRequired?: boolean
isSelected?: boolean
name?: string
onBlur?: (FocusEvent<Target>) => void
onChange?: (boolean) => void
onClick?: (MouseEvent<FocusableElement>) => 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
slot?: string | null
style?: StyleOrFunction<CheckboxRenderProps>
validate?: (boolean) => ValidationError | boolean | null | undefined
validationBehavior?: 'native' | 'aria' = 'native'
value?: string
} /react-aria-components:ColorAreaProps ColorAreaProps {
aria-describedby?: string
aria-details?: string
aria-label?: string
aria-labelledby?: string
children?: ChildrenOrFunction<ColorAreaRenderProps>
- className?: ClassNameOrFunction<ColorAreaRenderProps>
+ className?: ClassNameOrFunction<ColorAreaRenderProps> = 'react-aria-ColorArea'
colorSpace?: ColorSpace
defaultValue?: T
form?: string
id?: string
onChange?: (Color) => void
onChangeEnd?: (Color) => void
slot?: string | null
style?: StyleOrFunction<ColorAreaRenderProps>
value?: T
xChannel?: ColorChannel
xName?: string
yChannel?: ColorChannel
yName?: string
} /react-aria-components:ColorFieldProps ColorFieldProps {
aria-describedby?: string
aria-details?: string
aria-errormessage?: string
aria-label?: string
aria-labelledby?: string
autoFocus?: boolean
channel?: ColorChannel
children?: ChildrenOrFunction<ColorFieldRenderProps>
- className?: ClassNameOrFunction<ColorFieldRenderProps>
+ className?: ClassNameOrFunction<ColorFieldRenderProps> = 'react-aria-ColorField'
colorSpace?: ColorSpace
defaultValue?: T
excludeFromTabOrder?: boolean
form?: string
isDisabled?: boolean
isInvalid?: boolean
isReadOnly?: boolean
isRequired?: boolean
isWheelDisabled?: boolean
name?: string
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>
slot?: string | null
style?: StyleOrFunction<ColorFieldRenderProps>
validate?: (Color | null) => ValidationError | boolean | null | undefined
validationBehavior?: 'native' | 'aria' = 'native'
value?: T
} /react-aria-components:ColorSliderProps ColorSliderProps {
aria-describedby?: string
aria-details?: string
aria-label?: string
aria-labelledby?: string
channel: ColorChannel
children?: ChildrenOrFunction<ColorSliderRenderProps>
- className?: ClassNameOrFunction<ColorSliderRenderProps>
+ className?: ClassNameOrFunction<ColorSliderRenderProps> = 'react-aria-ColorSlider'
colorSpace?: ColorSpace
defaultValue?: T
form?: string
id?: string
name?: string
onChange?: (Color) => void
onChangeEnd?: (Color) => void
orientation?: Orientation = 'horizontal'
slot?: string | null
style?: StyleOrFunction<ColorSliderRenderProps>
value?: T
} /react-aria-components:ColorSwatchProps ColorSwatchProps {
aria-describedby?: string
aria-details?: string
aria-label?: string
aria-labelledby?: string
- className?: ClassNameOrFunction<ColorSwatchRenderProps>
+ className?: ClassNameOrFunction<ColorSwatchRenderProps> = 'react-aria-ColorSwatch'
color?: string | Color
colorName?: string
id?: string
slot?: string | null
} /react-aria-components:ColorSwatchPickerProps ColorSwatchPickerProps {
aria-describedby?: string
aria-details?: string
aria-label?: string
aria-labelledby?: string
children?: ReactNode
- className?: ClassNameOrFunction<ColorSwatchPickerRenderProps>
+ className?: ClassNameOrFunction<ColorSwatchPickerRenderProps> = 'react-aria-ColorSwatchPicker'
defaultValue?: string | Color
layout?: 'grid' | 'stack' = 'grid'
onChange?: (Color) => void
style?: StyleOrFunction<ColorSwatchPickerRenderProps>
} /react-aria-components:ColorSwatchPickerItemProps ColorSwatchPickerItemProps {
children?: ChildrenOrFunction<ColorSwatchPickerItemRenderProps>
- className?: ClassNameOrFunction<ColorSwatchPickerItemRenderProps>
+ className?: ClassNameOrFunction<ColorSwatchPickerItemRenderProps> = 'react-aria-ColorSwatchPickerItem'
color: string | Color
isDisabled?: boolean
onClick?: (MouseEvent<FocusableElement>) => void
onHoverChange?: (boolean) => void
onHoverStart?: (HoverEvent) => void
onPress?: (PressEvent) => void
onPressChange?: (boolean) => void
onPressEnd?: (PressEvent) => void
onPressStart?: (PressEvent) => void
onPressUp?: (PressEvent) => void
style?: StyleOrFunction<ColorSwatchPickerItemRenderProps>
} /react-aria-components:ColorThumbProps ColorThumbProps {
children?: ChildrenOrFunction<ColorThumbRenderProps>
- className?: ClassNameOrFunction<ColorThumbRenderProps>
+ className?: ClassNameOrFunction<ColorThumbRenderProps> = 'react-aria-ColorThumb'
onHoverChange?: (boolean) => void
onHoverEnd?: (HoverEvent) => void
onHoverStart?: (HoverEvent) => void
style?: StyleOrFunction<ColorThumbRenderProps> /react-aria-components:ColorPickerProps ColorPickerProps {
- children?: ChildrenOrFunction<T>
+ children: ChildrenOrFunction<ColorPickerRenderProps>
defaultValue?: string | Color
onChange?: (Color) => void
slot?: string | null
value?: string | Color /react-aria-components:ColorWheelProps ColorWheelProps {
aria-describedby?: string
aria-details?: string
aria-label?: string
aria-labelledby?: string
children?: ChildrenOrFunction<ColorWheelRenderProps>
- className?: ClassNameOrFunction<ColorWheelRenderProps>
+ className?: ClassNameOrFunction<ColorWheelRenderProps> = 'react-aria-ColorWheel'
defaultValue?: string | Color = 'hsl(0, 100%, 50%)'
form?: string
id?: string
innerRadius: number
name?: string
onChange?: (Color) => void
onChangeEnd?: (Color) => void
outerRadius: number
slot?: string | null
style?: StyleOrFunction<ColorWheelRenderProps>
value?: T
} /react-aria-components:ColorWheelTrackProps ColorWheelTrackProps {
- className?: ClassNameOrFunction<ColorWheelTrackRenderProps>
+ className?: ClassNameOrFunction<ColorWheelTrackRenderProps> = 'react-aria-ColorWheelTrack'
style?: StyleOrFunction<ColorWheelTrackRenderProps>
} /react-aria-components:ComboBoxProps ComboBoxProps <T extends {}> {
allowsCustomValue?: boolean
allowsEmptyCollection?: boolean
aria-describedby?: string
aria-details?: string
aria-label?: string
aria-labelledby?: string
autoFocus?: boolean
children?: ChildrenOrFunction<ComboBoxRenderProps>
- className?: ClassNameOrFunction<ComboBoxRenderProps>
+ className?: ClassNameOrFunction<ComboBoxRenderProps> = 'react-aria-ComboBox'
defaultFilter?: (string, string) => boolean
defaultInputValue?: string
defaultItems?: Iterable<T>
defaultSelectedKey?: Key
form?: string
formValue?: 'text' | 'key' = 'key'
id?: string
inputValue?: string
isDisabled?: boolean
isInvalid?: boolean
isReadOnly?: boolean
isRequired?: boolean
items?: Iterable<T>
menuTrigger?: MenuTriggerAction = 'input'
name?: string
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
shouldFocusWrap?: boolean
slot?: string | null
style?: StyleOrFunction<ComboBoxRenderProps>
validate?: (ComboBoxValidationValue) => ValidationError | boolean | null | undefined
validationBehavior?: 'native' | 'aria' = 'native'
} /react-aria-components:DateFieldProps DateFieldProps <T extends DateValue> {
aria-describedby?: string
aria-details?: string
aria-label?: string
aria-labelledby?: string
autoComplete?: string
autoFocus?: boolean
children?: ChildrenOrFunction<DateFieldRenderProps>
- className?: ClassNameOrFunction<DateFieldRenderProps>
+ className?: ClassNameOrFunction<DateFieldRenderProps> = 'react-aria-DateField'
defaultValue?: DateValue | null
form?: string
granularity?: Granularity
hideTimeZone?: boolean = false
id?: string
isDateUnavailable?: (DateValue) => boolean
isDisabled?: boolean
isInvalid?: boolean
isReadOnly?: boolean
isRequired?: boolean
maxValue?: DateValue | null
minValue?: DateValue | null
name?: string
onBlur?: (FocusEvent<Target>) => void
onChange?: (MappedDateValue<DateValue> | null) => void
onFocus?: (FocusEvent<Target>) => void
onFocusChange?: (boolean) => void
onKeyDown?: (KeyboardEvent) => void
onKeyUp?: (KeyboardEvent) => void
placeholderValue?: DateValue | null
shouldForceLeadingZeros?: boolean
slot?: string | null
style?: StyleOrFunction<DateFieldRenderProps>
validate?: (MappedDateValue<DateValue>) => ValidationError | boolean | null | undefined
validationBehavior?: 'native' | 'aria' = 'native'
value?: DateValue | null
} /react-aria-components:DateInputProps DateInputProps {
children: (DateSegment) => ReactElement
- className?: ClassNameOrFunction<DateInputRenderProps>
+ className?: ClassNameOrFunction<DateInputRenderProps> = 'react-aria-DateInput'
slot?: string | null
style?: StyleOrFunction<DateInputRenderProps>
} /react-aria-components:DateSegmentProps DateSegmentProps {
children?: ChildrenOrFunction<DateSegmentRenderProps>
- className?: ClassNameOrFunction<DateSegmentRenderProps>
+ className?: ClassNameOrFunction<DateSegmentRenderProps> = 'react-aria-DateSegment'
onHoverChange?: (boolean) => void
onHoverEnd?: (HoverEvent) => void
onHoverStart?: (HoverEvent) => void
segment: DateSegment
} /react-aria-components:TimeFieldProps TimeFieldProps <T extends TimeValue> {
aria-describedby?: string
aria-details?: string
aria-label?: string
aria-labelledby?: string
autoFocus?: boolean
children?: ChildrenOrFunction<DateFieldRenderProps>
- className?: ClassNameOrFunction<DateFieldRenderProps>
+ className?: ClassNameOrFunction<DateFieldRenderProps> = 'react-aria-TimeField'
defaultValue?: TimeValue | null
form?: string
granularity?: 'hour' | 'minute' | 'second' = 'minute'
hideTimeZone?: boolean
id?: string
isDisabled?: boolean
isInvalid?: boolean
isReadOnly?: boolean
isRequired?: boolean
maxValue?: TimeValue | null
minValue?: TimeValue | null
name?: string
onBlur?: (FocusEvent<Target>) => void
onChange?: (MappedTimeValue<TimeValue> | null) => void
onFocus?: (FocusEvent<Target>) => void
onFocusChange?: (boolean) => void
onKeyDown?: (KeyboardEvent) => void
onKeyUp?: (KeyboardEvent) => void
placeholderValue?: TimeValue
shouldForceLeadingZeros?: boolean
slot?: string | null
style?: StyleOrFunction<DateFieldRenderProps>
validate?: (MappedTimeValue<TimeValue>) => ValidationError | boolean | null | undefined
validationBehavior?: 'native' | 'aria' = 'native'
value?: TimeValue | null
} /react-aria-components:DatePickerProps DatePickerProps <T extends DateValue> {
aria-describedby?: string
aria-details?: string
aria-label?: string
aria-labelledby?: string
autoComplete?: string
autoFocus?: boolean
children?: ChildrenOrFunction<DatePickerRenderProps>
- className?: ClassNameOrFunction<DatePickerRenderProps>
+ className?: ClassNameOrFunction<DatePickerRenderProps> = 'react-aria-DatePicker'
defaultOpen?: boolean
defaultValue?: DateValue | null
firstDayOfWeek?: 'sun' | 'mon' | 'tue' | 'wed' | 'thu' | 'fri' | 'sat'
form?: string
hideTimeZone?: boolean = false
hourCycle?: number | number
id?: string
isDateUnavailable?: (DateValue) => boolean
isDisabled?: boolean
isInvalid?: boolean
isOpen?: boolean
isReadOnly?: boolean
isRequired?: boolean
maxValue?: DateValue | null
minValue?: DateValue | null
name?: string
onBlur?: (FocusEvent<Target>) => void
onChange?: (MappedDateValue<DateValue> | null) => void
onFocus?: (FocusEvent<Target>) => void
onFocusChange?: (boolean) => void
onKeyDown?: (KeyboardEvent) => void
onKeyUp?: (KeyboardEvent) => void
onOpenChange?: (boolean) => void
pageBehavior?: PageBehavior = visible
placeholderValue?: DateValue | null
shouldCloseOnSelect?: boolean | () => boolean = true
shouldForceLeadingZeros?: boolean
slot?: string | null
style?: StyleOrFunction<DatePickerRenderProps>
validate?: (MappedDateValue<DateValue>) => ValidationError | boolean | null | undefined
validationBehavior?: 'native' | 'aria' = 'native'
value?: DateValue | null
} /react-aria-components:DateRangePickerProps DateRangePickerProps <T extends DateValue> {
allowsNonContiguousRanges?: boolean
aria-describedby?: string
aria-details?: string
aria-label?: string
aria-labelledby?: string
autoFocus?: boolean
children?: ChildrenOrFunction<DateRangePickerRenderProps>
- className?: ClassNameOrFunction<DateRangePickerRenderProps>
+ className?: ClassNameOrFunction<DateRangePickerRenderProps> = 'react-aria-DateRangePicker'
defaultOpen?: boolean
defaultValue?: RangeValue<DateValue> | null
endName?: string
firstDayOfWeek?: 'sun' | 'mon' | 'tue' | 'wed' | 'thu' | 'fri' | 'sat'
granularity?: Granularity
hideTimeZone?: boolean = false
hourCycle?: number | number
id?: string
isDateUnavailable?: (DateValue) => boolean
isDisabled?: boolean
isInvalid?: boolean
isOpen?: boolean
isReadOnly?: boolean
isRequired?: boolean
maxValue?: DateValue | null
minValue?: DateValue | null
onBlur?: (FocusEvent<Target>) => void
onChange?: (RangeValue<MappedDateValue<DateValue>> | null) => void
onFocus?: (FocusEvent<Target>) => void
onFocusChange?: (boolean) => void
onKeyDown?: (KeyboardEvent) => void
onKeyUp?: (KeyboardEvent) => void
onOpenChange?: (boolean) => void
pageBehavior?: PageBehavior = visible
placeholderValue?: DateValue | null
shouldCloseOnSelect?: boolean | () => boolean = true
shouldForceLeadingZeros?: boolean
slot?: string | null
startName?: string
style?: StyleOrFunction<DateRangePickerRenderProps>
validate?: (RangeValue<MappedDateValue<DateValue>>) => ValidationError | boolean | null | undefined
validationBehavior?: 'native' | 'aria' = 'native'
value?: RangeValue<DateValue> | null
} /react-aria-components:DialogProps DialogProps {
aria-describedby?: string
aria-details?: string
aria-label?: string
aria-labelledby?: string
children?: ReactNode | (DialogRenderProps) => ReactNode
- className?: string
+ className?: string = 'react-aria-Dialog'
id?: string
role?: 'dialog' | 'alertdialog' = 'dialog'
slot?: string | null
style?: CSSProperties /react-aria-components:DisclosureProps DisclosureProps {
children?: ChildrenOrFunction<DisclosureRenderProps>
- className?: ClassNameOrFunction<DisclosureRenderProps>
+ className?: ClassNameOrFunction<DisclosureRenderProps> = 'react-aria-Disclosure'
defaultExpanded?: boolean
id?: Key
isDisabled?: boolean
isExpanded?: boolean
slot?: string | null
style?: StyleOrFunction<DisclosureRenderProps>
} /react-aria-components:DisclosurePanelProps DisclosurePanelProps {
children: ReactNode
- className?: ClassNameOrFunction<DisclosurePanelRenderProps>
+ className?: ClassNameOrFunction<DisclosurePanelRenderProps> = 'react-aria-DisclosurePanel'
id?: string
role?: 'group' | 'region' = 'group'
style?: StyleOrFunction<DisclosurePanelRenderProps>
} /react-aria-components:DisclosureGroupProps DisclosureGroupProps {
allowsMultipleExpanded?: boolean
children?: ChildrenOrFunction<DisclosureGroupRenderProps>
- className?: ClassNameOrFunction<DisclosureGroupRenderProps>
+ className?: ClassNameOrFunction<DisclosureGroupRenderProps> = 'react-aria-DisclosureGroup'
defaultExpandedKeys?: Iterable<Key>
expandedKeys?: Iterable<Key>
id?: string
isDisabled?: boolean
style?: StyleOrFunction<DisclosureGroupRenderProps>
} /react-aria-components:DropZoneProps DropZoneProps {
aria-describedby?: string
aria-details?: string
aria-label?: string
aria-labelledby?: string
children?: ChildrenOrFunction<DropZoneRenderProps>
- className?: ClassNameOrFunction<DropZoneRenderProps>
+ className?: ClassNameOrFunction<DropZoneRenderProps> = 'react-aria-DropZone'
getDropOperation?: (DragTypes, Array<DropOperation>) => DropOperation
isDisabled?: boolean
onDrop?: (DropEvent) => void
onDropActivate?: (DropActivateEvent) => void
onDropExit?: (DropExitEvent) => void
onDropMove?: (DropMoveEvent) => void
onHoverChange?: (boolean) => void
onHoverEnd?: (HoverEvent) => void
onHoverStart?: (HoverEvent) => void
slot?: string | null
style?: StyleOrFunction<DropZoneRenderProps>
} /react-aria-components:FieldErrorProps FieldErrorProps {
children?: ChildrenOrFunction<FieldErrorRenderProps>
- className?: ClassNameOrFunction<FieldErrorRenderProps>
+ className?: ClassNameOrFunction<FieldErrorRenderProps> = 'react-aria-FieldError'
id?: string
style?: StyleOrFunction<FieldErrorRenderProps>
} /react-aria-components:FormProps FormProps {
action?: string | FormHTMLAttributes<HTMLFormElement>['action']
aria-describedby?: string
aria-details?: string
aria-label?: string
aria-labelledby?: string
autoCapitalize?: 'off' | 'none' | 'on' | 'sentences' | 'words' | 'characters'
autoComplete?: 'off' | 'on'
children?: ReactNode
- className?: string
+ className?: string = 'react-aria-Form'
encType?: 'application/x-www-form-urlencoded' | 'multipart/form-data' | 'text/plain'
id?: string
method?: 'get' | 'post' | 'dialog'
onInvalid?: (FormEvent<HTMLFormElement>) => void
onSubmit?: (FormEvent<HTMLFormElement>) => void
role?: 'search' | 'presentation'
style?: CSSProperties
target?: '_blank' | '_self' | '_parent' | '_top'
validationBehavior?: 'aria' | 'native' = 'native'
validationErrors?: ValidationErrors
} /react-aria-components:GridListProps GridListProps <T> {
aria-describedby?: string
aria-details?: string
aria-label?: string
aria-labelledby?: string
autoFocus?: boolean | FocusStrategy
children?: ReactNode | (T) => ReactNode
- className?: ClassNameOrFunction<GridListRenderProps>
+ className?: ClassNameOrFunction<GridListRenderProps> = 'react-aria-GridList'
defaultSelectedKeys?: 'all' | Iterable<Key>
dependencies?: ReadonlyArray<any>
disabledBehavior?: DisabledBehavior = "all"
disabledKeys?: Iterable<Key>
disallowTypeAhead?: boolean = false
dragAndDropHooks?: DragAndDropHooks<NoInfer<T>>
escapeKeyBehavior?: 'clearSelection' | 'none' = 'clearSelection'
id?: string
items?: Iterable<T>
keyboardNavigationBehavior?: 'arrow' | 'tab' = 'arrow'
layout?: 'stack' | 'grid' = 'stack'
onAction?: (Key) => void
onSelectionChange?: (Selection) => void
renderEmptyState?: (GridListRenderProps) => ReactNode
selectedKeys?: 'all' | Iterable<Key>
selectionBehavior?: SelectionBehavior = "toggle"
selectionMode?: SelectionMode
shouldSelectOnPressUp?: boolean
slot?: string | null
style?: StyleOrFunction<GridListRenderProps>
} /react-aria-components:GridListItemProps GridListItemProps <T = {}> {
children?: ChildrenOrFunction<GridListItemRenderProps>
- className?: ClassNameOrFunction<GridListItemRenderProps>
+ className?: ClassNameOrFunction<GridListItemRenderProps> = 'react-aria-GridListItem'
download?: boolean | string
href?: Href
hrefLang?: string
id?: Key
onAction?: () => void
onClick?: (MouseEvent<FocusableElement>) => void
onHoverChange?: (boolean) => void
onHoverEnd?: (HoverEvent) => void
onHoverStart?: (HoverEvent) => void
onPress?: (PressEvent) => void
onPressChange?: (boolean) => void
onPressEnd?: (PressEvent) => void
onPressStart?: (PressEvent) => void
onPressUp?: (PressEvent) => void
ping?: string
referrerPolicy?: HTMLAttributeReferrerPolicy
rel?: string
routerOptions?: RouterOptions
style?: StyleOrFunction<GridListItemRenderProps>
target?: HTMLAttributeAnchorTarget
textValue?: string
value?: T
} /react-aria-components:GridListLoadMoreItemProps GridListLoadMoreItemProps {
children?: ReactNode
- className?: string
+ className?: string = 'react-aria-GridListLoadMoreItem'
isLoading?: boolean
onLoadMore?: () => any
scrollOffset?: number = 1
style?: CSSProperties /react-aria-components:GroupProps GroupProps {
aria-describedby?: string
aria-details?: string
aria-label?: string
aria-labelledby?: string
children?: ChildrenOrFunction<GroupRenderProps>
- className?: ClassNameOrFunction<GroupRenderProps>
+ className?: ClassNameOrFunction<GroupRenderProps> = 'react-aria-Group'
id?: string
isDisabled?: boolean
isInvalid?: boolean
isReadOnly?: boolean
onHoverEnd?: (HoverEvent) => void
onHoverStart?: (HoverEvent) => void
role?: 'group' | 'region' | 'presentation' = 'group'
slot?: string | null
style?: StyleOrFunction<GroupRenderProps>
} /react-aria-components:InputProps InputProps {
- className?: ClassNameOrFunction<InputRenderProps>
+ className?: ClassNameOrFunction<InputRenderProps> = 'react-aria-Input'
onHoverChange?: (boolean) => void
onHoverEnd?: (HoverEvent) => void
onHoverStart?: (HoverEvent) => void
placeholder?: string
} /react-aria-components:LinkProps LinkProps {
aria-describedby?: string
aria-details?: string
aria-label?: string
aria-labelledby?: string
autoFocus?: boolean
children?: ChildrenOrFunction<LinkRenderProps>
- className?: ClassNameOrFunction<LinkRenderProps>
+ className?: ClassNameOrFunction<LinkRenderProps> = 'react-aria-Link'
download?: boolean | string
href?: Href
hrefLang?: string
isDisabled?: boolean
onClick?: (MouseEvent<FocusableElement>) => 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
slot?: string | null
style?: StyleOrFunction<LinkRenderProps>
target?: HTMLAttributeAnchorTarget
} /react-aria-components:ListBoxProps ListBoxProps <T> {
aria-describedby?: string
aria-details?: string
aria-label?: string
aria-labelledby?: string
autoFocus?: boolean | FocusStrategy
children?: ReactNode | (T) => ReactNode
- className?: ClassNameOrFunction<ListBoxRenderProps>
+ className?: ClassNameOrFunction<ListBoxRenderProps> = 'react-aria-ListBox'
defaultSelectedKeys?: 'all' | Iterable<Key>
dependencies?: ReadonlyArray<any>
disabledKeys?: Iterable<Key>
disallowEmptySelection?: boolean
escapeKeyBehavior?: 'clearSelection' | 'none' = 'clearSelection'
id?: string
items?: Iterable<T>
layout?: 'stack' | 'grid' = 'stack'
onAction?: (Key) => void
onBlur?: (FocusEvent<Target>) => void
onFocus?: (FocusEvent<Target>) => void
onFocusChange?: (boolean) => void
onSelectionChange?: (Selection) => void
orientation?: Orientation = 'vertical'
renderEmptyState?: (ListBoxRenderProps) => ReactNode
selectedKeys?: 'all' | Iterable<Key>
selectionBehavior?: SelectionBehavior = "toggle"
selectionMode?: SelectionMode
shouldFocusOnHover?: boolean
shouldFocusWrap?: boolean
shouldSelectOnPressUp?: boolean
slot?: string | null
style?: StyleOrFunction<ListBoxRenderProps>
} /react-aria-components:ListBoxItemProps ListBoxItemProps <T = {}> {
aria-label?: string
children?: ChildrenOrFunction<ListBoxItemRenderProps>
- className?: ClassNameOrFunction<ListBoxItemRenderProps>
+ className?: ClassNameOrFunction<ListBoxItemRenderProps> = 'react-aria-ListBoxItem'
download?: boolean | string
href?: Href
hrefLang?: string
id?: Key
onAction?: () => void
onClick?: (MouseEvent<FocusableElement>) => void
onHoverChange?: (boolean) => void
onHoverEnd?: (HoverEvent) => void
onHoverStart?: (HoverEvent) => void
onPress?: (PressEvent) => void
onPressChange?: (boolean) => void
onPressEnd?: (PressEvent) => void
onPressStart?: (PressEvent) => void
onPressUp?: (PressEvent) => void
ping?: string
referrerPolicy?: HTMLAttributeReferrerPolicy
rel?: string
routerOptions?: RouterOptions
style?: StyleOrFunction<ListBoxItemRenderProps>
target?: HTMLAttributeAnchorTarget
textValue?: string
value?: T
} /react-aria-components:ListBoxSectionProps ListBoxSectionProps <T> {
aria-label?: string
children?: ReactNode | (T) => ReactElement
- className?: string
+ className?: string = 'react-aria-ListBoxSection'
dependencies?: ReadonlyArray<any>
id?: Key
items?: Iterable<T>
style?: CSSProperties
} /react-aria-components:ListBoxLoadMoreItemProps ListBoxLoadMoreItemProps {
children?: ReactNode
- className?: string
+ className?: string = 'react-aria-ListBoxLoadMoreItem'
isLoading?: boolean
onLoadMore?: () => any
scrollOffset?: number = 1
style?: CSSProperties /react-aria-components:MenuProps MenuProps <T> {
aria-describedby?: string
aria-details?: string
aria-label?: string
aria-labelledby?: string
autoFocus?: boolean | FocusStrategy
children?: ReactNode | (T) => ReactNode
- className?: ClassNameOrFunction<MenuRenderProps>
+ className?: ClassNameOrFunction<MenuRenderProps> = 'react-aria-Menu'
defaultSelectedKeys?: 'all' | Iterable<Key>
dependencies?: ReadonlyArray<any>
disabledKeys?: Iterable<Key>
disallowEmptySelection?: boolean
id?: string
items?: Iterable<T>
onAction?: (Key) => void
onClose?: () => void
onSelectionChange?: (Selection) => void
renderEmptyState?: () => ReactNode
selectedKeys?: 'all' | Iterable<Key>
selectionMode?: SelectionMode
shouldFocusWrap?: boolean
slot?: string | null
style?: StyleOrFunction<MenuRenderProps>
} /react-aria-components:MenuItemProps MenuItemProps <T = {}> {
aria-label?: string
children?: ChildrenOrFunction<MenuItemRenderProps>
- className?: ClassNameOrFunction<MenuItemRenderProps>
+ className?: ClassNameOrFunction<MenuItemRenderProps> = 'react-aria-MenuItem'
download?: boolean | string
href?: Href
hrefLang?: string
id?: Key
onAction?: () => void
onClick?: (MouseEvent<FocusableElement>) => void
onHoverChange?: (boolean) => void
onHoverEnd?: (HoverEvent) => void
onHoverStart?: (HoverEvent) => void
onPress?: (PressEvent) => void
onPressChange?: (boolean) => void
onPressEnd?: (PressEvent) => void
onPressStart?: (PressEvent) => void
onPressUp?: (PressEvent) => void
ping?: string
referrerPolicy?: HTMLAttributeReferrerPolicy
rel?: string
routerOptions?: RouterOptions
style?: StyleOrFunction<MenuItemRenderProps>
target?: HTMLAttributeAnchorTarget
textValue?: string
value?: T
} /react-aria-components:MenuSectionProps MenuSectionProps <T> {
aria-label?: string
children?: ReactNode | (T) => ReactElement
- className?: string
+ className?: string = 'react-aria-MenuSection'
defaultSelectedKeys?: 'all' | Iterable<Key>
dependencies?: ReadonlyArray<any>
disabledKeys?: Iterable<Key>
disallowEmptySelection?: boolean
items?: Iterable<T>
onSelectionChange?: (Selection) => void
selectedKeys?: 'all' | Iterable<Key>
selectionMode?: SelectionMode
style?: CSSProperties
value?: T
} /react-aria-components:MeterProps MeterProps {
aria-describedby?: string
aria-details?: string
aria-label?: string
aria-labelledby?: string
children?: ChildrenOrFunction<MeterRenderProps>
- className?: ClassNameOrFunction<MeterRenderProps>
+ className?: ClassNameOrFunction<MeterRenderProps> = 'react-aria-Meter'
formatOptions?: Intl.NumberFormatOptions = {style: 'percent'}
id?: string
maxValue?: number = 100
minValue?: number = 0
style?: StyleOrFunction<MeterRenderProps>
value?: number = 0
valueLabel?: ReactNode
} /react-aria-components:ModalOverlayProps ModalOverlayProps {
children?: ChildrenOrFunction<ModalRenderProps>
- className?: ClassNameOrFunction<ModalRenderProps>
+ className?: ClassNameOrFunction<ModalRenderProps> = 'react-aria-ModalOverlay'
defaultOpen?: boolean
isDismissable?: boolean = false
isEntering?: boolean
isExiting?: boolean
isOpen?: boolean
onOpenChange?: (boolean) => void
shouldCloseOnInteractOutside?: (Element) => boolean
slot?: string | null
style?: StyleOrFunction<ModalRenderProps>
} /react-aria-components:NumberFieldProps NumberFieldProps {
aria-describedby?: string
aria-details?: string
aria-label?: string
aria-labelledby?: string
autoFocus?: boolean
children?: ChildrenOrFunction<NumberFieldRenderProps>
- className?: ClassNameOrFunction<NumberFieldRenderProps>
+ className?: ClassNameOrFunction<NumberFieldRenderProps> = 'react-aria-NumberField'
decrementAriaLabel?: string
defaultValue?: number
form?: string
formatOptions?: Intl.NumberFormatOptions
incrementAriaLabel?: string
isDisabled?: boolean
isInvalid?: boolean
isReadOnly?: boolean
isRequired?: boolean
isWheelDisabled?: boolean
maxValue?: number
minValue?: number
name?: string
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>
slot?: string | null
step?: number
style?: StyleOrFunction<NumberFieldRenderProps>
validate?: (number) => ValidationError | boolean | null | undefined
validationBehavior?: 'native' | 'aria' = 'native'
value?: number
} /react-aria-components:OverlayArrowProps OverlayArrowProps {
children?: ChildrenOrFunction<OverlayArrowRenderProps>
- className?: ClassNameOrFunction<OverlayArrowRenderProps>
+ className?: ClassNameOrFunction<OverlayArrowRenderProps> = 'react-aria-OverlayArrow'
id?: string
style?: StyleOrFunction<OverlayArrowRenderProps>
} /react-aria-components:PopoverProps PopoverProps {
aria-describedby?: string
aria-details?: string
aria-label?: string
aria-labelledby?: string
arrowBoundaryOffset?: number = 0
arrowRef?: RefObject<Element | null>
boundaryElement?: Element = document.body
children?: ChildrenOrFunction<PopoverRenderProps>
- className?: ClassNameOrFunction<PopoverRenderProps>
+ className?: ClassNameOrFunction<PopoverRenderProps> = 'react-aria-Popover'
containerPadding?: number = 12
crossOffset?: number = 0
defaultOpen?: boolean
isEntering?: boolean
isKeyboardDismissDisabled?: boolean = false
isNonModal?: boolean
isOpen?: boolean
maxHeight?: number
offset?: number = 8
onOpenChange?: (boolean) => void
placement?: Placement = 'bottom'
scrollRef?: RefObject<Element | null> = overlayRef
shouldCloseOnInteractOutside?: (Element) => boolean
shouldFlip?: boolean = true
shouldUpdatePosition?: boolean = true
slot?: string | null
style?: StyleOrFunction<PopoverRenderProps>
trigger?: string
triggerRef?: RefObject<Element | null>
} /react-aria-components:ProgressBarProps ProgressBarProps {
aria-describedby?: string
aria-details?: string
aria-label?: string
aria-labelledby?: string
children?: ChildrenOrFunction<ProgressBarRenderProps>
- className?: ClassNameOrFunction<ProgressBarRenderProps>
+ className?: ClassNameOrFunction<ProgressBarRenderProps> = 'react-aria-ProgressBar'
formatOptions?: Intl.NumberFormatOptions = {style: 'percent'}
id?: string
isIndeterminate?: boolean
maxValue?: number = 100
slot?: string | null
style?: StyleOrFunction<ProgressBarRenderProps>
value?: number = 0
valueLabel?: ReactNode
} /react-aria-components:RadioGroupProps RadioGroupProps {
aria-describedby?: string
aria-details?: string
aria-errormessage?: string
aria-label?: string
aria-labelledby?: string
children?: ChildrenOrFunction<RadioGroupRenderProps>
- className?: ClassNameOrFunction<RadioGroupRenderProps>
+ className?: ClassNameOrFunction<RadioGroupRenderProps> = 'react-aria-RadioGroup'
defaultValue?: string | null
form?: string
id?: string
isDisabled?: boolean
isReadOnly?: boolean
isRequired?: boolean
name?: string
onBlur?: (FocusEvent<Target>) => void
onChange?: (string) => void
onFocus?: (FocusEvent<Target>) => void
onFocusChange?: (boolean) => void
orientation?: Orientation = 'vertical'
slot?: string | null
style?: StyleOrFunction<RadioGroupRenderProps>
validate?: (string | null) => ValidationError | boolean | null | undefined
validationBehavior?: 'native' | 'aria' = 'native'
value?: string | null
} /react-aria-components:RadioProps RadioProps {
aria-describedby?: string
aria-details?: string
aria-label?: string
aria-labelledby?: string
autoFocus?: boolean
children?: ChildrenOrFunction<RadioRenderProps>
- className?: ClassNameOrFunction<RadioRenderProps>
+ className?: ClassNameOrFunction<RadioRenderProps> = 'react-aria-Radio'
id?: string
inputRef?: RefObject<HTMLInputElement | null>
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
slot?: string | null
style?: StyleOrFunction<RadioRenderProps>
value: string
} /react-aria-components:SearchFieldProps SearchFieldProps {
aria-activedescendant?: string
aria-autocomplete?: 'none' | 'inline' | 'list' | 'both'
aria-controls?: string
aria-describedby?: 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
children?: ChildrenOrFunction<SearchFieldRenderProps>
- className?: ClassNameOrFunction<SearchFieldRenderProps>
+ className?: ClassNameOrFunction<SearchFieldRenderProps> = 'react-aria-SearchField'
defaultValue?: string
enterKeyHint?: 'enter' | 'done' | 'go' | 'next' | 'previous' | 'search' | 'send'
excludeFromTabOrder?: boolean
form?: string
inputMode?: 'none' | 'text' | 'tel' | 'url' | 'email' | 'numeric' | 'decimal' | 'search'
isDisabled?: boolean
isInvalid?: boolean
isReadOnly?: boolean
isRequired?: boolean
maxLength?: number
minLength?: number
name?: string
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
slot?: string | null
spellCheck?: string
style?: StyleOrFunction<SearchFieldRenderProps>
type?: 'text' | 'search' | 'url' | 'tel' | 'email' | 'password' | (string & {
}) = 'search'
validate?: (string) => ValidationError | boolean | null | undefined
validationBehavior?: 'native' | 'aria' = 'native'
value?: string
} /react-aria-components:SelectProps SelectProps <M extends SelectionMode = 'single', T extends {} = {
}> {
aria-describedby?: string
aria-details?: string
aria-label?: string
aria-labelledby?: string
autoComplete?: string
autoFocus?: boolean
children?: ChildrenOrFunction<SelectRenderProps>
- className?: ClassNameOrFunction<SelectRenderProps>
+ className?: ClassNameOrFunction<SelectRenderProps> = 'react-aria-Select'
defaultOpen?: boolean
defaultValue?: ValueType<SelectionMode>
disabledKeys?: Iterable<Key>
excludeFromTabOrder?: boolean
id?: string
isDisabled?: boolean
isInvalid?: boolean
isOpen?: boolean
isRequired?: boolean
name?: string
onBlur?: (FocusEvent<Target>) => void
onChange?: (T) => void
onFocus?: (FocusEvent<Target>) => void
onFocusChange?: (boolean) => void
onKeyDown?: (KeyboardEvent) => void
onKeyUp?: (KeyboardEvent) => void
onOpenChange?: (boolean) => void
placeholder?: string = 'Select an item' (localized)
selectionMode?: SelectionMode = 'single'
slot?: string | null
style?: StyleOrFunction<SelectRenderProps>
validate?: (ValidationType<SelectionMode>) => ValidationError | boolean | null | undefined
validationBehavior?: 'native' | 'aria' = 'native'
value?: ValueType<SelectionMode>
} /react-aria-components:SelectValueProps SelectValueProps <T extends {}> {
children?: ChildrenOrFunction<SelectValueRenderProps<{}>>
- className?: ClassNameOrFunction<SelectValueRenderProps<{}>>
+ className?: ClassNameOrFunction<SelectValueRenderProps<{}>> = 'react-aria-SelectValue'
style?: StyleOrFunction<SelectValueRenderProps<{}>>
} /react-aria-components:SelectionIndicatorProps SelectionIndicatorProps {
children?: ChildrenOrFunction<SharedElementRenderProps>
- className?: ClassNameOrFunction<SharedElementRenderProps>
+ className?: ClassNameOrFunction<SharedElementRenderProps> = 'react-aria-SelectionIndicator'
isSelected?: boolean
style?: StyleOrFunction<SharedElementRenderProps>
} /react-aria-components:SeparatorProps SeparatorProps {
aria-describedby?: string
aria-details?: string
aria-label?: string
aria-labelledby?: string
- className?: string
+ className?: string = 'react-aria-Separator'
elementType?: string
id?: string
orientation?: Orientation = 'horizontal'
slot?: string | null
} /react-aria-components:SliderOutputProps SliderOutputProps {
children?: ChildrenOrFunction<SliderRenderProps>
- className?: ClassNameOrFunction<SliderRenderProps>
+ className?: ClassNameOrFunction<SliderRenderProps> = 'react-aria-SliderOutput'
style?: StyleOrFunction<SliderRenderProps>
} /react-aria-components:SliderProps SliderProps <T = number | Array<number>> {
aria-describedby?: string
aria-details?: string
aria-label?: string
aria-labelledby?: string
children?: ChildrenOrFunction<SliderRenderProps>
- className?: ClassNameOrFunction<SliderRenderProps>
+ className?: ClassNameOrFunction<SliderRenderProps> = 'react-aria-Slider'
defaultValue?: T
formatOptions?: Intl.NumberFormatOptions
id?: string
isDisabled?: boolean
minValue?: number = 0
onChange?: (T) => void
onChangeEnd?: (T) => void
orientation?: Orientation = 'horizontal'
slot?: string | null
step?: number = 1
style?: StyleOrFunction<SliderRenderProps>
value?: T
} /react-aria-components:SliderThumbProps SliderThumbProps {
aria-describedby?: string
aria-details?: string
aria-errormessage?: string
aria-label?: string
aria-labelledby?: string
autoFocus?: boolean
children?: ChildrenOrFunction<SliderThumbRenderProps>
- className?: ClassNameOrFunction<SliderThumbRenderProps>
+ className?: ClassNameOrFunction<SliderThumbRenderProps> = 'react-aria-SliderThumb'
form?: string
id?: string
index?: number = 0
inputRef?: RefObject<HTMLInputElement | null>
name?: string
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
style?: StyleOrFunction<SliderThumbRenderProps>
} /react-aria-components:SliderTrackProps SliderTrackProps {
children?: ChildrenOrFunction<SliderTrackRenderProps>
- className?: ClassNameOrFunction<SliderTrackRenderProps>
+ className?: ClassNameOrFunction<SliderTrackRenderProps> = 'react-aria-SliderTrack'
onHoverChange?: (boolean) => void
onHoverEnd?: (HoverEvent) => void
onHoverStart?: (HoverEvent) => void
style?: StyleOrFunction<SliderTrackRenderProps> /react-aria-components:SwitchProps SwitchProps {
aria-controls?: string
aria-describedby?: string
aria-details?: string
aria-label?: string
aria-labelledby?: string
autoFocus?: boolean
children?: ChildrenOrFunction<SwitchRenderProps>
- className?: ClassNameOrFunction<SwitchRenderProps>
+ className?: ClassNameOrFunction<SwitchRenderProps> = 'react-aria-Switch'
defaultSelected?: boolean
excludeFromTabOrder?: boolean
form?: string
id?: string
isDisabled?: boolean
isReadOnly?: boolean
isSelected?: boolean
name?: string
onBlur?: (FocusEvent<Target>) => void
onChange?: (boolean) => void
onFocus?: (FocusEvent<Target>) => void
onFocusChange?: (boolean) => void
onHoverChange?: (boolean) => void
onHoverEnd?: (HoverEvent) => void
onHoverStart?: (HoverEvent) => void
onKeyDown?: (KeyboardEvent) => void
onKeyUp?: (KeyboardEvent) => void
slot?: string | null
style?: StyleOrFunction<SwitchRenderProps>
value?: string
} /react-aria-components:TableProps TableProps {
aria-describedby?: string
aria-details?: string
aria-label?: string
aria-labelledby?: string
children?: ReactNode
- className?: ClassNameOrFunction<TableRenderProps>
+ className?: ClassNameOrFunction<TableRenderProps> = 'react-aria-Table'
defaultSelectedKeys?: 'all' | Iterable<Key>
disabledBehavior?: DisabledBehavior = "selection"
disabledKeys?: Iterable<Key>
disallowEmptySelection?: boolean
escapeKeyBehavior?: 'clearSelection' | 'none' = 'clearSelection'
onRowAction?: (Key) => void
onSelectionChange?: (Selection) => void
onSortChange?: (SortDescriptor) => any
selectedKeys?: 'all' | Iterable<Key>
selectionBehavior?: SelectionBehavior = "toggle"
selectionMode?: SelectionMode
shouldSelectOnPressUp?: boolean
slot?: string | null
sortDescriptor?: SortDescriptor
style?: StyleOrFunction<TableRenderProps>
} /react-aria-components:TableHeaderProps TableHeaderProps <T> {
children?: ReactNode | (T) => ReactElement
- className?: ClassNameOrFunction<TableHeaderRenderProps>
+ className?: ClassNameOrFunction<TableHeaderRenderProps> = 'react-aria-TableHeader'
columns?: Iterable<T>
dependencies?: ReadonlyArray<any>
onHoverChange?: (boolean) => void
onHoverEnd?: (HoverEvent) => void
style?: StyleOrFunction<TableHeaderRenderProps>
} /react-aria-components:TableBodyProps TableBodyProps <T> {
children?: ReactNode | (T) => ReactNode
- className?: ClassNameOrFunction<TableBodyRenderProps>
+ className?: ClassNameOrFunction<TableBodyRenderProps> = 'react-aria-TableBody'
dependencies?: ReadonlyArray<any>
items?: Iterable<T>
renderEmptyState?: (TableBodyRenderProps) => ReactNode
style?: StyleOrFunction<TableBodyRenderProps> /react-aria-components:ResizableTableContainerProps ResizableTableContainerProps {
children?: ReactNode
- className?: string
+ className?: string = 'react-aria-ResizableTableContainer'
id?: string
onResize?: (Map<Key, ColumnSize>) => void
onResizeEnd?: (Map<Key, ColumnSize>) => void
onResizeStart?: (Map<Key, ColumnSize>) => void
} /react-aria-components:ColumnProps ColumnProps {
allowsSorting?: boolean
children?: ChildrenOrFunction<ColumnRenderProps>
- className?: ClassNameOrFunction<ColumnRenderProps>
+ className?: ClassNameOrFunction<ColumnRenderProps> = 'react-aria-Column'
defaultWidth?: ColumnSize | null
id?: Key
isRowHeader?: boolean
maxWidth?: ColumnStaticSize | null
style?: StyleOrFunction<ColumnRenderProps>
textValue?: string
width?: ColumnSize | null
} /react-aria-components:ColumnResizerProps ColumnResizerProps {
aria-label?: string
children?: ChildrenOrFunction<ColumnResizerRenderProps>
- className?: ClassNameOrFunction<ColumnResizerRenderProps>
+ className?: ClassNameOrFunction<ColumnResizerRenderProps> = 'react-aria-ColumnResizer'
onHoverChange?: (boolean) => void
onHoverEnd?: (HoverEvent) => void
onHoverStart?: (HoverEvent) => void
style?: StyleOrFunction<ColumnResizerRenderProps> /react-aria-components:RowProps RowProps <T> {
children?: ReactNode | (T) => ReactElement
- className?: ClassNameOrFunction<RowRenderProps>
+ className?: ClassNameOrFunction<RowRenderProps> = 'react-aria-Row'
columns?: Iterable<T>
dependencies?: ReadonlyArray<any>
download?: boolean | string
href?: Href
id?: Key
isDisabled?: boolean
onAction?: () => void
onClick?: (MouseEvent<FocusableElement>) => void
onHoverChange?: (boolean) => void
onHoverEnd?: (HoverEvent) => void
onHoverStart?: (HoverEvent) => void
onPress?: (PressEvent) => void
onPressChange?: (boolean) => void
onPressEnd?: (PressEvent) => void
onPressStart?: (PressEvent) => void
onPressUp?: (PressEvent) => void
ping?: string
referrerPolicy?: HTMLAttributeReferrerPolicy
rel?: string
routerOptions?: RouterOptions
style?: StyleOrFunction<RowRenderProps>
target?: HTMLAttributeAnchorTarget
textValue?: string
value?: T
} /react-aria-components:CellProps CellProps {
children?: ChildrenOrFunction<CellRenderProps>
- className?: ClassNameOrFunction<CellRenderProps>
+ className?: ClassNameOrFunction<CellRenderProps> = 'react-aria-Cell'
colSpan?: number
id?: Key
style?: StyleOrFunction<CellRenderProps>
textValue?: string /react-aria-components:TableLoadMoreItemProps TableLoadMoreItemProps {
children?: ReactNode
- className?: string
+ className?: string = 'react-aria-TableLoadMoreItem'
isLoading?: boolean
onLoadMore?: () => any
scrollOffset?: number = 1
style?: CSSProperties /react-aria-components:TabListProps TabListProps <T> {
aria-describedby?: string
aria-details?: string
aria-label?: string
aria-labelledby?: string
children?: ReactNode | (T) => ReactNode
- className?: ClassNameOrFunction<TabListRenderProps>
+ className?: ClassNameOrFunction<TabListRenderProps> = 'react-aria-TabList'
dependencies?: ReadonlyArray<any>
items?: Iterable<T>
style?: StyleOrFunction<TabListRenderProps>
} /react-aria-components:TabPanelProps TabPanelProps {
aria-describedby?: string
aria-details?: string
aria-label?: string
aria-labelledby?: string
children?: ChildrenOrFunction<TabPanelRenderProps>
- className?: ClassNameOrFunction<TabPanelRenderProps>
+ className?: ClassNameOrFunction<TabPanelRenderProps> = 'react-aria-TabPanel'
id?: Key
shouldForceMount?: boolean = false
style?: StyleOrFunction<TabPanelRenderProps>
} /react-aria-components:TabProps TabProps {
aria-describedby?: string
aria-details?: string
aria-label?: string
aria-labelledby?: string
children?: ChildrenOrFunction<TabRenderProps>
- className?: ClassNameOrFunction<TabRenderProps>
+ className?: ClassNameOrFunction<TabRenderProps> = 'react-aria-Tab'
download?: boolean | string
href?: Href
hrefLang?: string
id?: Key
onClick?: (MouseEvent<FocusableElement>) => void
onHoverChange?: (boolean) => void
onHoverEnd?: (HoverEvent) => void
onHoverStart?: (HoverEvent) => void
onPress?: (PressEvent) => void
onPressChange?: (boolean) => void
onPressEnd?: (PressEvent) => void
onPressStart?: (PressEvent) => void
onPressUp?: (PressEvent) => void
ping?: string
referrerPolicy?: HTMLAttributeReferrerPolicy
rel?: string
routerOptions?: RouterOptions
style?: StyleOrFunction<TabRenderProps>
target?: HTMLAttributeAnchorTarget
} /react-aria-components:TabsProps TabsProps {
aria-describedby?: string
aria-details?: string
aria-label?: string
aria-labelledby?: string
children?: ChildrenOrFunction<TabsRenderProps>
- className?: ClassNameOrFunction<TabsRenderProps>
+ className?: ClassNameOrFunction<TabsRenderProps> = 'react-aria-Tabs'
defaultSelectedKey?: Key
disabledKeys?: Iterable<Key>
id?: string
isDisabled?: boolean
onSelectionChange?: (Key) => void
orientation?: Orientation = 'horizontal'
selectedKey?: Key | null
slot?: string | null
style?: StyleOrFunction<TabsRenderProps>
} /react-aria-components:TagGroupProps TagGroupProps {
aria-describedby?: string
aria-details?: string
aria-label?: string
aria-labelledby?: string
children?: ReactNode
- className?: string
+ className?: string = 'react-aria-TagGroup'
defaultSelectedKeys?: 'all' | Iterable<Key>
disabledKeys?: Iterable<Key>
disallowEmptySelection?: boolean
escapeKeyBehavior?: 'clearSelection' | 'none' = 'clearSelection'
onRemove?: (Set<Key>) => void
onSelectionChange?: (Selection) => void
selectedKeys?: 'all' | Iterable<Key>
selectionBehavior?: SelectionBehavior
selectionMode?: SelectionMode
shouldSelectOnPressUp?: boolean
slot?: string | null
style?: CSSProperties
} /react-aria-components:TagListProps TagListProps <T> {
children?: ReactNode | (T) => ReactNode
- className?: ClassNameOrFunction<TagListRenderProps>
+ className?: ClassNameOrFunction<TagListRenderProps> = 'react-aria-TagList'
dependencies?: ReadonlyArray<any>
items?: Iterable<T>
renderEmptyState?: (TagListRenderProps) => ReactNode
style?: StyleOrFunction<TagListRenderProps> /react-aria-components:TagProps TagProps {
children?: ChildrenOrFunction<TagRenderProps>
- className?: ClassNameOrFunction<TagRenderProps>
+ className?: ClassNameOrFunction<TagRenderProps> = 'react-aria-Tag'
download?: boolean | string
href?: Href
hrefLang?: string
id?: Key
onClick?: (MouseEvent<FocusableElement>) => void
onHoverChange?: (boolean) => void
onHoverEnd?: (HoverEvent) => void
onHoverStart?: (HoverEvent) => void
onPress?: (PressEvent) => void
onPressChange?: (boolean) => void
onPressEnd?: (PressEvent) => void
onPressStart?: (PressEvent) => void
onPressUp?: (PressEvent) => void
ping?: string
referrerPolicy?: HTMLAttributeReferrerPolicy
rel?: string
routerOptions?: RouterOptions
style?: StyleOrFunction<TagRenderProps>
target?: HTMLAttributeAnchorTarget
textValue?: string
} /react-aria-components:TextAreaProps TextAreaProps {
- className?: ClassNameOrFunction<InputRenderProps>
+ className?: ClassNameOrFunction<InputRenderProps> = 'react-aria-TextArea'
onHoverChange?: (boolean) => void
onHoverEnd?: (HoverEvent) => void
onHoverStart?: (HoverEvent) => void
style?: StyleOrFunction<InputRenderProps> /react-aria-components:TextFieldProps TextFieldProps {
aria-activedescendant?: string
aria-autocomplete?: 'none' | 'inline' | 'list' | 'both'
aria-controls?: string
aria-describedby?: 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
children?: ChildrenOrFunction<TextFieldRenderProps>
- className?: ClassNameOrFunction<TextFieldRenderProps>
+ className?: ClassNameOrFunction<TextFieldRenderProps> = 'react-aria-TextField'
defaultValue?: string
enterKeyHint?: 'enter' | 'done' | 'go' | 'next' | 'previous' | 'search' | 'send'
excludeFromTabOrder?: boolean
form?: string
inputMode?: 'none' | 'text' | 'tel' | 'url' | 'email' | 'numeric' | 'decimal' | 'search'
isDisabled?: boolean
isInvalid?: boolean
isReadOnly?: boolean
isRequired?: boolean
maxLength?: number
minLength?: number
name?: string
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
slot?: string | null
spellCheck?: string
style?: StyleOrFunction<TextFieldRenderProps>
type?: 'text' | 'search' | 'url' | 'tel' | 'email' | 'password' | (string & {
}) = 'text'
validate?: (string) => ValidationError | boolean | null | undefined
validationBehavior?: 'native' | 'aria' = 'native'
value?: string
} /react-aria-components:ToastRegionProps ToastRegionProps <T> {
aria-describedby?: string
aria-details?: string
aria-label?: string = "Notifications"
aria-labelledby?: string
children: ReactNode | ({
toast: QueuedToast<T>
}) => ReactElement
- className?: ClassNameOrFunction<ToastRegionRenderProps<T>>
+ className?: ClassNameOrFunction<ToastRegionRenderProps<T>> = 'react-aria-ToastRegion'
queue: ToastQueue<T>
style?: StyleOrFunction<ToastRegionRenderProps<T>>
} /react-aria-components:ToastListProps ToastListProps <T> {
aria-describedby?: string
aria-details?: string
aria-label?: string = "Notifications"
aria-labelledby?: string
children: ({
toast: QueuedToast<T>
}) => ReactElement
- className?: ClassNameOrFunction<ToastRegionRenderProps<T>>
+ className?: ClassNameOrFunction<ToastRegionRenderProps<T>> = 'react-aria-ToastRegion'
style?: StyleOrFunction<ToastRegionRenderProps<T>>
} /react-aria-components:ToastProps ToastProps <T> {
aria-describedby?: string
aria-details?: string
aria-label?: string
aria-labelledby?: string
children?: ChildrenOrFunction<ToastRenderProps<T>>
- className?: ClassNameOrFunction<ToastRenderProps<T>>
+ className?: ClassNameOrFunction<ToastRenderProps<T>> = 'react-aria-Toast'
style?: StyleOrFunction<ToastRenderProps<T>>
toast: QueuedToast<T>
} /react-aria-components:ToggleButtonProps ToggleButtonProps {
aria-controls?: string
aria-describedby?: string
aria-details?: string
aria-disabled?: boolean | 'true' | 'false'
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?: ChildrenOrFunction<ToggleButtonRenderProps>
- className?: ClassNameOrFunction<ToggleButtonRenderProps>
+ className?: ClassNameOrFunction<ToggleButtonRenderProps> = 'react-aria-ToggleButton'
defaultSelected?: boolean
excludeFromTabOrder?: boolean
id?: Key
isDisabled?: boolean
onBlur?: (FocusEvent<Target>) => void
onChange?: (boolean) => void
onClick?: (MouseEvent<FocusableElement>) => 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
preventFocusOnPress?: boolean
slot?: string | null
style?: StyleOrFunction<ToggleButtonRenderProps>
} /react-aria-components:ToggleButtonGroupProps ToggleButtonGroupProps {
aria-describedby?: string
aria-details?: string
aria-label?: string
aria-labelledby?: string
children?: ChildrenOrFunction<ToggleButtonGroupRenderProps>
- className?: ClassNameOrFunction<ToggleButtonGroupRenderProps>
+ className?: ClassNameOrFunction<ToggleButtonGroupRenderProps> = 'react-aria-ToggleButtonGroup'
defaultSelectedKeys?: Iterable<Key>
disallowEmptySelection?: boolean
isDisabled?: boolean
onSelectionChange?: (Set<Key>) => void
selectedKeys?: Iterable<Key>
selectionMode?: 'single' | 'multiple' = 'single'
slot?: string | null
style?: StyleOrFunction<ToggleButtonGroupRenderProps>
} /react-aria-components:ToolbarProps ToolbarProps {
aria-describedby?: string
aria-details?: string
aria-label?: string
aria-labelledby?: string
children?: ChildrenOrFunction<ToolbarRenderProps>
- className?: ClassNameOrFunction<ToolbarRenderProps>
+ className?: ClassNameOrFunction<ToolbarRenderProps> = 'react-aria-Toolbar'
orientation?: Orientation = 'horizontal'
slot?: string | null
style?: StyleOrFunction<ToolbarRenderProps>
} /react-aria-components:TooltipProps TooltipProps {
aria-describedby?: string
aria-details?: string
aria-label?: string
aria-labelledby?: string
arrowBoundaryOffset?: number = 0
children?: ChildrenOrFunction<TooltipRenderProps>
- className?: ClassNameOrFunction<TooltipRenderProps>
+ className?: ClassNameOrFunction<TooltipRenderProps> = 'react-aria-Tooltip'
containerPadding?: number = 12
crossOffset?: number = 0
defaultOpen?: boolean
isEntering?: boolean
isOpen?: boolean
offset?: number = 0
onOpenChange?: (boolean) => void
placement?: Placement = 'top'
shouldFlip?: boolean = true
style?: StyleOrFunction<TooltipRenderProps>
triggerRef?: RefObject<Element | null>
} /react-aria-components:TreeProps TreeProps <T> {
aria-describedby?: string
aria-details?: string
aria-label?: string
aria-labelledby?: string
autoFocus?: boolean | FocusStrategy
children?: ReactNode | (T) => ReactNode
- className?: ClassNameOrFunction<TreeRenderProps>
+ className?: ClassNameOrFunction<TreeRenderProps> = 'react-aria-Tree'
defaultExpandedKeys?: Iterable<Key>
defaultSelectedKeys?: 'all' | Iterable<Key>
dependencies?: ReadonlyArray<any>
disabledBehavior?: DisabledBehavior = 'all'
disallowEmptySelection?: boolean
dragAndDropHooks?: DragAndDropHooks<NoInfer<T>>
escapeKeyBehavior?: 'clearSelection' | 'none' = 'clearSelection'
expandedKeys?: Iterable<Key>
id?: string
items?: Iterable<T>
onAction?: (Key) => void
onExpandedChange?: (Set<Key>) => any
onSelectionChange?: (Selection) => void
renderEmptyState?: (TreeEmptyStateRenderProps) => ReactNode
selectedKeys?: 'all' | Iterable<Key>
selectionBehavior?: SelectionBehavior = "toggle"
selectionMode?: SelectionMode
shouldSelectOnPressUp?: boolean
slot?: string | null
style?: StyleOrFunction<TreeRenderProps>
} /react-aria-components:TreeItemProps TreeItemProps <T = {}> {
aria-label?: string
children: ReactNode
- className?: ClassNameOrFunction<TreeItemRenderProps>
+ className?: ClassNameOrFunction<TreeItemRenderProps> = 'react-aria-TreeItem'
download?: boolean | string
hasChildItems?: boolean
href?: Href
hrefLang?: string
isDisabled?: boolean
onAction?: () => void
onClick?: (MouseEvent<FocusableElement>) => void
onHoverChange?: (boolean) => void
onHoverEnd?: (HoverEvent) => void
onHoverStart?: (HoverEvent) => void
onPress?: (PressEvent) => void
onPressChange?: (boolean) => void
onPressEnd?: (PressEvent) => void
onPressStart?: (PressEvent) => void
onPressUp?: (PressEvent) => void
ping?: string
referrerPolicy?: HTMLAttributeReferrerPolicy
rel?: string
routerOptions?: RouterOptions
style?: StyleOrFunction<TreeItemRenderProps>
target?: HTMLAttributeAnchorTarget
textValue: string
value?: T
} /react-aria-components:TreeItemContentProps TreeItemContentProps {
- children?: ChildrenOrFunction<T>
+ children: ChildrenOrFunction<TreeItemContentRenderProps>
} /react-aria-components:TreeLoadMoreItemProps TreeLoadMoreItemProps {
children?: ChildrenOrFunction<TreeLoadMoreItemRenderProps>
- className?: ClassNameOrFunction<TreeLoadMoreItemRenderProps>
+ className?: ClassNameOrFunction<TreeLoadMoreItemRenderProps> = 'react-aria-TreeLoadMoreItem'
isLoading?: boolean
onLoadMore?: () => any
scrollOffset?: number = 1
style?: StyleOrFunction<TreeLoadMoreItemRenderProps> /react-aria-components:DropIndicatorProps DropIndicatorProps {
children?: ChildrenOrFunction<DropIndicatorRenderProps>
- className?: ClassNameOrFunction<DropIndicatorRenderProps>
+ className?: ClassNameOrFunction<DropIndicatorRenderProps> = 'react-aria-DropIndicator'
style?: StyleOrFunction<DropIndicatorRenderProps>
target: DropTarget
} @react-spectrum/s2/@react-spectrum/s2:MenuSection MenuSection <T extends {}> {
aria-label?: string
children?: ReactNode | (T) => ReactElement
- className?: string
+ className?: string = 'react-aria-MenuSection'
defaultSelectedKeys?: 'all' | Iterable<Key>
dependencies?: ReadonlyArray<any>
disabledKeys?: Iterable<Key>
disallowEmptySelection?: boolean
items?: Iterable<T>
onSelectionChange?: (Selection) => void
selectedKeys?: 'all' | Iterable<Key>
selectionMode?: SelectionMode
style?: CSSProperties
value?: T
} /@react-spectrum/s2:Cell Cell {
align?: 'start' | 'center' | 'end' = 'start'
children: ReactNode
- className?: ClassNameOrFunction<CellRenderProps>
+ className?: ClassNameOrFunction<CellRenderProps> = 'react-aria-Cell'
colSpan?: number
id?: Key
showDivider?: boolean
style?: StyleOrFunction<CellRenderProps>
} /@react-spectrum/s2:Column Column {
align?: 'start' | 'center' | 'end' = 'start'
allowsResizing?: boolean
allowsSorting?: boolean
children: ReactNode
- className?: ClassNameOrFunction<ColumnRenderProps>
+ className?: ClassNameOrFunction<ColumnRenderProps> = 'react-aria-Column'
defaultWidth?: ColumnSize | null
id?: Key
isRowHeader?: boolean
maxWidth?: ColumnStaticSize | null
minWidth?: ColumnStaticSize | null
showDivider?: boolean
style?: StyleOrFunction<ColumnRenderProps>
textValue?: string
width?: ColumnSize | null
} /@react-spectrum/s2:UNSTABLE_ToastContainer UNSTABLE_ToastContainer {
aria-describedby?: string
aria-details?: string
aria-label?: string = "Notifications"
aria-labelledby?: string
- className?: ClassNameOrFunction<ToastRegionRenderProps<T>>
+ className?: ClassNameOrFunction<ToastRegionRenderProps<T>> = 'react-aria-ToastRegion'
placement?: ToastPlacement = "bottom"
style?: StyleOrFunction<ToastRegionRenderProps<T>>
} /@react-spectrum/s2:MenuSectionProps MenuSectionProps <T extends {}> {
aria-label?: string
children?: ReactNode | (T) => ReactElement
- className?: string
+ className?: string = 'react-aria-MenuSection'
defaultSelectedKeys?: 'all' | Iterable<Key>
dependencies?: ReadonlyArray<any>
disabledKeys?: Iterable<Key>
disallowEmptySelection?: boolean
items?: Iterable<T>
onSelectionChange?: (Selection) => void
selectedKeys?: 'all' | Iterable<Key>
selectionMode?: SelectionMode
style?: CSSProperties
value?: T
} /@react-spectrum/s2:PopoverProps PopoverProps {
UNSAFE_className?: UnsafeClassName
UNSAFE_style?: CSSProperties
aria-describedby?: string
aria-details?: string
aria-label?: string
aria-labelledby?: string
arrowRef?: RefObject<Element | null>
boundaryElement?: Element = document.body
children?: ChildrenOrFunction<PopoverRenderProps>
- className?: ClassNameOrFunction<PopoverRenderProps>
+ className?: ClassNameOrFunction<PopoverRenderProps> = 'react-aria-Popover'
containerPadding?: number = 12
crossOffset?: number = 0
defaultOpen?: boolean
hideArrow?: boolean = false
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?: StyleOrFunction<PopoverRenderProps>
styles?: StyleString
trigger?: string
triggerRef?: RefObject<Element | null>
} /@react-spectrum/s2:CellProps CellProps {
align?: 'start' | 'center' | 'end' = 'start'
children: ReactNode
- className?: ClassNameOrFunction<CellRenderProps>
+ className?: ClassNameOrFunction<CellRenderProps> = 'react-aria-Cell'
colSpan?: number
id?: Key
showDivider?: boolean
style?: StyleOrFunction<CellRenderProps>
} /@react-spectrum/s2:ColumnProps ColumnProps {
align?: 'start' | 'center' | 'end' = 'start'
allowsResizing?: boolean
allowsSorting?: boolean
children: ReactNode
- className?: ClassNameOrFunction<ColumnRenderProps>
+ className?: ClassNameOrFunction<ColumnRenderProps> = 'react-aria-Column'
defaultWidth?: ColumnSize | null
id?: Key
isRowHeader?: boolean
maxWidth?: ColumnStaticSize | null
minWidth?: ColumnStaticSize | null
showDivider?: boolean
style?: StyleOrFunction<ColumnRenderProps>
textValue?: string
width?: ColumnSize | null
} /@react-spectrum/s2:ToastContainerProps ToastContainerProps {
aria-describedby?: string
aria-details?: string
aria-label?: string = "Notifications"
aria-labelledby?: string
- className?: ClassNameOrFunction<ToastRegionRenderProps<T>>
+ className?: ClassNameOrFunction<ToastRegionRenderProps<T>> = 'react-aria-ToastRegion'
placement?: ToastPlacement = "bottom"
style?: StyleOrFunction<ToastRegionRenderProps<T>>
} |
reidbarber
approved these changes
Oct 3, 2025
LFDanLu
approved these changes
Oct 4, 2025
LFDanLu
pushed a commit
that referenced
this pull request
Oct 9, 2025
* docs: Add docs for component CSS variables * Automatically generate default class name and render props table * Fix type
devongovett
added a commit
that referenced
this pull request
Oct 9, 2025
* docs: Add docs for component CSS variables * Automatically generate default class name and render props table * Fix type
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Adds a table for CSS variables exposed by each component, and ensures that all components have a default class name and render props table. This is now automatically generated by the
PropTable
component by extracting the default class name from the JS docs, and the render props from the types. So now you don't need to manually render aStateTable
as well.