-
Notifications
You must be signed in to change notification settings - Fork 1.3k
[WIP] - S2 listview and highlight selection #8878
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
Open
snowystinger
wants to merge
14
commits into
main
Choose a base branch
from
s2-listview
base: main
Could not load branches
Branch not found: {{ refName }}
Loading
Could not load tags
Nothing to show
Loading
Are you sure you want to change the base?
Some commits from the old base branch may be removed from the timeline,
and old review comments may become outdated.
Open
+1,461
−118
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
# Conflicts: # packages/@react-spectrum/s2/src/TreeView.tsx # packages/@react-spectrum/s2/src/index.ts
Build successful! 🎉 |
Build successful! 🎉 |
Build successful! 🎉 |
Build successful! 🎉 |
Build successful! 🎉 |
Build successful! 🎉 |
Build successful! 🎉 |
Build successful! 🎉 |
Build successful! 🎉 |
Build successful! 🎉 |
Build successful! 🎉 |
## API Changes
react-aria-components/react-aria-components:SelectableCollectionContext-SelectableCollectionContext {
- UNTYPED
-} /react-aria-components:FieldInputContext-FieldInputContext {
- UNTYPED
-} /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 = 'react-aria-Breadcrumbs'
+ className?: string
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> = 'react-aria-Breadcrumb'
+ className?: ClassNameOrFunction<BreadcrumbRenderProps>
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> = 'react-aria-Button'
+ className?: ClassNameOrFunction<ButtonRenderProps>
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> = 'react-aria-Calendar'
+ className?: ClassNameOrFunction<CalendarRenderProps>
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 = 'react-aria-CalendarGrid'
+ className?: string
offset?: DateDuration
style?: CSSProperties
weekdayStyle?: 'narrow' | 'short' | 'long' = "narrow"
} /react-aria-components:CalendarGridHeader CalendarGridHeader {
children: (string) => ReactElement
- className?: string = 'react-aria-CalendarGridHeader'
+ className?: string
style?: CSSProperties
} /react-aria-components:CalendarGridBody CalendarGridBody {
children: (CalendarDate) => ReactElement
- className?: string = 'react-aria-CalendarGridBody'
+ className?: string
style?: CSSProperties
} /react-aria-components:CalendarHeaderCell CalendarHeaderCell {
children?: ReactNode
- className?: string = 'react-aria-CalendarHeaderCell'
+ className?: string
id?: string
style?: CSSProperties
} /react-aria-components:CalendarCell CalendarCell {
children?: ChildrenOrFunction<CalendarCellRenderProps>
- className?: ClassNameOrFunction<CalendarCellRenderProps> = 'react-aria-CalendarCell'
+ className?: ClassNameOrFunction<CalendarCellRenderProps>
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> = 'react-aria-RangeCalendar'
+ className?: ClassNameOrFunction<RangeCalendarRenderProps>
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> = 'react-aria-Checkbox'
+ className?: ClassNameOrFunction<CheckboxRenderProps>
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> = 'react-aria-CheckboxGroup'
+ className?: ClassNameOrFunction<CheckboxGroupRenderProps>
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> = 'react-aria-ColorArea'
+ className?: ClassNameOrFunction<ColorAreaRenderProps>
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> = 'react-aria-ColorField'
+ className?: ClassNameOrFunction<ColorFieldRenderProps>
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<ColorPickerRenderProps>
+ children?: ChildrenOrFunction<T>
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> = 'react-aria-ColorSlider'
+ className?: ClassNameOrFunction<ColorSliderRenderProps>
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> = 'react-aria-ColorSwatch'
+ className?: ClassNameOrFunction<ColorSwatchRenderProps>
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> = 'react-aria-ColorSwatchPicker'
+ className?: ClassNameOrFunction<ColorSwatchPickerRenderProps>
defaultValue?: string | Color
layout?: 'grid' | 'stack' = 'grid'
onChange?: (Color) => void
style?: StyleOrFunction<ColorSwatchPickerRenderProps>
} /react-aria-components:ColorSwatchPickerItem ColorSwatchPickerItem {
children?: ChildrenOrFunction<ColorSwatchPickerItemRenderProps>
- className?: ClassNameOrFunction<ColorSwatchPickerItemRenderProps> = 'react-aria-ColorSwatchPickerItem'
+ className?: ClassNameOrFunction<ColorSwatchPickerItemRenderProps>
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> = 'react-aria-ColorThumb'
+ className?: ClassNameOrFunction<ColorThumbRenderProps>
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> = 'react-aria-ColorWheel'
+ className?: ClassNameOrFunction<ColorWheelRenderProps>
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> = 'react-aria-ColorWheelTrack'
+ className?: ClassNameOrFunction<ColorWheelTrackRenderProps>
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> = 'react-aria-ComboBox'
+ className?: ClassNameOrFunction<ComboBoxRenderProps>
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> = 'react-aria-DateField'
+ className?: ClassNameOrFunction<DateFieldRenderProps>
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> = 'react-aria-DateInput'
+ className?: ClassNameOrFunction<DateInputRenderProps>
slot?: string | null
style?: StyleOrFunction<DateInputRenderProps>
} /react-aria-components:DateSegment DateSegment {
children?: ChildrenOrFunction<DateSegmentRenderProps>
- className?: ClassNameOrFunction<DateSegmentRenderProps> = 'react-aria-DateSegment'
+ className?: ClassNameOrFunction<DateSegmentRenderProps>
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> = 'react-aria-TimeField'
+ className?: ClassNameOrFunction<DateFieldRenderProps>
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> = 'react-aria-DatePicker'
+ className?: ClassNameOrFunction<DatePickerRenderProps>
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> = 'react-aria-DateRangePicker'
+ className?: ClassNameOrFunction<DateRangePickerRenderProps>
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 = 'react-aria-Dialog'
+ className?: string
id?: string
role?: 'dialog' | 'alertdialog' = 'dialog'
slot?: string | null
style?: CSSProperties /react-aria-components:Disclosure Disclosure {
children?: ChildrenOrFunction<DisclosureRenderProps>
- className?: ClassNameOrFunction<DisclosureRenderProps> = 'react-aria-Disclosure'
+ className?: ClassNameOrFunction<DisclosureRenderProps>
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> = 'react-aria-DisclosureGroup'
+ className?: ClassNameOrFunction<DisclosureGroupRenderProps>
defaultExpandedKeys?: Iterable<Key>
expandedKeys?: Iterable<Key>
id?: string
isDisabled?: boolean
style?: StyleOrFunction<DisclosureGroupRenderProps>
} /react-aria-components:DisclosurePanel DisclosurePanel {
children: ReactNode
- className?: ClassNameOrFunction<DisclosurePanelRenderProps> = 'react-aria-DisclosurePanel'
+ className?: ClassNameOrFunction<DisclosurePanelRenderProps>
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> = 'react-aria-DropZone'
+ className?: ClassNameOrFunction<DropZoneRenderProps>
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> = 'react-aria-FieldError'
+ className?: ClassNameOrFunction<FieldErrorRenderProps>
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 = 'react-aria-Form'
+ className?: string
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 = 'react-aria-GridListLoadMoreItem'
+ className?: string
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> = 'react-aria-GridList'
+ className?: ClassNameOrFunction<GridListRenderProps>
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> = 'react-aria-GridListItem'
+ className?: ClassNameOrFunction<GridListItemRenderProps>
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:GridListHeaderContext-GridListHeaderContext {
- UNTYPED
-} /react-aria-components:GridListSection GridListSection <T extends {}> {
aria-label?: string
children?: ReactNode | ({}) => ReactElement
- className?: string = 'react-aria-GridListSection'
+ className?: string
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> = 'react-aria-Group'
+ className?: ClassNameOrFunction<GroupRenderProps>
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> = 'react-aria-Input'
+ className?: ClassNameOrFunction<InputRenderProps>
onHoverChange?: (boolean) => void
onHoverEnd?: (HoverEvent) => void
onHoverStart?: (HoverEvent) => void
- placeholder?: string
style?: StyleOrFunction<InputRenderProps>
} /react-aria-components:createLeafComponent-createLeafComponent <E extends Element, P extends {}> {
- CollectionNodeClass: {}<any> | string
- render: (P, ForwardedRef<E>, any) => ReactElement | null
- returnVal: undefined
-} /react-aria-components:createBranchComponent-createBranchComponent <E extends Element, P extends {
- children?: any
-}, T extends {}> {
- CollectionNodeClass: {}<any> | string
- render: (P, ForwardedRef<E>, Node<T>) => ReactElement | null
- useChildren: (P) => ReactNode
- returnVal: undefined
-} /react-aria-components:CollectionBuilder-CollectionBuilder <C extends BaseCollection<{}>> {
- children: (BaseCollection<{}>) => ReactNode
- content: ReactNode
- createCollection?: () => BaseCollection<{}>
-} /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> = 'react-aria-Link'
+ className?: ClassNameOrFunction<LinkRenderProps>
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 = 'react-aria-ListBoxLoadMoreItem'
+ className?: string
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> = 'react-aria-ListBox'
+ className?: ClassNameOrFunction<ListBoxRenderProps>
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> = 'react-aria-ListBoxItem'
+ className?: ClassNameOrFunction<ListBoxItemRenderProps>
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 = 'react-aria-ListBoxSection'
+ className?: string
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> = 'react-aria-Menu'
+ className?: ClassNameOrFunction<MenuRenderProps>
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> = 'react-aria-MenuItem'
+ className?: ClassNameOrFunction<MenuItemRenderProps>
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 = 'react-aria-MenuSection'
+ className?: string
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> = 'react-aria-Meter'
+ className?: ClassNameOrFunction<MeterRenderProps>
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> = 'react-aria-ModalOverlay'
+ className?: ClassNameOrFunction<ModalRenderProps>
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> = 'react-aria-ModalOverlay'
+ className?: ClassNameOrFunction<ModalRenderProps>
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> = 'react-aria-NumberField'
+ className?: ClassNameOrFunction<NumberFieldRenderProps>
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> = 'react-aria-OverlayArrow'
+ className?: ClassNameOrFunction<OverlayArrowRenderProps>
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> = 'react-aria-Popover'
+ className?: ClassNameOrFunction<PopoverRenderProps>
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> = 'react-aria-ProgressBar'
+ className?: ClassNameOrFunction<ProgressBarRenderProps>
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> = 'react-aria-RadioGroup'
+ className?: ClassNameOrFunction<RadioGroupRenderProps>
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> = 'react-aria-Radio'
+ className?: ClassNameOrFunction<RadioRenderProps>
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> = 'react-aria-SearchField'
+ className?: ClassNameOrFunction<SearchFieldRenderProps>
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 {} = {
}> {
- allowsEmptyCollection?: boolean
aria-describedby?: string
aria-details?: string
aria-label?: string
aria-labelledby?: string
autoComplete?: string
autoFocus?: boolean
children?: ChildrenOrFunction<SelectRenderProps>
- className?: ClassNameOrFunction<SelectRenderProps> = 'react-aria-Select'
+ className?: ClassNameOrFunction<SelectRenderProps>
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<{}>> = 'react-aria-SelectValue'
+ className?: ClassNameOrFunction<SelectValueRenderProps<{}>>
style?: StyleOrFunction<SelectValueRenderProps<{}>>
} /react-aria-components:SelectionIndicator-SelectionIndicator {
- children?: ChildrenOrFunction<SharedElementRenderProps>
- className?: ClassNameOrFunction<SharedElementRenderProps> = 'react-aria-SelectionIndicator'
- isSelected?: boolean
- style?: StyleOrFunction<SharedElementRenderProps>
-} /react-aria-components:SelectionIndicatorContext-SelectionIndicatorContext {
- UNTYPED
-} /react-aria-components:Separator Separator {
aria-describedby?: string
aria-details?: string
aria-label?: string
aria-labelledby?: string
- className?: string = 'react-aria-Separator'
+ className?: string
elementType?: string
id?: string
orientation?: Orientation = 'horizontal'
slot?: string | null
} /react-aria-components:SharedElementTransition-SharedElementTransition {
- children: ReactNode
-} /react-aria-components:SharedElement-SharedElement {
- children?: ChildrenOrFunction<SharedElementRenderProps>
- className?: ClassNameOrFunction<SharedElementRenderProps>
- isVisible?: boolean
- name: string
- style?: StyleOrFunction<SharedElementRenderProps>
-} /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> = 'react-aria-Slider'
+ className?: ClassNameOrFunction<SliderRenderProps>
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> = 'react-aria-SliderOutput'
+ className?: ClassNameOrFunction<SliderRenderProps>
style?: StyleOrFunction<SliderRenderProps>
} /react-aria-components:SliderTrack SliderTrack {
children?: ChildrenOrFunction<SliderTrackRenderProps>
- className?: ClassNameOrFunction<SliderTrackRenderProps> = 'react-aria-SliderTrack'
+ className?: ClassNameOrFunction<SliderTrackRenderProps>
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> = 'react-aria-SliderThumb'
+ className?: ClassNameOrFunction<SliderThumbRenderProps>
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> = 'react-aria-Switch'
+ className?: ClassNameOrFunction<SwitchRenderProps>
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 = 'react-aria-TableLoadMoreItem'
+ className?: string
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> = 'react-aria-Table'
+ className?: ClassNameOrFunction<TableRenderProps>
defaultSelectedKeys?: 'all' | Iterable<Key>
- disabledBehavior?: DisabledBehavior = "all"
+ disabledBehavior?: DisabledBehavior = "selection"
disabledKeys?: Iterable<Key>
disallowEmptySelection?: boolean
dragAndDropHooks?: DragAndDropHooks
escapeKeyBehavior?: 'clearSelection' | 'none' = 'clearSelection'
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> = 'react-aria-Row'
+ className?: ClassNameOrFunction<RowRenderProps>
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> = 'react-aria-Cell'
+ className?: ClassNameOrFunction<CellRenderProps>
colSpan?: number
id?: Key
style?: StyleOrFunction<CellRenderProps>
textValue?: string /react-aria-components:Column Column {
allowsSorting?: boolean
children?: ChildrenOrFunction<ColumnRenderProps>
- className?: ClassNameOrFunction<ColumnRenderProps> = 'react-aria-Column'
+ className?: ClassNameOrFunction<ColumnRenderProps>
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> = 'react-aria-ColumnResizer'
+ className?: ClassNameOrFunction<ColumnResizerRenderProps>
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> = 'react-aria-TableHeader'
+ className?: ClassNameOrFunction<TableHeaderRenderProps>
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> = 'react-aria-TableBody'
+ className?: ClassNameOrFunction<TableBodyRenderProps>
dependencies?: ReadonlyArray<any>
items?: Iterable<T>
renderEmptyState?: (TableBodyRenderProps) => ReactNode
style?: StyleOrFunction<TableBodyRenderProps> /react-aria-components:ResizableTableContainer ResizableTableContainer {
children?: ReactNode
- className?: string = 'react-aria-ResizableTableContainer'
+ className?: string
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> = 'react-aria-Tabs'
+ className?: ClassNameOrFunction<TabsRenderProps>
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> = 'react-aria-TabList'
+ className?: ClassNameOrFunction<TabListRenderProps>
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> = 'react-aria-TabPanel'
+ className?: ClassNameOrFunction<TabPanelRenderProps>
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> = 'react-aria-Tab'
+ className?: ClassNameOrFunction<TabRenderProps>
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 = 'react-aria-TagGroup'
+ className?: string
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> = 'react-aria-TagList'
+ className?: ClassNameOrFunction<TagListRenderProps>
dependencies?: ReadonlyArray<any>
items?: Iterable<T>
renderEmptyState?: (TagListRenderProps) => ReactNode
style?: StyleOrFunction<TagListRenderProps> /react-aria-components:Tag Tag {
children?: ChildrenOrFunction<TagRenderProps>
- className?: ClassNameOrFunction<TagRenderProps> = 'react-aria-Tag'
+ className?: ClassNameOrFunction<TagRenderProps>
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> = 'react-aria-TextArea'
+ className?: ClassNameOrFunction<InputRenderProps>
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> = 'react-aria-TextField'
+ className?: ClassNameOrFunction<TextFieldRenderProps>
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>> = 'react-aria-Toast'
+ className?: ClassNameOrFunction<ToastRenderProps<T>>
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>> = 'react-aria-ToastRegion'
+ className?: ClassNameOrFunction<ToastRegionRenderProps<T>>
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>> = 'react-aria-ToastRegion'
+ className?: ClassNameOrFunction<ToastRegionRenderProps<T>>
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> = 'react-aria-ToggleButton'
+ className?: ClassNameOrFunction<ToggleButtonRenderProps>
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> = 'react-aria-ToggleButtonGroup'
+ className?: ClassNameOrFunction<ToggleButtonGroupRenderProps>
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> = 'react-aria-Toolbar'
+ className?: ClassNameOrFunction<ToolbarRenderProps>
orientation?: Orientation = 'horizontal'
slot?: string | null
style?: StyleOrFunction<ToolbarRenderProps>
} /react-aria-components:TooltipTrigger TooltipTrigger {
children: ReactNode
closeDelay?: number = 500
- closeOnPress?: boolean = true
defaultOpen?: boolean
delay?: number = 1500
isDisabled?: boolean
isOpen?: boolean
trigger?: 'hover' | 'focus' = 'hover'
} /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> = 'react-aria-Tooltip'
+ className?: ClassNameOrFunction<TooltipRenderProps>
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> = 'react-aria-TreeLoadMoreItem'
+ className?: ClassNameOrFunction<TreeLoadMoreItemRenderProps>
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> = 'react-aria-Tree'
+ className?: ClassNameOrFunction<TreeRenderProps>
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> = 'react-aria-TreeItem'
+ className?: ClassNameOrFunction<TreeItemRenderProps>
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<TreeItemContentRenderProps>
+ children?: ChildrenOrFunction<T>
} /react-aria-components:DropIndicator DropIndicator {
children?: ChildrenOrFunction<DropIndicatorRenderProps>
- className?: ClassNameOrFunction<DropIndicatorRenderProps> = 'react-aria-DropIndicator'
+ className?: ClassNameOrFunction<DropIndicatorRenderProps>
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 = 'react-aria-Breadcrumbs'
+ className?: string
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> = 'react-aria-Breadcrumb'
+ className?: ClassNameOrFunction<BreadcrumbRenderProps>
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> = 'react-aria-Button'
+ className?: ClassNameOrFunction<ButtonRenderProps>
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> = 'react-aria-CalendarCell'
+ className?: ClassNameOrFunction<CalendarCellRenderProps>
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> = 'react-aria-Calendar'
+ className?: ClassNameOrFunction<CalendarRenderProps>
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 = 'react-aria-CalendarGrid'
+ className?: string
offset?: DateDuration
style?: CSSProperties
weekdayStyle?: 'narrow' | 'short' | 'long' = "narrow"
} /react-aria-components:CalendarGridHeaderProps CalendarGridHeaderProps {
children: (string) => ReactElement
- className?: string = 'react-aria-CalendarGridHeader'
+ className?: string
style?: CSSProperties
} /react-aria-components:CalendarGridBodyProps CalendarGridBodyProps {
children: (CalendarDate) => ReactElement
- className?: string = 'react-aria-CalendarGridBody'
+ className?: string
style?: CSSProperties
} /react-aria-components:CalendarHeaderCellProps CalendarHeaderCellProps {
children?: ReactNode
- className?: string = 'react-aria-CalendarHeaderCell'
+ className?: string
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> = 'react-aria-RangeCalendar'
+ className?: ClassNameOrFunction<RangeCalendarRenderProps>
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> = 'react-aria-CheckboxGroup'
+ className?: ClassNameOrFunction<CheckboxGroupRenderProps>
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> = 'react-aria-Checkbox'
+ className?: ClassNameOrFunction<CheckboxRenderProps>
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> = 'react-aria-ColorArea'
+ className?: ClassNameOrFunction<ColorAreaRenderProps>
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> = 'react-aria-ColorField'
+ className?: ClassNameOrFunction<ColorFieldRenderProps>
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> = 'react-aria-ColorSlider'
+ className?: ClassNameOrFunction<ColorSliderRenderProps>
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> = 'react-aria-ColorSwatch'
+ className?: ClassNameOrFunction<ColorSwatchRenderProps>
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> = 'react-aria-ColorSwatchPicker'
+ className?: ClassNameOrFunction<ColorSwatchPickerRenderProps>
defaultValue?: string | Color
layout?: 'grid' | 'stack' = 'grid'
onChange?: (Color) => void
style?: StyleOrFunction<ColorSwatchPickerRenderProps>
} /react-aria-components:ColorSwatchPickerItemProps ColorSwatchPickerItemProps {
children?: ChildrenOrFunction<ColorSwatchPickerItemRenderProps>
- className?: ClassNameOrFunction<ColorSwatchPickerItemRenderProps> = 'react-aria-ColorSwatchPickerItem'
+ className?: ClassNameOrFunction<ColorSwatchPickerItemRenderProps>
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> = 'react-aria-ColorThumb'
+ className?: ClassNameOrFunction<ColorThumbRenderProps>
onHoverChange?: (boolean) => void
onHoverEnd?: (HoverEvent) => void
onHoverStart?: (HoverEvent) => void
style?: StyleOrFunction<ColorThumbRenderProps> /react-aria-components:ColorPickerProps ColorPickerProps {
- children: ChildrenOrFunction<ColorPickerRenderProps>
+ children?: ChildrenOrFunction<T>
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> = 'react-aria-ColorWheel'
+ className?: ClassNameOrFunction<ColorWheelRenderProps>
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> = 'react-aria-ColorWheelTrack'
+ className?: ClassNameOrFunction<ColorWheelTrackRenderProps>
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> = 'react-aria-ComboBox'
+ className?: ClassNameOrFunction<ComboBoxRenderProps>
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> = 'react-aria-DateField'
+ className?: ClassNameOrFunction<DateFieldRenderProps>
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> = 'react-aria-DateInput'
+ className?: ClassNameOrFunction<DateInputRenderProps>
slot?: string | null
style?: StyleOrFunction<DateInputRenderProps>
} /react-aria-components:DateSegmentProps DateSegmentProps {
children?: ChildrenOrFunction<DateSegmentRenderProps>
- className?: ClassNameOrFunction<DateSegmentRenderProps> = 'react-aria-DateSegment'
+ className?: ClassNameOrFunction<DateSegmentRenderProps>
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> = 'react-aria-TimeField'
+ className?: ClassNameOrFunction<DateFieldRenderProps>
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> = 'react-aria-DatePicker'
+ className?: ClassNameOrFunction<DatePickerRenderProps>
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> = 'react-aria-DateRangePicker'
+ className?: ClassNameOrFunction<DateRangePickerRenderProps>
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 = 'react-aria-Dialog'
+ className?: string
id?: string
role?: 'dialog' | 'alertdialog' = 'dialog'
slot?: string | null
style?: CSSProperties /react-aria-components:DisclosureProps DisclosureProps {
children?: ChildrenOrFunction<DisclosureRenderProps>
- className?: ClassNameOrFunction<DisclosureRenderProps> = 'react-aria-Disclosure'
+ className?: ClassNameOrFunction<DisclosureRenderProps>
defaultExpanded?: boolean
id?: Key
isDisabled?: boolean
isExpanded?: boolean
slot?: string | null
style?: StyleOrFunction<DisclosureRenderProps>
} /react-aria-components:DisclosurePanelProps DisclosurePanelProps {
children: ReactNode
- className?: ClassNameOrFunction<DisclosurePanelRenderProps> = 'react-aria-DisclosurePanel'
+ className?: ClassNameOrFunction<DisclosurePanelRenderProps>
id?: string
role?: 'group' | 'region' = 'group'
style?: StyleOrFunction<DisclosurePanelRenderProps>
} /react-aria-components:DisclosureGroupProps DisclosureGroupProps {
allowsMultipleExpanded?: boolean
children?: ChildrenOrFunction<DisclosureGroupRenderProps>
- className?: ClassNameOrFunction<DisclosureGroupRenderProps> = 'react-aria-DisclosureGroup'
+ className?: ClassNameOrFunction<DisclosureGroupRenderProps>
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> = 'react-aria-DropZone'
+ className?: ClassNameOrFunction<DropZoneRenderProps>
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> = 'react-aria-FieldError'
+ className?: ClassNameOrFunction<FieldErrorRenderProps>
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 = 'react-aria-Form'
+ className?: string
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> = 'react-aria-GridList'
+ className?: ClassNameOrFunction<GridListRenderProps>
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> = 'react-aria-GridListItem'
+ className?: ClassNameOrFunction<GridListItemRenderProps>
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:GridListItemRenderProps GridListItemRenderProps {
allowsDragging?: boolean
isDisabled: boolean
isDragging?: boolean
isDropTarget?: boolean
+ isFirstItem: boolean
isFocusVisible: boolean
isFocused: boolean
isHovered: boolean
+ isLastItem: boolean
+ isNextSelected: boolean
isPressed: boolean
+ isPrevSelected: boolean
isSelected: boolean
selectionBehavior: SelectionBehavior
selectionMode: SelectionMode
} /react-aria-components:GridListLoadMoreItemProps GridListLoadMoreItemProps {
children?: ReactNode
- className?: string = 'react-aria-GridListLoadMoreItem'
+ className?: string
isLoading?: boolean
onLoadMore?: () => any
scrollOffset?: number = 1
style?: CSSProperties /react-aria-components:GridListSectionProps-GridListSectionProps <T> {
- aria-label?: string
- children?: ReactNode | (T) => ReactElement
- className?: string = 'react-aria-GridListSection'
- dependencies?: ReadonlyArray<any>
- id?: Key
- items?: Iterable<T>
- style?: CSSProperties
- value?: T
-} /react-aria-components:GroupProps GroupProps {
aria-describedby?: string
aria-details?: string
aria-label?: string
aria-labelledby?: string
children?: ChildrenOrFunction<GroupRenderProps>
- className?: ClassNameOrFunction<GroupRenderProps> = 'react-aria-Group'
+ className?: ClassNameOrFunction<GroupRenderProps>
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> = 'react-aria-Input'
+ className?: ClassNameOrFunction<InputRenderProps>
onHoverChange?: (boolean) => void
onHoverEnd?: (HoverEvent) => void
onHoverStart?: (HoverEvent) => void
- placeholder?: string
style?: StyleOrFunction<InputRenderProps>
} /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> = 'react-aria-Link'
+ className?: ClassNameOrFunction<LinkRenderProps>
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> = 'react-aria-ListBox'
+ className?: ClassNameOrFunction<ListBoxRenderProps>
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> = 'react-aria-ListBoxItem'
+ className?: ClassNameOrFunction<ListBoxItemRenderProps>
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 = 'react-aria-ListBoxSection'
+ className?: string
dependencies?: ReadonlyArray<any>
id?: Key
items?: Iterable<T>
style?: CSSProperties
} /react-aria-components:ListBoxLoadMoreItemProps ListBoxLoadMoreItemProps {
children?: ReactNode
- className?: string = 'react-aria-ListBoxLoadMoreItem'
+ className?: string
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> = 'react-aria-Menu'
+ className?: ClassNameOrFunction<MenuRenderProps>
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> = 'react-aria-MenuItem'
+ className?: ClassNameOrFunction<MenuItemRenderProps>
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 = 'react-aria-MenuSection'
+ className?: string
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> = 'react-aria-Meter'
+ className?: ClassNameOrFunction<MeterRenderProps>
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> = 'react-aria-ModalOverlay'
+ className?: ClassNameOrFunction<ModalRenderProps>
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> = 'react-aria-NumberField'
+ className?: ClassNameOrFunction<NumberFieldRenderProps>
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> = 'react-aria-OverlayArrow'
+ className?: ClassNameOrFunction<OverlayArrowRenderProps>
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> = 'react-aria-Popover'
+ className?: ClassNameOrFunction<PopoverRenderProps>
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> = 'react-aria-ProgressBar'
+ className?: ClassNameOrFunction<ProgressBarRenderProps>
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> = 'react-aria-RadioGroup'
+ className?: ClassNameOrFunction<RadioGroupRenderProps>
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> = 'react-aria-Radio'
+ className?: ClassNameOrFunction<RadioRenderProps>
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> = 'react-aria-SearchField'
+ className?: ClassNameOrFunction<SearchFieldRenderProps>
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:SearchFieldRenderProps SearchFieldRenderProps {
isDisabled: boolean
isEmpty: boolean
isInvalid: boolean
- isReadOnly: boolean
- isRequired: boolean
state: SearchFieldState
} /react-aria-components:SelectProps SelectProps <M extends SelectionMode = 'single', T extends {} = {
}> {
- allowsEmptyCollection?: boolean
aria-describedby?: string
aria-details?: string
aria-label?: string
aria-labelledby?: string
autoComplete?: string
autoFocus?: boolean
children?: ChildrenOrFunction<SelectRenderProps>
- className?: ClassNameOrFunction<SelectRenderProps> = 'react-aria-Select'
+ className?: ClassNameOrFunction<SelectRenderProps>
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<{}>> = 'react-aria-SelectValue'
+ className?: ClassNameOrFunction<SelectValueRenderProps<{}>>
style?: StyleOrFunction<SelectValueRenderProps<{}>>
} /react-aria-components:SelectionIndicatorProps-SelectionIndicatorProps {
- children?: ChildrenOrFunction<SharedElementRenderProps>
- className?: ClassNameOrFunction<SharedElementRenderProps> = 'react-aria-SelectionIndicator'
- isSelected?: boolean
- style?: StyleOrFunction<SharedElementRenderProps>
-} /react-aria-components:SharedElementTransitionProps-SharedElementTransitionProps {
- children: ReactNode
-} /react-aria-components:SharedElementProps-SharedElementProps {
- children?: ChildrenOrFunction<SharedElementRenderProps>
- className?: ClassNameOrFunction<SharedElementRenderProps>
- isVisible?: boolean
- name: string
- style?: StyleOrFunction<SharedElementRenderProps>
-} /react-aria-components:SharedElementRenderProps-SharedElementRenderProps {
- isEntering: boolean
- isExiting: boolean
-} /react-aria-components:SeparatorProps SeparatorProps {
aria-describedby?: string
aria-details?: string
aria-label?: string
aria-labelledby?: string
- className?: string = 'react-aria-Separator'
+ className?: string
elementType?: string
id?: string
orientation?: Orientation = 'horizontal'
slot?: string | null
} /react-aria-components:SliderOutputProps SliderOutputProps {
children?: ChildrenOrFunction<SliderRenderProps>
- className?: ClassNameOrFunction<SliderRenderProps> = 'react-aria-SliderOutput'
+ className?: ClassNameOrFunction<SliderRenderProps>
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> = 'react-aria-Slider'
+ className?: ClassNameOrFunction<SliderRenderProps>
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> = 'react-aria-SliderThumb'
+ className?: ClassNameOrFunction<SliderThumbRenderProps>
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> = 'react-aria-SliderTrack'
+ className?: ClassNameOrFunction<SliderTrackRenderProps>
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> = 'react-aria-Switch'
+ className?: ClassNameOrFunction<SwitchRenderProps>
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> = 'react-aria-Table'
+ className?: ClassNameOrFunction<TableRenderProps>
defaultSelectedKeys?: 'all' | Iterable<Key>
- disabledBehavior?: DisabledBehavior = "all"
+ disabledBehavior?: DisabledBehavior = "selection"
disabledKeys?: Iterable<Key>
disallowEmptySelection?: boolean
dragAndDropHooks?: DragAndDropHooks
escapeKeyBehavior?: 'clearSelection' | 'none' = 'clearSelection'
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> = 'react-aria-TableHeader'
+ className?: ClassNameOrFunction<TableHeaderRenderProps>
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> = 'react-aria-TableBody'
+ className?: ClassNameOrFunction<TableBodyRenderProps>
dependencies?: ReadonlyArray<any>
items?: Iterable<T>
renderEmptyState?: (TableBodyRenderProps) => ReactNode
style?: StyleOrFunction<TableBodyRenderProps> /react-aria-components:ResizableTableContainerProps ResizableTableContainerProps {
children?: ReactNode
- className?: string = 'react-aria-ResizableTableContainer'
+ className?: string
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> = 'react-aria-Column'
+ className?: ClassNameOrFunction<ColumnRenderProps>
defaultWidth?: ColumnSize | null
id?: Key
isRowHeader?: boolean
maxWidth?: ColumnStaticSize | null
style?: StyleOrFunction<ColumnRenderProps>
textValue?: string
width?: ColumnSize | null
} /react-aria-components:ColumnRenderProps ColumnRenderProps {
allowsSorting: boolean
isFocusVisible: boolean
isFocused: boolean
isHovered: boolean
- isPressed: boolean
isResizing: boolean
sort: (SortDirection) => void
sortDirection: SortDirection | undefined
startResize: () => void /react-aria-components:ColumnResizerProps ColumnResizerProps {
aria-label?: string
children?: ChildrenOrFunction<ColumnResizerRenderProps>
- className?: ClassNameOrFunction<ColumnResizerRenderProps> = 'react-aria-ColumnResizer'
+ className?: ClassNameOrFunction<ColumnResizerRenderProps>
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> = 'react-aria-Row'
+ className?: ClassNameOrFunction<RowRenderProps>
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:RowRenderProps RowRenderProps {
allowsDragging?: boolean
id?: Key
isDisabled: boolean
isDragging?: boolean
isDropTarget?: boolean
isFocusVisible: boolean
isFocusVisibleWithin: boolean
isFocused: boolean
isHovered: boolean
+ isNextSelected: boolean
isPressed: boolean
+ isPreviousSelected: boolean
isSelected: boolean
selectionBehavior: SelectionBehavior
selectionMode: SelectionMode
} /react-aria-components:CellProps CellProps {
children?: ChildrenOrFunction<CellRenderProps>
- className?: ClassNameOrFunction<CellRenderProps> = 'react-aria-Cell'
+ className?: ClassNameOrFunction<CellRenderProps>
colSpan?: number
id?: Key
style?: StyleOrFunction<CellRenderProps>
textValue?: string /react-aria-components:TableLoadMoreItemProps TableLoadMoreItemProps {
children?: ReactNode
- className?: string = 'react-aria-TableLoadMoreItem'
+ className?: string
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> = 'react-aria-TabList'
+ className?: ClassNameOrFunction<TabListRenderProps>
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> = 'react-aria-TabPanel'
+ className?: ClassNameOrFunction<TabPanelRenderProps>
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> = 'react-aria-Tab'
+ className?: ClassNameOrFunction<TabRenderProps>
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> = 'react-aria-Tabs'
+ className?: ClassNameOrFunction<TabsRenderProps>
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 = 'react-aria-TagGroup'
+ className?: string
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> = 'react-aria-TagList'
+ className?: ClassNameOrFunction<TagListRenderProps>
dependencies?: ReadonlyArray<any>
items?: Iterable<T>
renderEmptyState?: (TagListRenderProps) => ReactNode
style?: StyleOrFunction<TagListRenderProps> /react-aria-components:TagProps TagProps {
children?: ChildrenOrFunction<TagRenderProps>
- className?: ClassNameOrFunction<TagRenderProps> = 'react-aria-Tag'
+ className?: ClassNameOrFunction<TagRenderProps>
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> = 'react-aria-TextArea'
+ className?: ClassNameOrFunction<InputRenderProps>
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> = 'react-aria-TextField'
+ className?: ClassNameOrFunction<TextFieldRenderProps>
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>> = 'react-aria-ToastRegion'
+ className?: ClassNameOrFunction<ToastRegionRenderProps<T>>
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>> = 'react-aria-ToastRegion'
+ className?: ClassNameOrFunction<ToastRegionRenderProps<T>>
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>> = 'react-aria-Toast'
+ className?: ClassNameOrFunction<ToastRenderProps<T>>
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> = 'react-aria-ToggleButton'
+ className?: ClassNameOrFunction<ToggleButtonRenderProps>
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> = 'react-aria-ToggleButtonGroup'
+ className?: ClassNameOrFunction<ToggleButtonGroupRenderProps>
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> = 'react-aria-Toolbar'
+ className?: ClassNameOrFunction<ToolbarRenderProps>
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> = 'react-aria-Tooltip'
+ className?: ClassNameOrFunction<TooltipRenderProps>
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:TooltipTriggerComponentProps TooltipTriggerComponentProps {
children: ReactNode
closeDelay?: number = 500
- closeOnPress?: boolean = true
defaultOpen?: boolean
delay?: number = 1500
isDisabled?: boolean
isOpen?: boolean
trigger?: 'hover' | 'focus' = 'hover'
} /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> = 'react-aria-Tree'
+ className?: ClassNameOrFunction<TreeRenderProps>
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> = 'react-aria-TreeItem'
+ className?: ClassNameOrFunction<TreeItemRenderProps>
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<TreeItemContentRenderProps>
+ children?: ChildrenOrFunction<T>
} /react-aria-components:TreeLoadMoreItemProps TreeLoadMoreItemProps {
children?: ChildrenOrFunction<TreeLoadMoreItemRenderProps>
- className?: ClassNameOrFunction<TreeLoadMoreItemRenderProps> = 'react-aria-TreeLoadMoreItem'
+ className?: ClassNameOrFunction<TreeLoadMoreItemRenderProps>
isLoading?: boolean
onLoadMore?: () => any
scrollOffset?: number = 1
style?: StyleOrFunction<TreeLoadMoreItemRenderProps> /react-aria-components:DropIndicatorProps DropIndicatorProps {
children?: ChildrenOrFunction<DropIndicatorRenderProps>
- className?: ClassNameOrFunction<DropIndicatorRenderProps> = 'react-aria-DropIndicator'
+ className?: ClassNameOrFunction<DropIndicatorRenderProps>
style?: StyleOrFunction<DropIndicatorRenderProps>
target: DropTarget
} /react-aria-components:RangeCalendarState-RangeCalendarState <T extends DateValue = DateValue> {
+RangeCalendarState {
anchorDate: CalendarDate | null
focusNextDay: () => void
focusNextPage: () => void
focusNextSection: (boolean) => void
focusPreviousDay: () => void
focusPreviousPage: () => void
focusPreviousRow: () => void
focusPreviousSection: (boolean) => void
focusSectionEnd: () => void
focusSectionStart: () => void
focusedDate: CalendarDate
getDatesInWeek: (number, CalendarDate) => Array<CalendarDate | null>
highlightDate: (CalendarDate) => void
highlightedRange: RangeValue<CalendarDate> | null
isCellDisabled: (CalendarDate) => boolean
isCellFocused: (CalendarDate) => boolean
isCellUnavailable: (CalendarDate) => boolean
isDisabled: boolean
isDragging: boolean
isFocused: boolean
isInvalid: (CalendarDate) => boolean
isNextVisibleRangeInvalid: () => boolean
isPreviousVisibleRangeInvalid: () => boolean
isReadOnly: boolean
isSelected: (CalendarDate) => boolean
isValueInvalid: boolean
maxValue?: DateValue | null
minValue?: DateValue | null
selectDate: (CalendarDate) => void
selectFocusedDate: () => void
setAnchorDate: (CalendarDate | null) => void
setDragging: (boolean) => void
setFocused: (boolean) => void
setFocusedDate: (CalendarDate) => void
setValue: (RangeValue<DateValue> | null) => void
timeZone: string
value: RangeValue<DateValue> | null
visibleRange: RangeValue<CalendarDate>
} /react-aria-components:SelectableCollectionContextValue-SelectableCollectionContextValue <T> {
- aria-describedby?: string
- aria-details?: string
- aria-label?: string
- aria-labelledby?: string
- disallowTypeAhead?: boolean
- filter?: (string, Node<T>) => boolean
- id?: string
- shouldUseVirtualFocus?: boolean
-} /react-aria-components:UNSTABLE_createLeafComponent+UNSTABLE_createLeafComponent <E extends Element, P extends {}> {
+ CollectionNodeClass: {}<any> | string
+ render: (P, ForwardedRef<E>, any) => ReactElement | null
+ returnVal: undefined
+} /react-aria-components:UNSTABLE_createBranchComponent+UNSTABLE_createBranchComponent <E extends Element, P extends {
+ children?: any
+}, T extends {}> {
+ CollectionNodeClass: {}<any> | string
+ render: (P, ForwardedRef<E>, Node<T>) => ReactElement | null
+ useChildren: (P) => ReactNode
+ returnVal: undefined
+} /react-aria-components:UNSTABLE_CollectionBuilder+UNSTABLE_CollectionBuilder <C extends BaseCollection<{}>> {
+ children: (BaseCollection<{}>) => ReactNode
+ content: ReactNode
+ createCollection?: () => BaseCollection<{}>
+} @react-aria/disclosure/@react-aria/disclosure:useDisclosure useDisclosure {
props: AriaDisclosureProps
state: DisclosureState
- ref: RefObject<HTMLElement | null>
+ ref: RefObject<Element | null>
returnVal: undefined
} @react-aria/select/@react-aria/select:AriaSelectOptions AriaSelectOptions <M extends SelectionMode = 'single', T> {
- allowsEmptyCollection?: boolean
aria-describedby?: string
aria-details?: string
aria-label?: string
aria-labelledby?: string
autoFocus?: boolean
defaultOpen?: boolean
defaultValue?: ValueType<SelectionMode>
description?: ReactNode
disabledKeys?: Iterable<Key>
errorMessage?: ReactNode | (ValidationResult) => ReactNode
excludeFromTabOrder?: boolean
form?: string
id?: string
isDisabled?: boolean
isInvalid?: boolean
isOpen?: boolean
isRequired?: boolean
items?: Iterable<T>
keyboardDelegate?: KeyboardDelegate
label?: ReactNode
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
selectionMode?: SelectionMode = 'single'
validate?: (ValidationType<SelectionMode>) => ValidationError | boolean | null | undefined
validationBehavior?: 'aria' | 'native' = 'aria'
value?: ValueType<SelectionMode>
} /@react-aria/select:AriaSelectProps AriaSelectProps <M extends SelectionMode = 'single', T> {
- allowsEmptyCollection?: boolean
aria-describedby?: string
aria-details?: string
aria-label?: string
aria-labelledby?: string
autoFocus?: boolean
children: CollectionChildren<T>
defaultOpen?: boolean
defaultValue?: ValueType<SelectionMode>
description?: ReactNode
disabledKeys?: Iterable<Key>
errorMessage?: ReactNode | (ValidationResult) => ReactNode
excludeFromTabOrder?: boolean
form?: string
id?: string
isDisabled?: boolean
isInvalid?: boolean
isOpen?: boolean
isRequired?: boolean
items?: Iterable<T>
label?: ReactNode
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
selectionMode?: SelectionMode = 'single'
validate?: (ValidationType<SelectionMode>) => ValidationError | boolean | null | undefined
validationBehavior?: 'aria' | 'native' = 'aria'
value?: ValueType<SelectionMode>
} @react-aria/table/@react-aria/table:TableColumnHeaderAria TableColumnHeaderAria {
columnHeaderProps: DOMAttributes
- isPressed: boolean
} @react-aria/tooltip/@react-aria/tooltip:TooltipTriggerProps TooltipTriggerProps {
closeDelay?: number = 500
- closeOnPress?: boolean = true
defaultOpen?: boolean
delay?: number = 1500
isDisabled?: boolean
isOpen?: boolean
trigger?: 'hover' | 'focus' = 'hover'
} @react-aria/utils/@react-aria/utils:willOpenKeyboard-willOpenKeyboard {
- target: Element
- returnVal: undefined
-} @react-spectrum/picker/@react-spectrum/picker:Picker Picker <T extends {}> {
UNSAFE_className?: string
UNSAFE_style?: CSSProperties
align?: Alignment = 'start'
alignSelf?: Responsive<'auto' | 'normal' | 'start' | 'end' | 'center' | 'flex-start' | 'flex-end' | 'self-start' | 'self-end' | 'stretch'>
- allowsEmptyCollection?: boolean
aria-describedby?: string
aria-details?: string
aria-label?: string
aria-labelledby?: string
autoFocus?: boolean
bottom?: Responsive<DimensionValue>
children: CollectionChildren<{}>
contextualHelp?: ReactNode
defaultOpen?: boolean
defaultSelectedKey?: Key
description?: ReactNode
direction?: 'bottom' | 'top' = 'bottom'
disabledKeys?: Iterable<Key>
end?: Responsive<DimensionValue>
errorMessage?: ReactNode | (ValidationResult) => ReactNode
excludeFromTabOrder?: boolean
flex?: Responsive<string | number | boolean>
flexBasis?: Responsive<number | string>
flexGrow?: Responsive<number>
flexShrink?: Responsive<number>
form?: string
gridArea?: Responsive<string>
gridColumn?: Responsive<string>
gridColumnEnd?: Responsive<string>
gridColumnStart?: Responsive<string>
gridRow?: Responsive<string>
gridRowEnd?: Responsive<string>
gridRowStart?: Responsive<string>
height?: Responsive<DimensionValue>
id?: string
isDisabled?: boolean
isHidden?: Responsive<boolean>
isInvalid?: boolean
isLoading?: boolean
isOpen?: boolean
isQuiet?: boolean
isRequired?: boolean
items?: Iterable<{}>
justifySelf?: Responsive<'auto' | 'normal' | 'start' | 'end' | 'flex-start' | 'flex-end' | 'self-start' | 'self-end' | 'center' | 'left' | 'right' | 'stretch'>
label?: ReactNode
labelAlign?: Alignment = 'start'
labelPosition?: LabelPosition = 'top'
left?: Responsive<DimensionValue>
margin?: Responsive<DimensionValue>
marginBottom?: Responsive<DimensionValue>
marginEnd?: Responsive<DimensionValue>
marginStart?: Responsive<DimensionValue>
marginTop?: Responsive<DimensionValue>
marginX?: Responsive<DimensionValue>
marginY?: Responsive<DimensionValue>
maxHeight?: Responsive<DimensionValue>
maxWidth?: Responsive<DimensionValue>
menuWidth?: DimensionValue
minHeight?: Responsive<DimensionValue>
minWidth?: Responsive<DimensionValue>
name?: string
necessityIndicator?: NecessityIndicator = 'icon'
onBlur?: (FocusEvent<Target>) => void
onFocus?: (FocusEvent<Target>) => void
onFocusChange?: (boolean) => void
onKeyDown?: (KeyboardEvent) => void
onKeyUp?: (KeyboardEvent) => void
onLoadMore?: () => any
onOpenChange?: (boolean) => void
onSelectionChange?: (Key | null) => void
order?: Responsive<number>
placeholder?: string
position?: Responsive<'static' | 'relative' | 'absolute' | 'fixed' | 'sticky'>
right?: Responsive<DimensionValue>
selectedKey?: Key | null
shouldFlip?: boolean = true
start?: Responsive<DimensionValue>
top?: Responsive<DimensionValue>
validate?: (ValidationType<SelectionMode>) => ValidationError | boolean | null | undefined
validationBehavior?: 'aria' | 'native' = 'aria'
width?: Responsive<DimensionValue>
zIndex?: Responsive<number>
} /@react-spectrum/picker:SpectrumPickerProps SpectrumPickerProps <T> {
UNSAFE_className?: string
UNSAFE_style?: CSSProperties
align?: Alignment = 'start'
alignSelf?: Responsive<'auto' | 'normal' | 'start' | 'end' | 'center' | 'flex-start' | 'flex-end' | 'self-start' | 'self-end' | 'stretch'>
- allowsEmptyCollection?: boolean
aria-describedby?: string
aria-details?: string
aria-label?: string
aria-labelledby?: string
autoFocus?: boolean
bottom?: Responsive<DimensionValue>
children: CollectionChildren<T>
contextualHelp?: ReactNode
defaultOpen?: boolean
defaultSelectedKey?: Key
description?: ReactNode
direction?: 'bottom' | 'top' = 'bottom'
disabledKeys?: Iterable<Key>
end?: Responsive<DimensionValue>
errorMessage?: ReactNode | (ValidationResult) => ReactNode
excludeFromTabOrder?: boolean
flex?: Responsive<string | number | boolean>
flexBasis?: Responsive<number | string>
flexGrow?: Responsive<number>
flexShrink?: Responsive<number>
form?: string
gridArea?: Responsive<string>
gridColumn?: Responsive<string>
gridColumnEnd?: Responsive<string>
gridColumnStart?: Responsive<string>
gridRow?: Responsive<string>
gridRowEnd?: Responsive<string>
gridRowStart?: Responsive<string>
height?: Responsive<DimensionValue>
id?: string
isDisabled?: boolean
isHidden?: Responsive<boolean>
isInvalid?: boolean
isLoading?: boolean
isOpen?: boolean
isQuiet?: boolean
isRequired?: boolean
items?: Iterable<T>
justifySelf?: Responsive<'auto' | 'normal' | 'start' | 'end' | 'flex-start' | 'flex-end' | 'self-start' | 'self-end' | 'center' | 'left' | 'right' | 'stretch'>
label?: ReactNode
labelAlign?: Alignment = 'start'
labelPosition?: LabelPosition = 'top'
left?: Responsive<DimensionValue>
margin?: Responsive<DimensionValue>
marginBottom?: Responsive<DimensionValue>
marginEnd?: Responsive<DimensionValue>
marginStart?: Responsive<DimensionValue>
marginTop?: Responsive<DimensionValue>
marginX?: Responsive<DimensionValue>
marginY?: Responsive<DimensionValue>
maxHeight?: Responsive<DimensionValue>
maxWidth?: Responsive<DimensionValue>
menuWidth?: DimensionValue
minHeight?: Responsive<DimensionValue>
minWidth?: Responsive<DimensionValue>
name?: string
necessityIndicator?: NecessityIndicator = 'icon'
onBlur?: (FocusEvent<Target>) => void
onFocus?: (FocusEvent<Target>) => void
onFocusChange?: (boolean) => void
onKeyDown?: (KeyboardEvent) => void
onKeyUp?: (KeyboardEvent) => void
onLoadMore?: () => any
onOpenChange?: (boolean) => void
onSelectionChange?: (Key | null) => void
order?: Responsive<number>
placeholder?: string
position?: Responsive<'static' | 'relative' | 'absolute' | 'fixed' | 'sticky'>
right?: Responsive<DimensionValue>
selectedKey?: Key | null
shouldFlip?: boolean = true
start?: Responsive<DimensionValue>
top?: Responsive<DimensionValue>
validate?: (ValidationType<SelectionMode>) => ValidationError | boolean | null | undefined
validationBehavior?: 'aria' | 'native' = 'aria'
width?: Responsive<DimensionValue>
zIndex?: Responsive<number>
} @react-spectrum/s2/@react-spectrum/s2:UserCard UserCard {
UNSAFE_className?: UnsafeClassName
UNSAFE_style?: CSSProperties
children: ReactNode | (CardRenderProps) => ReactNode
+ density?: 'compact' | 'regular' | 'spacious' = 'regular'
download?: boolean | string
href?: Href
hrefLang?: string
id?: Key
isDisabled?: boolean
onAction?: () => void
onPress?: (PressEvent) => void
onPressChange?: (boolean) => void
onPressEnd?: (PressEvent) => void
onPressStart?: (PressEvent) => void
onPressUp?: (PressEvent) => void
ping?: string
referrerPolicy?: HTMLAttributeReferrerPolicy
rel?: string
routerOptions?: RouterOptions
size?: 'XS' | 'S' | 'M' | 'L' | 'XL' = 'M'
styles?: StylesProp
target?: HTMLAttributeAnchorTarget
textValue?: string
value?: T
- variant?: 'primary' | 'secondary' | 'tertiary'
+ variant?: 'primary' | 'secondary' | 'tertiary' | 'quiet' = 'primary'
} /@react-spectrum/s2:ColorField ColorField {
UNSAFE_className?: UnsafeClassName
UNSAFE_style?: CSSProperties
aria-describedby?: string
aria-details?: string
aria-errormessage?: string
aria-label?: string
aria-labelledby?: string
autoFocus?: boolean
channel?: ColorChannel
colorSpace?: ColorSpace
contextualHelp?: ReactNode
defaultValue?: T
description?: ReactNode
errorMessage?: ReactNode | (ValidationResult) => ReactNode
excludeFromTabOrder?: boolean
form?: string
id?: string
isDisabled?: boolean
isInvalid?: boolean
isReadOnly?: boolean
isRequired?: boolean
isWheelDisabled?: boolean
label?: ReactNode
labelAlign?: Alignment = 'start'
labelPosition?: LabelPosition = 'top'
name?: string
necessityIndicator?: NecessityIndicator = 'icon'
onBeforeInput?: FormEventHandler<HTMLInputElement>
onBlur?: (FocusEvent<Target>) => void
onChange?: (Color | null) => void
onCompositionEnd?: CompositionEventHandler<HTMLInputElement>
onCompositionStart?: CompositionEventHandler<HTMLInputElement>
onCompositionUpdate?: CompositionEventHandler<HTMLInputElement>
onCopy?: ClipboardEventHandler<HTMLInputElement>
onCut?: ClipboardEventHandler<HTMLInputElement>
onFocus?: (FocusEvent<Target>) => void
onFocusChange?: (boolean) => void
onInput?: FormEventHandler<HTMLInputElement>
onKeyDown?: (KeyboardEvent) => void
onKeyUp?: (KeyboardEvent) => void
onPaste?: ClipboardEventHandler<HTMLInputElement>
onSelect?: ReactEventHandler<HTMLInputElement>
- placeholder?: string
size?: 'S' | 'M' | 'L' | 'XL' = 'M'
slot?: string | null
styles?: StylesProp
validate?: (Color | null) => ValidationError | boolean | null | undefined
value?: T
} /@react-spectrum/s2:ComboBox ComboBox <T extends {}> {
UNSAFE_className?: UnsafeClassName
UNSAFE_style?: CSSProperties
align?: 'start' | 'end' = 'start'
allowsCustomValue?: boolean
aria-describedby?: string
aria-details?: string
aria-label?: string
aria-labelledby?: string
autoFocus?: boolean
children: ReactNode | ({}) => ReactNode
contextualHelp?: ReactNode
defaultInputValue?: string
defaultItems?: Iterable<T>
defaultSelectedKey?: Key
dependencies?: ReadonlyArray<any>
description?: ReactNode
direction?: 'bottom' | 'top' = 'bottom'
disabledKeys?: Iterable<Key>
errorMessage?: ReactNode | (ValidationResult) => ReactNode
form?: string
formValue?: 'text' | 'key' = 'key'
id?: string
inputValue?: string
isDisabled?: boolean
isInvalid?: boolean
isReadOnly?: boolean
isRequired?: boolean
items?: Iterable<T>
label?: ReactNode
labelAlign?: Alignment = 'start'
labelPosition?: LabelPosition = 'top'
loadingState?: LoadingState
menuTrigger?: MenuTriggerAction = 'input'
menuWidth?: number
name?: string
necessityIndicator?: NecessityIndicator = 'icon'
onBlur?: (FocusEvent<HTMLInputElement>) => void
onFocus?: (FocusEvent<HTMLInputElement>) => void
onFocusChange?: (boolean) => void
onInputChange?: (string) => void
onKeyDown?: (KeyboardEvent) => void
onKeyUp?: (KeyboardEvent) => void
onLoadMore?: () => any
onOpenChange?: (boolean, MenuTriggerAction) => void
onSelectionChange?: (Key | null) => void
- placeholder?: string
selectedKey?: Key | null
shouldFlip?: boolean = true
shouldFocusWrap?: boolean
size?: 'S' | 'M' | 'L' | 'XL' = 'M'
styles?: StylesProp
validate?: (ComboBoxValidationValue) => ValidationError | boolean | null | undefined
validationBehavior?: 'native' | 'aria' = 'native'
} /@react-spectrum/s2:Dialog Dialog {
UNSAFE_className?: UnsafeClassName
UNSAFE_style?: CSSProperties
aria-describedby?: string
aria-details?: string
aria-label?: string
aria-labelledby?: string
children?: ReactNode | (DialogRenderProps) => ReactNode
id?: string
isDismissible?: boolean
isKeyboardDismissDisabled?: boolean
role?: 'dialog' | 'alertdialog' = 'dialog'
- size?: 'S' | 'M' | 'L' | 'XL' = 'M'
+ size?: 'S' | 'M' | 'L' = 'M'
slot?: string | null
styles?: StylesProp
} /@react-spectrum/s2:MenuSection MenuSection <T extends {}> {
aria-label?: string
children?: ReactNode | (T) => ReactElement
- className?: string = 'react-aria-MenuSection'
+ className?: string
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:NumberField NumberField {
UNSAFE_className?: UnsafeClassName
UNSAFE_style?: CSSProperties
aria-describedby?: string
aria-details?: string
aria-label?: string
aria-labelledby?: string
autoFocus?: boolean
contextualHelp?: ReactNode
decrementAriaLabel?: string
defaultValue?: number
description?: ReactNode
errorMessage?: ReactNode | (ValidationResult) => ReactNode
form?: string
formatOptions?: Intl.NumberFormatOptions
hideStepper?: boolean = false
id?: string
incrementAriaLabel?: string
isDisabled?: boolean
isInvalid?: boolean
isReadOnly?: boolean
isRequired?: boolean
isWheelDisabled?: boolean
label?: ReactNode
labelAlign?: Alignment = 'start'
labelPosition?: LabelPosition = 'top'
maxValue?: number
minValue?: number
name?: string
necessityIndicator?: NecessityIndicator = 'icon'
onBeforeInput?: FormEventHandler<HTMLInputElement>
onBlur?: (FocusEvent<Target>) => void
onChange?: (T) => void
onCompositionEnd?: CompositionEventHandler<HTMLInputElement>
onCompositionStart?: CompositionEventHandler<HTMLInputElement>
onCompositionUpdate?: CompositionEventHandler<HTMLInputElement>
onCopy?: ClipboardEventHandler<HTMLInputElement>
onCut?: ClipboardEventHandler<HTMLInputElement>
onFocus?: (FocusEvent<Target>) => void
onFocusChange?: (boolean) => void
onInput?: FormEventHandler<HTMLInputElement>
onKeyDown?: (KeyboardEvent) => void
onKeyUp?: (KeyboardEvent) => void
onPaste?: ClipboardEventHandler<HTMLInputElement>
onSelect?: ReactEventHandler<HTMLInputElement>
- placeholder?: string
size?: 'S' | 'M' | 'L' | 'XL' = 'M'
slot?: string | null
step?: number
styles?: StylesProp
validationBehavior?: 'native' | 'aria' = 'native'
value?: number
} /@react-spectrum/s2:Picker Picker <M extends SelectionMode = 'single', T extends {}> {
UNSAFE_className?: UnsafeClassName
UNSAFE_style?: CSSProperties
align?: 'start' | 'end' = 'start'
- allowsEmptyCollection?: boolean
aria-describedby?: string
aria-details?: string
aria-label?: string
aria-labelledby?: string
autoFocus?: boolean
children: ReactNode | ({}) => ReactNode
contextualHelp?: ReactNode
defaultOpen?: boolean
defaultValue?: ValueType<SelectionMode>
dependencies?: ReadonlyArray<any>
description?: ReactNode
direction?: 'bottom' | 'top' = 'bottom'
disabledKeys?: Iterable<Key>
errorMessage?: ReactNode | (ValidationResult) => ReactNode
excludeFromTabOrder?: boolean
form?: string
id?: string
isDisabled?: boolean
isInvalid?: boolean
isOpen?: boolean
isRequired?: boolean
items?: Iterable<T>
label?: ReactNode
labelAlign?: Alignment = 'start'
labelPosition?: LabelPosition = 'top'
loadingState?: LoadingState
menuWidth?: number
name?: string
necessityIndicator?: NecessityIndicator = 'icon'
onBlur?: (FocusEvent<Target>) => void
onChange?: (T) => void
onFocus?: (FocusEvent<Target>) => void
onFocusChange?: (boolean) => void
onKeyDown?: (KeyboardEvent) => void
onKeyUp?: (KeyboardEvent) => void
onLoadMore?: () => any
onOpenChange?: (boolean) => void
placeholder?: string = 'Select an item' (localized)
selectionMode?: SelectionMode = 'single'
shouldFlip?: boolean = true
size?: 'S' | 'M' | 'L' | 'XL' = 'M'
slot?: string | null
styles?: StylesProp
validate?: (ValidationType<SelectionMode>) => ValidationError | boolean | null | undefined
validationBehavior?: 'native' | 'aria' = 'native'
value?: ValueType<SelectionMode>
} /@react-spectrum/s2:Popover Popover {
UNSAFE_className?: UnsafeClassName
UNSAFE_style?: CSSProperties
aria-describedby?: string
aria-details?: string
aria-label?: string
aria-labelledby?: string
- children?: ChildrenOrFunction<PopoverRenderProps>
+ children?: ReactNode | (DialogRenderProps) => ReactNode
containerPadding?: number = 12
crossOffset?: number = 0
hideArrow?: boolean = false
id?: string
isOpen?: boolean
offset?: number = 8
onOpenChange?: (boolean) => void
- padding?: 'default' | 'none' = 'default'
placement?: Placement = 'bottom'
role?: 'dialog' | 'alertdialog' = 'dialog'
shouldFlip?: boolean = true
size?: 'S' | 'M' | 'L'
slot?: string | null
- styles?: PopoverStylesProp
+ styles?: StylesProp
triggerRef?: RefObject<Element | null>
} /@react-spectrum/s2:ColorSchemeContext-ColorSchemeContext {
- UNTYPED
-} /@react-spectrum/s2:SearchField SearchField {
UNSAFE_className?: UnsafeClassName
UNSAFE_style?: CSSProperties
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
contextualHelp?: ReactNode
defaultValue?: string
description?: ReactNode
enterKeyHint?: 'enter' | 'done' | 'go' | 'next' | 'previous' | 'search' | 'send'
errorMessage?: ReactNode | (ValidationResult) => ReactNode
excludeFromTabOrder?: boolean
form?: string
id?: string
inputMode?: 'none' | 'text' | 'tel' | 'url' | 'email' | 'numeric' | 'decimal' | 'search'
isDisabled?: boolean
isInvalid?: boolean
isReadOnly?: boolean
isRequired?: boolean
label?: ReactNode
labelAlign?: Alignment = 'start'
labelPosition?: LabelPosition = 'top'
maxLength?: number
minLength?: number
name?: string
necessityIndicator?: NecessityIndicator = 'icon'
onBeforeInput?: FormEventHandler<HTMLInputElement>
onBlur?: (FocusEvent<T>) => void
onChange?: (T) => void
onClear?: () => void
onCompositionEnd?: CompositionEventHandler<HTMLInputElement>
onCompositionStart?: CompositionEventHandler<HTMLInputElement>
onCompositionUpdate?: CompositionEventHandler<HTMLInputElement>
onCopy?: ClipboardEventHandler<HTMLInputElement>
onCut?: ClipboardEventHandler<HTMLInputElement>
onFocus?: (FocusEvent<T>) => void
onFocusChange?: (boolean) => void
onInput?: FormEventHandler<HTMLInputElement>
onKeyDown?: (KeyboardEvent) => void
onKeyUp?: (KeyboardEvent) => void
onPaste?: ClipboardEventHandler<HTMLInputElement>
onSelect?: ReactEventHandler<HTMLInputElement>
onSubmit?: (string) => void
pattern?: string
- placeholder?: string
size?: 'S' | 'M' | 'L' | 'XL' = 'M'
slot?: string | null
spellCheck?: string
styles?: StylesProp
}) = 'search'
validate?: (string) => ValidationError | boolean | null | undefined
validationBehavior?: 'native' | 'aria' = 'native'
value?: string
} /@react-spectrum/s2:TableView TableView {
UNSAFE_className?: UnsafeClassName
UNSAFE_style?: CSSProperties
aria-describedby?: string
aria-details?: string
aria-label?: string
aria-labelledby?: string
children?: ReactNode
defaultSelectedKeys?: 'all' | Iterable<Key>
density?: 'compact' | 'spacious' | 'regular' = 'regular'
disabledKeys?: Iterable<Key>
disallowEmptySelection?: boolean
escapeKeyBehavior?: 'clearSelection' | 'none' = 'clearSelection'
+ isEmphasized?: boolean
isQuiet?: boolean
loadingState?: LoadingState
onAction?: (Key) => void
onLoadMore?: () => any
onResize?: (Map<Key, ColumnSize>) => void
onResizeEnd?: (Map<Key, ColumnSize>) => void
onResizeStart?: (Map<Key, ColumnSize>) => void
onSelectionChange?: (Selection) => void
onSortChange?: (SortDescriptor) => any
overflowMode?: 'wrap' | 'truncate' = 'truncate'
renderActionBar?: ('all' | Set<Key>) => ReactElement
selectedKeys?: 'all' | Iterable<Key>
selectionMode?: SelectionMode
+ selectionStyle?: 'highlight' | 'checkbox'
shouldSelectOnPressUp?: boolean
slot?: string | null
sortDescriptor?: SortDescriptor
styles?: StylesPropWithHeight /@react-spectrum/s2:Cell Cell {
align?: 'start' | 'center' | 'end' = 'start'
children: ReactNode
- className?: ClassNameOrFunction<CellRenderProps> = 'react-aria-Cell'
+ className?: ClassNameOrFunction<CellRenderProps>
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> = 'react-aria-Column'
+ className?: ClassNameOrFunction<ColumnRenderProps>
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:EditableCell-EditableCell {
- align?: 'start' | 'center' | 'end' = 'start'
- children: ReactNode
- className?: ClassNameOrFunction<CellRenderProps> = 'react-aria-Cell'
- colSpan?: number
- id?: Key
- isSaving?: boolean
- onCancel: () => void
- onSubmit: () => void
- renderEditing: () => ReactNode
- showDivider?: boolean
- style?: StyleOrFunction<CellRenderProps>
- textValue?: string
-} /@react-spectrum/s2:TextArea TextArea {
UNSAFE_className?: UnsafeClassName
UNSAFE_style?: CSSProperties
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
contextualHelp?: ReactNode
defaultValue?: string
description?: ReactNode
enterKeyHint?: 'enter' | 'done' | 'go' | 'next' | 'previous' | 'search' | 'send'
errorMessage?: ReactNode | (ValidationResult) => ReactNode
excludeFromTabOrder?: boolean
form?: string
id?: string
inputMode?: 'none' | 'text' | 'tel' | 'url' | 'email' | 'numeric' | 'decimal' | 'search'
isDisabled?: boolean
isInvalid?: boolean
isReadOnly?: boolean
isRequired?: boolean
label?: ReactNode
labelAlign?: Alignment = 'start'
labelPosition?: LabelPosition = 'top'
maxLength?: number
minLength?: number
name?: string
necessityIndicator?: NecessityIndicator = 'icon'
onBeforeInput?: FormEventHandler<HTMLInputElement>
onBlur?: (FocusEvent<T>) => void
onChange?: (T) => void
onCompositionEnd?: CompositionEventHandler<HTMLInputElement>
onCompositionStart?: CompositionEventHandler<HTMLInputElement>
onCompositionUpdate?: CompositionEventHandler<HTMLInputElement>
onCopy?: ClipboardEventHandler<HTMLInputElement>
onCut?: ClipboardEventHandler<HTMLInputElement>
onFocus?: (FocusEvent<T>) => void
onFocusChange?: (boolean) => void
onInput?: FormEventHandler<HTMLInputElement>
onKeyDown?: (KeyboardEvent) => void
onKeyUp?: (KeyboardEvent) => void
onPaste?: ClipboardEventHandler<HTMLInputElement>
onSelect?: ReactEventHandler<HTMLInputElement>
- placeholder?: string
size?: 'S' | 'M' | 'L' | 'XL' = 'M'
slot?: string | null
spellCheck?: string
styles?: StylesProp
validationBehavior?: 'native' | 'aria' = 'native'
value?: string
} /@react-spectrum/s2:TextField TextField {
UNSAFE_className?: UnsafeClassName
UNSAFE_style?: CSSProperties
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
contextualHelp?: ReactNode
defaultValue?: string
description?: ReactNode
enterKeyHint?: 'enter' | 'done' | 'go' | 'next' | 'previous' | 'search' | 'send'
errorMessage?: ReactNode | (ValidationResult) => ReactNode
excludeFromTabOrder?: boolean
form?: string
id?: string
inputMode?: 'none' | 'text' | 'tel' | 'url' | 'email' | 'numeric' | 'decimal' | 'search'
isDisabled?: boolean
isInvalid?: boolean
isReadOnly?: boolean
isRequired?: boolean
label?: ReactNode
labelAlign?: Alignment = 'start'
labelPosition?: LabelPosition = 'top'
maxLength?: number
minLength?: number
name?: string
necessityIndicator?: NecessityIndicator = 'icon'
onBeforeInput?: FormEventHandler<HTMLInputElement>
onBlur?: (FocusEvent<T>) => void
onChange?: (T) => void
onCompositionEnd?: CompositionEventHandler<HTMLInputElement>
onCompositionStart?: CompositionEventHandler<HTMLInputElement>
onCompositionUpdate?: CompositionEventHandler<HTMLInputElement>
onCopy?: ClipboardEventHandler<HTMLInputElement>
onCut?: ClipboardEventHandler<HTMLInputElement>
onFocus?: (FocusEvent<T>) => void
onFocusChange?: (boolean) => void
onInput?: FormEventHandler<HTMLInputElement>
onKeyDown?: (KeyboardEvent) => void
onKeyUp?: (KeyboardEvent) => void
onPaste?: ClipboardEventHandler<HTMLInputElement>
onSelect?: ReactEventHandler<HTMLInputElement>
pattern?: string
- placeholder?: string
size?: 'S' | 'M' | 'L' | 'XL' = 'M'
slot?: string | null
spellCheck?: string
styles?: StylesProp
}) = 'text'
validate?: (string) => ValidationError | boolean | null | undefined
validationBehavior?: 'native' | 'aria' = 'native'
value?: string
} /@react-spectrum/s2:UNSTABLE_ToastContainer UNSTABLE_ToastContainer {
aria-describedby?: string
aria-details?: string
aria-label?: string = "Notifications"
aria-labelledby?: string
- className?: ClassNameOrFunction<ToastRegionRenderProps<T>> = 'react-aria-ToastRegion'
+ className?: ClassNameOrFunction<ToastRegionRenderProps<T>>
placement?: ToastPlacement = "bottom"
style?: StyleOrFunction<ToastRegionRenderProps<T>>
} /@react-spectrum/s2:TooltipTrigger TooltipTrigger {
children: ReactNode
- closeOnPress?: boolean = true
containerPadding?: number = 12
crossOffset?: number = 0
defaultOpen?: boolean
delay?: number = 1500
isOpen?: boolean
offset?: number = 0
onOpenChange?: (boolean) => void
placement?: 'start' | 'end' | 'right' | 'left' | 'top' | 'bottom' = 'top'
shouldFlip?: boolean = true
trigger?: 'hover' | 'focus' = 'hover'
} /@react-spectrum/s2:TreeView TreeView <T extends {}> {
UNSAFE_className?: UnsafeClassName
UNSAFE_style?: CSSProperties
aria-describedby?: string
aria-details?: string
aria-label?: string
aria-labelledby?: string
autoFocus?: boolean | FocusStrategy
children?: ReactNode | (T) => ReactNode
defaultExpandedKeys?: Iterable<Key>
defaultSelectedKeys?: 'all' | Iterable<Key>
dependencies?: ReadonlyArray<any>
disabledBehavior?: DisabledBehavior = 'all'
disabledKeys?: Iterable<Key>
disallowEmptySelection?: boolean
escapeKeyBehavior?: 'clearSelection' | 'none' = 'clearSelection'
expandedKeys?: Iterable<Key>
id?: string
isDetached?: boolean
isEmphasized?: boolean
items?: Iterable<T>
onAction?: (Key) => void
onExpandedChange?: (Set<Key>) => any
onSelectionChange?: (Selection) => void
renderEmptyState?: (TreeEmptyStateRenderProps) => ReactNode
selectedKeys?: 'all' | Iterable<Key>
+ selectionCornerStyle?: 'square' | 'round'
selectionMode?: SelectionMode
+ selectionStyle?: 'highlight' | 'checkbox'
shouldSelectOnPressUp?: boolean
slot?: string | null
styles?: StylesPropWithHeight
} /@react-spectrum/s2:ColorFieldProps ColorFieldProps {
UNSAFE_className?: UnsafeClassName
UNSAFE_style?: CSSProperties
aria-describedby?: string
aria-details?: string
aria-errormessage?: string
aria-label?: string
aria-labelledby?: string
autoFocus?: boolean
channel?: ColorChannel
colorSpace?: ColorSpace
contextualHelp?: ReactNode
defaultValue?: T
description?: ReactNode
errorMessage?: ReactNode | (ValidationResult) => ReactNode
excludeFromTabOrder?: boolean
form?: string
id?: string
isDisabled?: boolean
isInvalid?: boolean
isReadOnly?: boolean
isRequired?: boolean
isWheelDisabled?: boolean
label?: ReactNode
labelAlign?: Alignment = 'start'
labelPosition?: LabelPosition = 'top'
name?: string
necessityIndicator?: NecessityIndicator = 'icon'
onBeforeInput?: FormEventHandler<HTMLInputElement>
onBlur?: (FocusEvent<Target>) => void
onChange?: (Color | null) => void
onCompositionEnd?: CompositionEventHandler<HTMLInputElement>
onCompositionStart?: CompositionEventHandler<HTMLInputElement>
onCompositionUpdate?: CompositionEventHandler<HTMLInputElement>
onCopy?: ClipboardEventHandler<HTMLInputElement>
onCut?: ClipboardEventHandler<HTMLInputElement>
onFocus?: (FocusEvent<Target>) => void
onFocusChange?: (boolean) => void
onInput?: FormEventHandler<HTMLInputElement>
onKeyDown?: (KeyboardEvent) => void
onKeyUp?: (KeyboardEvent) => void
onPaste?: ClipboardEventHandler<HTMLInputElement>
onSelect?: ReactEventHandler<HTMLInputElement>
- placeholder?: string
size?: 'S' | 'M' | 'L' | 'XL' = 'M'
slot?: string | null
styles?: StylesProp
validate?: (Color | null) => ValidationError | boolean | null | undefined
value?: T
} /@react-spectrum/s2:ComboBoxProps ComboBoxProps <T extends {}> {
UNSAFE_className?: UnsafeClassName
UNSAFE_style?: CSSProperties
align?: 'start' | 'end' = 'start'
allowsCustomValue?: boolean
aria-describedby?: string
aria-details?: string
aria-label?: string
aria-labelledby?: string
autoFocus?: boolean
children: ReactNode | ({}) => ReactNode
contextualHelp?: ReactNode
defaultInputValue?: string
defaultItems?: Iterable<T>
defaultSelectedKey?: Key
dependencies?: ReadonlyArray<any>
description?: ReactNode
direction?: 'bottom' | 'top' = 'bottom'
disabledKeys?: Iterable<Key>
errorMessage?: ReactNode | (ValidationResult) => ReactNode
form?: string
formValue?: 'text' | 'key' = 'key'
id?: string
inputValue?: string
isDisabled?: boolean
isInvalid?: boolean
isReadOnly?: boolean
isRequired?: boolean
items?: Iterable<T>
label?: ReactNode
labelAlign?: Alignment = 'start'
labelPosition?: LabelPosition = 'top'
loadingState?: LoadingState
menuTrigger?: MenuTriggerAction = 'input'
menuWidth?: number
name?: string
necessityIndicator?: NecessityIndicator = 'icon'
onBlur?: (FocusEvent<HTMLInputElement>) => void
onFocus?: (FocusEvent<HTMLInputElement>) => void
onFocusChange?: (boolean) => void
onInputChange?: (string) => void
onKeyDown?: (KeyboardEvent) => void
onKeyUp?: (KeyboardEvent) => void
onLoadMore?: () => any
onOpenChange?: (boolean, MenuTriggerAction) => void
onSelectionChange?: (Key | null) => void
- placeholder?: string
selectedKey?: Key | null
shouldFlip?: boolean = true
shouldFocusWrap?: boolean
size?: 'S' | 'M' | 'L' | 'XL' = 'M'
styles?: StylesProp
validate?: (ComboBoxValidationValue) => ValidationError | boolean | null | undefined
validationBehavior?: 'native' | 'aria' = 'native'
} /@react-spectrum/s2:DialogProps DialogProps {
UNSAFE_className?: UnsafeClassName
UNSAFE_style?: CSSProperties
aria-describedby?: string
aria-details?: string
aria-label?: string
aria-labelledby?: string
children?: ReactNode | (DialogRenderProps) => ReactNode
id?: string
isDismissible?: boolean
isKeyboardDismissDisabled?: boolean
role?: 'dialog' | 'alertdialog' = 'dialog'
- size?: 'S' | 'M' | 'L' | 'XL' = 'M'
+ size?: 'S' | 'M' | 'L' = 'M'
slot?: string | null
styles?: StylesProp
} /@react-spectrum/s2:MenuSectionProps MenuSectionProps <T extends {}> {
aria-label?: string
children?: ReactNode | (T) => ReactElement
- className?: string = 'react-aria-MenuSection'
+ className?: string
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:PickerProps PickerProps <M extends SelectionMode = 'single', T extends {}> {
UNSAFE_className?: UnsafeClassName
UNSAFE_style?: CSSProperties
align?: 'start' | 'end' = 'start'
- allowsEmptyCollection?: boolean
aria-describedby?: string
aria-details?: string
aria-label?: string
aria-labelledby?: string
autoFocus?: boolean
children: ReactNode | ({}) => ReactNode
contextualHelp?: ReactNode
defaultOpen?: boolean
defaultValue?: ValueType<SelectionMode>
dependencies?: ReadonlyArray<any>
description?: ReactNode
direction?: 'bottom' | 'top' = 'bottom'
disabledKeys?: Iterable<Key>
errorMessage?: ReactNode | (ValidationResult) => ReactNode
excludeFromTabOrder?: boolean
form?: string
id?: string
isDisabled?: boolean
isInvalid?: boolean
isOpen?: boolean
isRequired?: boolean
items?: Iterable<T>
label?: ReactNode
labelAlign?: Alignment = 'start'
labelPosition?: LabelPosition = 'top'
loadingState?: LoadingState
menuWidth?: number
name?: string
necessityIndicator?: NecessityIndicator = 'icon'
onBlur?: (FocusEvent<Target>) => void
onChange?: (T) => void
onFocus?: (FocusEvent<Target>) => void
onFocusChange?: (boolean) => void
onKeyDown?: (KeyboardEvent) => void
onKeyUp?: (KeyboardEvent) => void
onLoadMore?: () => any
onOpenChange?: (boolean) => void
placeholder?: string = 'Select an item' (localized)
selectionMode?: SelectionMode = 'single'
shouldFlip?: boolean = true
size?: 'S' | 'M' | 'L' | 'XL' = 'M'
slot?: string | null
styles?: StylesProp
validate?: (ValidationType<SelectionMode>) => ValidationError | boolean | null | undefined
validationBehavior?: 'native' | 'aria' = 'native'
value?: ValueType<SelectionMode>
} /@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> = 'react-aria-Popover'
+ className?: ClassNameOrFunction<PopoverRenderProps>
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:SearchFieldProps SearchFieldProps {
UNSAFE_className?: UnsafeClassName
UNSAFE_style?: CSSProperties
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
contextualHelp?: ReactNode
defaultValue?: string
description?: ReactNode
enterKeyHint?: 'enter' | 'done' | 'go' | 'next' | 'previous' | 'search' | 'send'
errorMessage?: ReactNode | (ValidationResult) => ReactNode
excludeFromTabOrder?: boolean
form?: string
id?: string
inputMode?: 'none' | 'text' | 'tel' | 'url' | 'email' | 'numeric' | 'decimal' | 'search'
isDisabled?: boolean
isInvalid?: boolean
isReadOnly?: boolean
isRequired?: boolean
label?: ReactNode
labelAlign?: Alignment = 'start'
labelPosition?: LabelPosition = 'top'
maxLength?: number
minLength?: number
name?: string
necessityIndicator?: NecessityIndicator = 'icon'
onBeforeInput?: FormEventHandler<HTMLInputElement>
onBlur?: (FocusEvent<T>) => void
onChange?: (T) => void
onClear?: () => void
onCompositionEnd?: CompositionEventHandler<HTMLInputElement>
onCompositionStart?: CompositionEventHandler<HTMLInputElement>
onCompositionUpdate?: CompositionEventHandler<HTMLInputElement>
onCopy?: ClipboardEventHandler<HTMLInputElement>
onCut?: ClipboardEventHandler<HTMLInputElement>
onFocus?: (FocusEvent<T>) => void
onFocusChange?: (boolean) => void
onInput?: FormEventHandler<HTMLInputElement>
onKeyDown?: (KeyboardEvent) => void
onKeyUp?: (KeyboardEvent) => void
onPaste?: ClipboardEventHandler<HTMLInputElement>
onSelect?: ReactEventHandler<HTMLInputElement>
onSubmit?: (string) => void
pattern?: string
- placeholder?: string
size?: 'S' | 'M' | 'L' | 'XL' = 'M'
slot?: string | null
spellCheck?: string
styles?: StylesProp
}) = 'search'
validate?: (string) => ValidationError | boolean | null | undefined
validationBehavior?: 'native' | 'aria' = 'native'
value?: string
} /@react-spectrum/s2:TableViewProps TableViewProps {
UNSAFE_className?: UnsafeClassName
UNSAFE_style?: CSSProperties
aria-describedby?: string
aria-details?: string
aria-label?: string
aria-labelledby?: string
children?: ReactNode
defaultSelectedKeys?: 'all' | Iterable<Key>
density?: 'compact' | 'spacious' | 'regular' = 'regular'
disabledKeys?: Iterable<Key>
disallowEmptySelection?: boolean
escapeKeyBehavior?: 'clearSelection' | 'none' = 'clearSelection'
+ isEmphasized?: boolean
isQuiet?: boolean
loadingState?: LoadingState
onAction?: (Key) => void
onLoadMore?: () => any
onResize?: (Map<Key, ColumnSize>) => void
onResizeEnd?: (Map<Key, ColumnSize>) => void
onResizeStart?: (Map<Key, ColumnSize>) => void
onSelectionChange?: (Selection) => void
onSortChange?: (SortDescriptor) => any
overflowMode?: 'wrap' | 'truncate' = 'truncate'
renderActionBar?: ('all' | Set<Key>) => ReactElement
selectedKeys?: 'all' | Iterable<Key>
selectionMode?: SelectionMode
+ selectionStyle?: 'highlight' | 'checkbox'
shouldSelectOnPressUp?: boolean
slot?: string | null
sortDescriptor?: SortDescriptor
styles?: StylesPropWithHeight /@react-spectrum/s2:CellProps CellProps {
align?: 'start' | 'center' | 'end' = 'start'
children: ReactNode
- className?: ClassNameOrFunction<CellRenderProps> = 'react-aria-Cell'
+ className?: ClassNameOrFunction<CellRenderProps>
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> = 'react-aria-Column'
+ className?: ClassNameOrFunction<ColumnRenderProps>
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:TextFieldProps TextFieldProps {
UNSAFE_className?: UnsafeClassName
UNSAFE_style?: CSSProperties
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
contextualHelp?: ReactNode
defaultValue?: string
description?: ReactNode
enterKeyHint?: 'enter' | 'done' | 'go' | 'next' | 'previous' | 'search' | 'send'
errorMessage?: ReactNode | (ValidationResult) => ReactNode
excludeFromTabOrder?: boolean
form?: string
id?: string
inputMode?: 'none' | 'text' | 'tel' | 'url' | 'email' | 'numeric' | 'decimal' | 'search'
isDisabled?: boolean
isInvalid?: boolean
isReadOnly?: boolean
isRequired?: boolean
label?: ReactNode
labelAlign?: Alignment = 'start'
labelPosition?: LabelPosition = 'top'
maxLength?: number
minLength?: number
name?: string
necessityIndicator?: NecessityIndicator = 'icon'
onBeforeInput?: FormEventHandler<HTMLInputElement>
onBlur?: (FocusEvent<T>) => void
onChange?: (T) => void
onCompositionEnd?: CompositionEventHandler<HTMLInputElement>
onCompositionStart?: CompositionEventHandler<HTMLInputElement>
onCompositionUpdate?: CompositionEventHandler<HTMLInputElement>
onCopy?: ClipboardEventHandler<HTMLInputElement>
onCut?: ClipboardEventHandler<HTMLInputElement>
onFocus?: (FocusEvent<T>) => void
onFocusChange?: (boolean) => void
onInput?: FormEventHandler<HTMLInputElement>
onKeyDown?: (KeyboardEvent) => void
onKeyUp?: (KeyboardEvent) => void
onPaste?: ClipboardEventHandler<HTMLInputElement>
onSelect?: ReactEventHandler<HTMLInputElement>
pattern?: string
- placeholder?: string
size?: 'S' | 'M' | 'L' | 'XL' = 'M'
slot?: string | null
spellCheck?: string
styles?: StylesProp
}) = 'text'
validate?: (string) => ValidationError | boolean | null | undefined
validationBehavior?: 'native' | 'aria' = 'native'
value?: string
} /@react-spectrum/s2:TextAreaProps TextAreaProps {
UNSAFE_className?: UnsafeClassName
UNSAFE_style?: CSSProperties
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
contextualHelp?: ReactNode
defaultValue?: string
description?: ReactNode
enterKeyHint?: 'enter' | 'done' | 'go' | 'next' | 'previous' | 'search' | 'send'
errorMessage?: ReactNode | (ValidationResult) => ReactNode
excludeFromTabOrder?: boolean
form?: string
id?: string
inputMode?: 'none' | 'text' | 'tel' | 'url' | 'email' | 'numeric' | 'decimal' | 'search'
isDisabled?: boolean
isInvalid?: boolean
isReadOnly?: boolean
isRequired?: boolean
label?: ReactNode
labelAlign?: Alignment = 'start'
labelPosition?: LabelPosition = 'top'
maxLength?: number
minLength?: number
name?: string
necessityIndicator?: NecessityIndicator = 'icon'
onBeforeInput?: FormEventHandler<HTMLInputElement>
onBlur?: (FocusEvent<T>) => void
onChange?: (T) => void
onCompositionEnd?: CompositionEventHandler<HTMLInputElement>
onCompositionStart?: CompositionEventHandler<HTMLInputElement>
onCompositionUpdate?: CompositionEventHandler<HTMLInputElement>
onCopy?: ClipboardEventHandler<HTMLInputElement>
onCut?: ClipboardEventHandler<HTMLInputElement>
onFocus?: (FocusEvent<T>) => void
onFocusChange?: (boolean) => void
onInput?: FormEventHandler<HTMLInputElement>
onKeyDown?: (KeyboardEvent) => void
onKeyUp?: (KeyboardEvent) => void
onPaste?: ClipboardEventHandler<HTMLInputElement>
onSelect?: ReactEventHandler<HTMLInputElement>
- placeholder?: string
size?: 'S' | 'M' | 'L' | 'XL' = 'M'
slot?: string | null
spellCheck?: string
styles?: StylesProp
validationBehavior?: 'native' | 'aria' = 'native'
value?: string
} /@react-spectrum/s2:ToastContainerProps ToastContainerProps {
aria-describedby?: string
aria-details?: string
aria-label?: string = "Notifications"
aria-labelledby?: string
- className?: ClassNameOrFunction<ToastRegionRenderProps<T>> = 'react-aria-ToastRegion'
+ className?: ClassNameOrFunction<ToastRegionRenderProps<T>>
placement?: ToastPlacement = "bottom"
style?: StyleOrFunction<ToastRegionRenderProps<T>>
} /@react-spectrum/s2:TreeViewProps TreeViewProps <T> {
UNSAFE_className?: UnsafeClassName
UNSAFE_style?: CSSProperties
aria-describedby?: string
aria-details?: string
aria-label?: string
aria-labelledby?: string
autoFocus?: boolean | FocusStrategy
children?: ReactNode | (T) => ReactNode
defaultExpandedKeys?: Iterable<Key>
defaultSelectedKeys?: 'all' | Iterable<Key>
dependencies?: ReadonlyArray<any>
disabledBehavior?: DisabledBehavior = 'all'
disabledKeys?: Iterable<Key>
disallowEmptySelection?: boolean
escapeKeyBehavior?: 'clearSelection' | 'none' = 'clearSelection'
expandedKeys?: Iterable<Key>
id?: string
isDetached?: boolean
isEmphasized?: boolean
items?: Iterable<T>
onAction?: (Key) => void
onExpandedChange?: (Set<Key>) => any
onSelectionChange?: (Selection) => void
renderEmptyState?: (TreeEmptyStateRenderProps) => ReactNode
selectedKeys?: 'all' | Iterable<Key>
+ selectionCornerStyle?: 'square' | 'round'
selectionMode?: SelectionMode
+ selectionStyle?: 'highlight' | 'checkbox'
shouldSelectOnPressUp?: boolean
slot?: string | null
styles?: StylesPropWithHeight
} /@react-spectrum/s2:TooltipTriggerProps TooltipTriggerProps {
children: ReactNode
closeDelay?: number = 500
- closeOnPress?: boolean = true
defaultOpen?: boolean
delay?: number = 1500
isDisabled?: boolean
isOpen?: boolean
trigger?: 'hover' | 'focus' = 'hover'
} /@react-spectrum/s2:ListView+ListView <T extends {}> {
+ UNSAFE_className?: UnsafeClassName
+ UNSAFE_style?: CSSProperties
+ aria-describedby?: string
+ aria-details?: string
+ aria-label?: string
+ aria-labelledby?: string
+ autoFocus?: boolean
+ children: ReactNode | ({}) => ReactNode
+ defaultSelectedKeys?: 'all' | Iterable<Key>
+ dependencies?: ReadonlyArray<any>
+ disabledBehavior?: DisabledBehavior = "all"
+ disabledKeys?: Iterable<Key>
+ disallowEmptySelection?: boolean
+ disallowTypeAhead?: boolean = false
+ dragAndDropHooks?: DragAndDropHooks<NoInfer<T>>
+ escapeKeyBehavior?: 'clearSelection' | 'none' = 'clearSelection'
+ highlightMode?: 'normal' | 'inverse'
+ id?: string
+ isEmphasized?: boolean
+ isQuiet?: boolean
+ 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
+ selectionStyle?: 'highlight' | 'checkbox'
+ shouldSelectOnPressUp?: boolean
+ slot?: string | null
+ styles?: StylesPropWithHeight
+} /@react-spectrum/s2:ListViewItem+ListViewItem {
+ UNSAFE_className?: UnsafeClassName
+ UNSAFE_style?: CSSProperties
+ children: ReactNode
+ download?: boolean | string
+ href?: Href
+ hrefLang?: string
+ 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
+ styles?: StylesProp
+ target?: HTMLAttributeAnchorTarget
+ textValue?: string
+ value?: T
+} /@react-spectrum/s2:TreeViewContext+TreeViewContext {
+ UNTYPED
+} /@react-spectrum/s2:ListViewProps+ListViewProps <T> {
+ UNSAFE_className?: UnsafeClassName
+ UNSAFE_style?: CSSProperties
+ aria-describedby?: string
+ aria-details?: string
+ aria-label?: string
+ aria-labelledby?: string
+ autoFocus?: boolean
+ children: ReactNode | (T) => ReactNode
+ defaultSelectedKeys?: 'all' | Iterable<Key>
+ dependencies?: ReadonlyArray<any>
+ disabledBehavior?: DisabledBehavior = "all"
+ disabledKeys?: Iterable<Key>
+ disallowEmptySelection?: boolean
+ disallowTypeAhead?: boolean = false
+ dragAndDropHooks?: DragAndDropHooks<NoInfer<T>>
+ escapeKeyBehavior?: 'clearSelection' | 'none' = 'clearSelection'
+ highlightMode?: 'normal' | 'inverse'
+ id?: string
+ isEmphasized?: boolean
+ isQuiet?: boolean
+ 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
+ selectionStyle?: 'highlight' | 'checkbox'
+ shouldSelectOnPressUp?: boolean
+ slot?: string | null
+ styles?: StylesPropWithHeight
+} /@react-spectrum/s2:ListViewItemProps+ListViewItemProps {
+ UNSAFE_className?: UnsafeClassName
+ UNSAFE_style?: CSSProperties
+ children: ReactNode
+ download?: boolean | string
+ href?: Href
+ hrefLang?: string
+ 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
+ styles?: StylesProp
+ target?: HTMLAttributeAnchorTarget
+ textValue?: string
+ value?: T
+} @react-spectrum/tooltip/@react-spectrum/tooltip:TooltipTrigger TooltipTrigger {
children: [ReactElement, ReactElement]
- closeOnPress?: boolean = true
containerPadding?: number = 12
crossOffset?: number = 0
defaultOpen?: boolean
delay?: number = 1500
isOpen?: boolean
offset?: number = 7
onOpenChange?: (boolean) => void
placement?: Placement = 'top'
shouldFlip?: boolean = true
trigger?: 'hover' | 'focus' = 'hover'
} /@react-spectrum/tooltip:SpectrumTooltipTriggerProps SpectrumTooltipTriggerProps {
children: [ReactElement, ReactElement]
- closeOnPress?: boolean = true
containerPadding?: number = 12
crossOffset?: number = 0
defaultOpen?: boolean
delay?: number = 1500
isOpen?: boolean
offset?: number = 7
onOpenChange?: (boolean) => void
placement?: Placement = 'top'
shouldFlip?: boolean = true
trigger?: 'hover' | 'focus' = 'hover'
} @react-stately/calendar/@react-stately/calendar:RangeCalendarState-RangeCalendarState <T extends DateValue = DateValue> {
+RangeCalendarState {
anchorDate: CalendarDate | null
focusNextDay: () => void
focusNextPage: () => void
focusNextSection: (boolean) => void
focusPreviousDay: () => void
focusPreviousPage: () => void
focusPreviousRow: () => void
focusPreviousSection: (boolean) => void
focusSectionEnd: () => void
focusSectionStart: () => void
focusedDate: CalendarDate
getDatesInWeek: (number, CalendarDate) => Array<CalendarDate | null>
highlightDate: (CalendarDate) => void
highlightedRange: RangeValue<CalendarDate> | null
isCellDisabled: (CalendarDate) => boolean
isCellFocused: (CalendarDate) => boolean
isCellUnavailable: (CalendarDate) => boolean
isDisabled: boolean
isDragging: boolean
isFocused: boolean
isInvalid: (CalendarDate) => boolean
isNextVisibleRangeInvalid: () => boolean
isPreviousVisibleRangeInvalid: () => boolean
isReadOnly: boolean
isSelected: (CalendarDate) => boolean
isValueInvalid: boolean
maxValue?: DateValue | null
minValue?: DateValue | null
selectDate: (CalendarDate) => void
selectFocusedDate: () => void
setAnchorDate: (CalendarDate | null) => void
setDragging: (boolean) => void
setFocused: (boolean) => void
setFocusedDate: (CalendarDate) => void
setValue: (RangeValue<DateValue> | null) => void
timeZone: string
value: RangeValue<DateValue> | null
visibleRange: RangeValue<CalendarDate>
} @react-stately/select/@react-stately/select:SelectProps SelectProps <M extends SelectionMode = 'single', T> {
- allowsEmptyCollection?: boolean
autoFocus?: boolean
children: CollectionChildren<T>
defaultOpen?: boolean
defaultValue?: ValueType<SelectionMode>
disabledKeys?: Iterable<Key>
errorMessage?: ReactNode | (ValidationResult) => ReactNode
isDisabled?: boolean
isInvalid?: boolean
isOpen?: boolean
isRequired?: boolean
items?: Iterable<T>
label?: ReactNode
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
selectionMode?: SelectionMode = 'single'
validate?: (ValidationType<SelectionMode>) => ValidationError | boolean | null | undefined
validationBehavior?: 'aria' | 'native' = 'aria'
value?: ValueType<SelectionMode>
} /@react-stately/select:SelectStateOptions SelectStateOptions <M extends SelectionMode = 'single', T> {
- allowsEmptyCollection?: boolean
autoFocus?: boolean
collection?: Collection<Node<T>>
defaultOpen?: boolean
defaultValue?: ValueType<SelectionMode>
disabledKeys?: Iterable<Key>
errorMessage?: ReactNode | (ValidationResult) => ReactNode
isDisabled?: boolean
isInvalid?: boolean
isOpen?: boolean
isRequired?: boolean
items?: Iterable<T>
label?: ReactNode
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
selectionMode?: SelectionMode = 'single'
validate?: (ValidationType<SelectionMode>) => ValidationError | boolean | null | undefined
validationBehavior?: 'aria' | 'native' = 'aria'
value?: ValueType<SelectionMode>
} @react-stately/tooltip/@react-stately/tooltip:TooltipTriggerProps TooltipTriggerProps {
closeDelay?: number = 500
- closeOnPress?: boolean = true
defaultOpen?: boolean
delay?: number = 1500
isDisabled?: boolean
isOpen?: boolean
trigger?: 'hover' | 'focus' = 'hover'
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Closes
✅ Pull Request Checklist:
📝 Test Instructions:
🧢 Your Project: