docs: Async load more documentation for RAC #8431
Open
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
|
Build successful! 🎉 |
|
Build successful! 🎉 |
|
Build successful! 🎉 |
LFDanLu
commented
Jun 23, 2025
Comment on lines
+982
to
+1001
| <details> | ||
| <summary style={{fontWeight: 'bold'}}><ChevronRight size="S" /> MyProgressCircle</summary> | ||
|
|
||
| ```tsx example export=true render=false | ||
| import {ProgressBar} from 'react-aria-components'; | ||
| import type {ProgressBarProps} from 'react-aria-components'; | ||
|
|
||
| export function MyProgressCircle(props: ProgressBarProps) { | ||
| return ( | ||
| <ProgressBar {...props}> | ||
| <svg width="24" height="24" viewBox="0 0 24 24" style={{display: 'block'}}> | ||
| <path fill="currentColor" d="M12,1A11,11,0,1,0,23,12,11,11,0,0,0,12,1Zm0,19a8,8,0,1,1,8-8A8,8,0,0,1,12,20Z" opacity=".25" /> | ||
| <path fill="currentColor" d="M10.14,1.16a11,11,0,0,0-9,8.92A1.59,1.59,0,0,0,2.46,12,1.52,1.52,0,0,0,4.11,10.7a8,8,0,0,1,6.66-6.61A1.42,1.42,0,0,0,12,2.69h0A1.57,1.57,0,0,0,10.14,1.16Z"> | ||
| <animateTransform attributeName="transform" type="rotate" dur="0.75s" values="0 12 12;360 12 12" repeatCount="indefinite"/> | ||
| </path> | ||
| </svg> | ||
| </ProgressBar> | ||
| ); | ||
| } | ||
| ``` |
There was a problem hiding this comment.
This gets used in a bunch of other places, what do people think about including it in the reusable wrappers in ProgressBar docs so we can import it?
Comment on lines
-911
to
-912
| [this CodeSandbox](https://codesandbox.io/s/dreamy-burnell-3i2jy?file=/src/Autocomplete.tsx) for an example | ||
| of a ComboBox supporting those features. |
There was a problem hiding this comment.
got rid of the codesandbox since this has a direct example now, that sandbox is referenced in the hook docs anyways
Comment on lines
890
to
895
| .react-aria-TableHeader { | ||
| position: sticky; | ||
| top: 0; | ||
| background: white; | ||
| z-index: 1; | ||
| } |
There was a problem hiding this comment.
this has a weird shift in vertical position when scrolling down, haven't quite figured out why exactly
| Note that `<TreeLoadMoreItem>` is meant to render the spinner specifically when loading additional items, | ||
| the initial loading state and empty state should instead be handled via [renderEmptyState](#empty-state). | ||
|
|
||
| ```tsx example |
There was a problem hiding this comment.
Example is quite long, I could pull out the interfaces but open to ideas if people have any ideas
|
Build successful! 🎉 |
|
Build successful! 🎉 |
|
Build successful! 🎉 |
snowystinger
approved these changes
Jun 26, 2025
| inputValue={list.filterText} | ||
| onInputChange={list.setFilterText}> | ||
| {(item) => <ListBoxItem id={item.name}>{item.name}</ListBoxItem>} | ||
| {/*- begin highlight -*/} |
There was a problem hiding this comment.
heh... this is a sorta confusing API. I see how it came about, and I don't have a different suggestion at this time since we're combining static items with dynamic
I guess we could show it by adding a "loading" item to the list.items and rendering the ListBoxLoadMoreItem when we get to that item, but then we might have to remember to remove it and move it to the end of the list
There was a problem hiding this comment.
yeahhh, it certainly is. If definitely would be nice if it just lived in the list of items like you said but you've highlighted the exact reason why I didn't go that route haha (especially since it doesn't mesh very well with useAsyncList). In addition, having it statically added after your dynamic list ensures that it always exists in the collection so the loading sentinel is always rendered
| {(item) => <ListBoxItem id={item.name}>{item.name}</ListBoxItem>} | ||
| {/*- begin highlight -*/} | ||
| <Collection items={list.items}> | ||
| {(item: Character) => ( |
There was a problem hiding this comment.
I think it'll infer item?
Suggested change
| {(item: Character) => ( | |
| {(item) => ( |
|
Build successful! 🎉 |
## API Changes
react-aria-components/react-aria-components:Breadcrumb Breadcrumb {
- children?: ChildrenOrFunction<BreadcrumbRenderProps>
- className?: ClassNameOrFunction<BreadcrumbRenderProps>
+ children?: ReactNode | ((BreadcrumbRenderProps & {
+ defaultChildren: ReactNode | undefined
+})) => ReactNode
+ className?: string | ((BreadcrumbRenderProps & {
+ defaultClassName: string | undefined
+})) => string
id?: Key
- style?: StyleOrFunction<BreadcrumbRenderProps>
+ style?: CSSProperties | ((BreadcrumbRenderProps & {
+ defaultStyle: CSSProperties
+})) => CSSProperties | undefined
}/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-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>
+ children?: ReactNode | ((ButtonRenderProps & {
+ defaultChildren: ReactNode | undefined
+})) => ReactNode
+ className?: string | ((ButtonRenderProps & {
+ defaultClassName: string | undefined
+})) => string
excludeFromTabOrder?: boolean
form?: string
formAction?: string
formEncType?: string
formMethod?: 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>
+ style?: CSSProperties | ((ButtonRenderProps & {
+ defaultStyle: CSSProperties
+})) => CSSProperties | undefined
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>
+ children?: ReactNode | ((CalendarRenderProps & {
+ defaultChildren: ReactNode | undefined
+})) => ReactNode
+ className?: string | ((CalendarRenderProps & {
+ defaultClassName: string | undefined
+})) => string
createCalendar?: (CalendarIdentifier) => Calendar
defaultFocusedValue?: DateValue | null
defaultValue?: DateValue | null
firstDayOfWeek?: 'sun' | 'mon' | 'tue' | 'wed' | 'thu' | 'fri' | 'sat'
focusedValue?: DateValue | null
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
slot?: string | null
- style?: StyleOrFunction<CalendarRenderProps>
+ style?: CSSProperties | ((CalendarRenderProps & {
+ defaultStyle: CSSProperties
+})) => CSSProperties | undefined
value?: DateValue | null
visibleDuration?: DateDuration = {months: 1}
}/react-aria-components:CalendarCell CalendarCell {
- children?: ChildrenOrFunction<CalendarCellRenderProps>
- className?: ClassNameOrFunction<CalendarCellRenderProps>
+ children?: ReactNode | ((CalendarCellRenderProps & {
+ defaultChildren: ReactNode | undefined
+})) => ReactNode
+ className?: string | ((CalendarCellRenderProps & {
+ defaultClassName: string | undefined
+})) => string
date: CalendarDate
onHoverChange?: (boolean) => void
onHoverEnd?: (HoverEvent) => void
onHoverStart?: (HoverEvent) => void
- style?: StyleOrFunction<CalendarCellRenderProps>
+ style?: CSSProperties | ((CalendarCellRenderProps & {
+ defaultStyle: CSSProperties
+})) => CSSProperties | undefined
}/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>
+ children?: ReactNode | ((RangeCalendarRenderProps & {
+ defaultChildren: ReactNode | undefined
+})) => ReactNode
+ className?: string | ((RangeCalendarRenderProps & {
+ defaultClassName: string | undefined
+})) => string
createCalendar?: (CalendarIdentifier) => Calendar
defaultFocusedValue?: DateValue | null
defaultValue?: RangeValue<DateValue> | null
firstDayOfWeek?: 'sun' | 'mon' | 'tue' | 'wed' | 'thu' | 'fri' | 'sat'
focusedValue?: DateValue | null
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
slot?: string | null
- style?: StyleOrFunction<RangeCalendarRenderProps>
+ style?: CSSProperties | ((RangeCalendarRenderProps & {
+ defaultStyle: CSSProperties
+})) => CSSProperties | undefined
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>
+ children?: ReactNode | ((CheckboxRenderProps & {
+ defaultChildren: ReactNode | undefined
+})) => ReactNode
+ className?: string | ((CheckboxRenderProps & {
+ defaultClassName: string | undefined
+})) => string
defaultSelected?: boolean
excludeFromTabOrder?: boolean
id?: string
inputRef?: RefObject<HTMLInputElement | null>
isDisabled?: boolean
isIndeterminate?: boolean
isInvalid?: boolean
isReadOnly?: boolean
isRequired?: boolean
isSelected?: boolean
name?: string
onBlur?: (FocusEvent<Target>) => void
onChange?: (boolean) => void
onFocus?: (FocusEvent<Target>) => void
onFocusChange?: (boolean) => void
onHoverChange?: (boolean) => void
onHoverEnd?: (HoverEvent) => void
onHoverStart?: (HoverEvent) => void
onKeyDown?: (KeyboardEvent) => void
onKeyUp?: (KeyboardEvent) => void
slot?: string | null
- style?: StyleOrFunction<CheckboxRenderProps>
+ style?: CSSProperties | ((CheckboxRenderProps & {
+ defaultStyle: CSSProperties
+})) => CSSProperties | undefined
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>
+ children?: ReactNode | ((CheckboxGroupRenderProps & {
+ defaultChildren: ReactNode | undefined
+})) => ReactNode
+ className?: string | ((CheckboxGroupRenderProps & {
+ defaultClassName: string | undefined
+})) => string
defaultValue?: Array<string>
id?: string
isDisabled?: boolean
isInvalid?: 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>
+ style?: CSSProperties | ((CheckboxGroupRenderProps & {
+ defaultStyle: CSSProperties
+})) => CSSProperties | undefined
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>
+ children?: ReactNode | ((ColorAreaRenderProps & {
+ defaultChildren: ReactNode | undefined
+})) => ReactNode
+ className?: string | ((ColorAreaRenderProps & {
+ defaultClassName: string | undefined
+})) => string
colorSpace?: ColorSpace
defaultValue?: T
id?: string
isDisabled?: boolean
onChange?: (Color) => void
onChangeEnd?: (Color) => void
slot?: string | null
- style?: StyleOrFunction<ColorAreaRenderProps>
+ style?: CSSProperties | ((ColorAreaRenderProps & {
+ defaultStyle: CSSProperties
+})) => CSSProperties | undefined
value?: T
xChannel?: ColorChannel
xName?: string
yChannel?: ColorChannel
}/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>
+ children?: ReactNode | ((ColorFieldRenderProps & {
+ defaultChildren: ReactNode | undefined
+})) => ReactNode
+ className?: string | ((ColorFieldRenderProps & {
+ defaultClassName: string | undefined
+})) => string
colorSpace?: ColorSpace
defaultValue?: T
excludeFromTabOrder?: boolean
id?: 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>
+ style?: CSSProperties | ((ColorFieldRenderProps & {
+ defaultStyle: CSSProperties
+})) => CSSProperties | undefined
validate?: (Color | null) => ValidationError | boolean | null | undefined
validationBehavior?: 'native' | 'aria' = 'native'
value?: T
}/react-aria-components:ColorPicker ColorPicker {
- children?: ChildrenOrFunction<T>
+ children?: ReactNode | ((T & {
+ defaultChildren: ReactNode | undefined
+})) => ReactNode
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>
+ children?: ReactNode | ((ColorSliderRenderProps & {
+ defaultChildren: ReactNode | undefined
+})) => ReactNode
+ className?: string | ((ColorSliderRenderProps & {
+ defaultClassName: string | undefined
+})) => string
colorSpace?: ColorSpace
defaultValue?: T
id?: string
isDisabled?: boolean
name?: string
onChange?: (Color) => void
onChangeEnd?: (Color) => void
orientation?: Orientation = 'horizontal'
slot?: string | null
- style?: StyleOrFunction<ColorSliderRenderProps>
+ style?: CSSProperties | ((ColorSliderRenderProps & {
+ defaultStyle: CSSProperties
+})) => CSSProperties | undefined
value?: T
}/react-aria-components:ColorSwatch ColorSwatch {
aria-describedby?: string
aria-details?: string
aria-label?: string
aria-labelledby?: string
- className?: ClassNameOrFunction<ColorSwatchRenderProps>
+ className?: string | ((ColorSwatchRenderProps & {
+ defaultClassName: string | undefined
+})) => string
color?: string | Color
colorName?: string
id?: string
slot?: string | null
- style?: StyleOrFunction<ColorSwatchRenderProps>
+ style?: CSSProperties | ((ColorSwatchRenderProps & {
+ defaultStyle: CSSProperties
+})) => CSSProperties | undefined
}/react-aria-components:ColorSwatchPicker ColorSwatchPicker {
aria-describedby?: string
aria-details?: string
aria-label?: string
aria-labelledby?: string
children?: ReactNode
- className?: ClassNameOrFunction<ColorSwatchPickerRenderProps>
+ className?: string | ((ColorSwatchPickerRenderProps & {
+ defaultClassName: string | undefined
+})) => string
defaultValue?: string | Color
layout?: 'grid' | 'stack' = 'grid'
onChange?: (Color) => void
- style?: StyleOrFunction<ColorSwatchPickerRenderProps>
+ style?: CSSProperties | ((ColorSwatchPickerRenderProps & {
+ defaultStyle: CSSProperties
+})) => CSSProperties | undefined
value?: string | Color
}/react-aria-components:ColorSwatchPickerItem ColorSwatchPickerItem {
- children?: ChildrenOrFunction<ColorSwatchPickerItemRenderProps>
- className?: ClassNameOrFunction<ColorSwatchPickerItemRenderProps>
+ children?: ReactNode | ((ColorSwatchPickerItemRenderProps & {
+ defaultChildren: ReactNode | undefined
+})) => ReactNode
+ className?: string | ((ColorSwatchPickerItemRenderProps & {
+ defaultClassName: string | undefined
+})) => string
color: string | Color
isDisabled?: boolean
onHoverChange?: (boolean) => void
onHoverEnd?: (HoverEvent) => void
onHoverStart?: (HoverEvent) => void
- style?: StyleOrFunction<ColorSwatchPickerItemRenderProps>
+ style?: CSSProperties | ((ColorSwatchPickerItemRenderProps & {
+ defaultStyle: CSSProperties
+})) => CSSProperties | undefined
}/react-aria-components:ColorThumb ColorThumb {
- children?: ChildrenOrFunction<ColorThumbRenderProps>
- className?: ClassNameOrFunction<ColorThumbRenderProps>
+ children?: ReactNode | ((ColorThumbRenderProps & {
+ defaultChildren: ReactNode | undefined
+})) => ReactNode
+ className?: string | ((ColorThumbRenderProps & {
+ defaultClassName: string | undefined
+})) => string
onHoverChange?: (boolean) => void
onHoverEnd?: (HoverEvent) => void
onHoverStart?: (HoverEvent) => void
- style?: StyleOrFunction<ColorThumbRenderProps>
+ style?: CSSProperties | ((ColorThumbRenderProps & {
+ defaultStyle: CSSProperties
+})) => CSSProperties | undefined
}/react-aria-components:ColorWheel ColorWheel {
aria-describedby?: string
aria-details?: string
aria-label?: string
aria-labelledby?: string
- children?: ChildrenOrFunction<ColorWheelRenderProps>
- className?: ClassNameOrFunction<ColorWheelRenderProps>
+ children?: ReactNode | ((ColorWheelRenderProps & {
+ defaultChildren: ReactNode | undefined
+})) => ReactNode
+ className?: string | ((ColorWheelRenderProps & {
+ defaultClassName: string | undefined
+})) => string
defaultValue?: string | Color = 'hsl(0, 100%, 50%)'
id?: string
innerRadius: number
isDisabled?: boolean
name?: string
onChange?: (Color) => void
onChangeEnd?: (Color) => void
outerRadius: number
slot?: string | null
- style?: StyleOrFunction<ColorWheelRenderProps>
+ style?: CSSProperties | ((ColorWheelRenderProps & {
+ defaultStyle: CSSProperties
+})) => CSSProperties | undefined
value?: T
}/react-aria-components:ColorWheelTrack ColorWheelTrack {
- className?: ClassNameOrFunction<ColorWheelTrackRenderProps>
- style?: StyleOrFunction<ColorWheelTrackRenderProps>
+ className?: string | ((ColorWheelTrackRenderProps & {
+ defaultClassName: string | undefined
+})) => string
+ style?: CSSProperties | ((ColorWheelTrackRenderProps & {
+ defaultStyle: CSSProperties
+})) => CSSProperties | undefined
}/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>
+ children?: ReactNode | ((ComboBoxRenderProps & {
+ defaultChildren: ReactNode | undefined
+})) => ReactNode
+ className?: string | ((ComboBoxRenderProps & {
+ defaultClassName: string | undefined
+})) => string
defaultFilter?: (string, string) => boolean
defaultInputValue?: string
defaultItems?: Iterable<T>
defaultSelectedKey?: Key
disabledKeys?: Iterable<Key>
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>
+ style?: CSSProperties | ((ComboBoxRenderProps & {
+ defaultStyle: CSSProperties
+})) => CSSProperties | undefined
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
autoFocus?: boolean
- children?: ChildrenOrFunction<DateFieldRenderProps>
- className?: ClassNameOrFunction<DateFieldRenderProps>
+ children?: ReactNode | ((DateFieldRenderProps & {
+ defaultChildren: ReactNode | undefined
+})) => ReactNode
+ className?: string | ((DateFieldRenderProps & {
+ defaultClassName: string | undefined
+})) => string
defaultValue?: DateValue | null
granularity?: Granularity
hideTimeZone?: boolean = false
hourCycle?: number | number
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>
+ style?: CSSProperties | ((DateFieldRenderProps & {
+ defaultStyle: CSSProperties
+})) => CSSProperties | undefined
validate?: (MappedDateValue<DateValue>) => ValidationError | boolean | null | undefined
validationBehavior?: 'native' | 'aria' = 'native'
value?: DateValue | null
}/react-aria-components:DateInput DateInput {
children: (DateSegment) => ReactElement
- className?: ClassNameOrFunction<DateInputRenderProps>
+ className?: string | ((DateInputRenderProps & {
+ defaultClassName: string | undefined
+})) => string
slot?: string | null
- style?: StyleOrFunction<DateInputRenderProps>
+ style?: CSSProperties | ((DateInputRenderProps & {
+ defaultStyle: CSSProperties
+})) => CSSProperties | undefined
}/react-aria-components:DateSegment DateSegment {
- children?: ChildrenOrFunction<DateSegmentRenderProps>
- className?: ClassNameOrFunction<DateSegmentRenderProps>
+ children?: ReactNode | ((DateSegmentRenderProps & {
+ defaultChildren: ReactNode | undefined
+})) => ReactNode
+ className?: string | ((DateSegmentRenderProps & {
+ defaultClassName: string | undefined
+})) => string
onHoverChange?: (boolean) => void
onHoverEnd?: (HoverEvent) => void
onHoverStart?: (HoverEvent) => void
segment: DateSegment
- style?: StyleOrFunction<DateSegmentRenderProps>
+ style?: CSSProperties | ((DateSegmentRenderProps & {
+ defaultStyle: CSSProperties
+})) => CSSProperties | undefined
}/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>
+ children?: ReactNode | ((DateFieldRenderProps & {
+ defaultChildren: ReactNode | undefined
+})) => ReactNode
+ className?: string | ((DateFieldRenderProps & {
+ defaultClassName: string | undefined
+})) => string
defaultValue?: TimeValue | null
granularity?: 'hour' | 'minute' | 'second' = 'minute'
hideTimeZone?: boolean
hourCycle?: number | number
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>
+ style?: CSSProperties | ((DateFieldRenderProps & {
+ defaultStyle: CSSProperties
+})) => CSSProperties | undefined
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
autoFocus?: boolean
- children?: ChildrenOrFunction<DatePickerRenderProps>
- className?: ClassNameOrFunction<DatePickerRenderProps>
+ children?: ReactNode | ((DatePickerRenderProps & {
+ defaultChildren: ReactNode | undefined
+})) => ReactNode
+ className?: string | ((DatePickerRenderProps & {
+ defaultClassName: string | undefined
+})) => string
defaultOpen?: boolean
defaultValue?: DateValue | null
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
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>
+ style?: CSSProperties | ((DatePickerRenderProps & {
+ defaultStyle: CSSProperties
+})) => CSSProperties | undefined
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>
+ children?: ReactNode | ((DateRangePickerRenderProps & {
+ defaultChildren: ReactNode | undefined
+})) => ReactNode
+ className?: string | ((DateRangePickerRenderProps & {
+ defaultClassName: string | undefined
+})) => string
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>
+ style?: CSSProperties | ((DateRangePickerRenderProps & {
+ defaultStyle: CSSProperties
+})) => CSSProperties | undefined
validate?: (RangeValue<MappedDateValue<DateValue>>) => ValidationError | boolean | null | undefined
validationBehavior?: 'native' | 'aria' = 'native'
value?: RangeValue<DateValue> | null
}/react-aria-components:Disclosure Disclosure {
- children?: ChildrenOrFunction<DisclosureRenderProps>
- className?: ClassNameOrFunction<DisclosureRenderProps>
+ children?: ReactNode | ((DisclosureRenderProps & {
+ defaultChildren: ReactNode | undefined
+})) => ReactNode
+ className?: string | ((DisclosureRenderProps & {
+ defaultClassName: string | undefined
+})) => string
defaultExpanded?: boolean
id?: Key
isDisabled?: boolean
isExpanded?: boolean
onExpandedChange?: (boolean) => void
slot?: string | null
- style?: StyleOrFunction<DisclosureRenderProps>
+ style?: CSSProperties | ((DisclosureRenderProps & {
+ defaultStyle: CSSProperties
+})) => CSSProperties | undefined
}/react-aria-components:DisclosureGroup DisclosureGroup {
allowsMultipleExpanded?: boolean
- children?: ChildrenOrFunction<DisclosureGroupRenderProps>
- className?: ClassNameOrFunction<DisclosureGroupRenderProps>
+ children?: ReactNode | ((DisclosureGroupRenderProps & {
+ defaultChildren: ReactNode | undefined
+})) => ReactNode
+ className?: string | ((DisclosureGroupRenderProps & {
+ defaultClassName: string | undefined
+})) => string
defaultExpandedKeys?: Iterable<Key>
expandedKeys?: Iterable<Key>
id?: string
isDisabled?: boolean
onExpandedChange?: (Set<Key>) => any
- style?: StyleOrFunction<DisclosureGroupRenderProps>
+ style?: CSSProperties | ((DisclosureGroupRenderProps & {
+ defaultStyle: CSSProperties
+})) => CSSProperties | undefined
}/react-aria-components:DisclosurePanel DisclosurePanel {
children: ReactNode
- className?: ClassNameOrFunction<DisclosurePanelRenderProps>
+ className?: string | ((DisclosurePanelRenderProps & {
+ defaultClassName: string | undefined
+})) => string
id?: string
role?: 'group' | 'region' = 'group'
- style?: StyleOrFunction<DisclosurePanelRenderProps>
+ style?: CSSProperties | ((DisclosurePanelRenderProps & {
+ defaultStyle: CSSProperties
+})) => CSSProperties | undefined
}/react-aria-components:DropZone DropZone {
aria-describedby?: string
aria-details?: string
aria-label?: string
aria-labelledby?: string
- children?: ChildrenOrFunction<DropZoneRenderProps>
- className?: ClassNameOrFunction<DropZoneRenderProps>
+ children?: ReactNode | ((DropZoneRenderProps & {
+ defaultChildren: ReactNode | undefined
+})) => ReactNode
+ className?: string | ((DropZoneRenderProps & {
+ defaultClassName: string | undefined
+})) => string
getDropOperation?: (DragTypes, Array<DropOperation>) => DropOperation
isDisabled?: boolean
onDrop?: (DropEvent) => void
onDropActivate?: (DropActivateEvent) => void
onDropEnter?: (DropEnterEvent) => void
onDropExit?: (DropExitEvent) => void
onDropMove?: (DropMoveEvent) => void
onHoverChange?: (boolean) => void
onHoverEnd?: (HoverEvent) => void
onHoverStart?: (HoverEvent) => void
slot?: string | null
- style?: StyleOrFunction<DropZoneRenderProps>
+ style?: CSSProperties | ((DropZoneRenderProps & {
+ defaultStyle: CSSProperties
+})) => CSSProperties | undefined
}/react-aria-components:FieldError FieldError {
- children?: ChildrenOrFunction<FieldErrorRenderProps>
- className?: ClassNameOrFunction<FieldErrorRenderProps>
+ children?: ReactNode | ((FieldErrorRenderProps & {
+ defaultChildren: ReactNode | undefined
+})) => ReactNode
+ className?: string | ((FieldErrorRenderProps & {
+ defaultClassName: string | undefined
+})) => string
id?: string
- style?: StyleOrFunction<FieldErrorRenderProps>
+ style?: CSSProperties | ((FieldErrorRenderProps & {
+ defaultStyle: CSSProperties
+})) => CSSProperties | undefined
}/react-aria-components:UNSTABLE_GridListLoadingSentinel-UNSTABLE_GridListLoadingSentinel <T extends {}> {
- children?: ReactNode
- className?: string
- isLoading?: boolean
- onLoadMore?: () => any
- scrollOffset?: number = 1
- style?: CSSProperties
-}/react-aria-components:GridList GridList <T extends {}> {
aria-describedby?: string
aria-details?: string
aria-label?: string
aria-labelledby?: string
autoFocus?: boolean | FocusStrategy
children?: ReactNode | ({}) => ReactNode
- className?: ClassNameOrFunction<GridListRenderProps>
+ className?: string | ((GridListRenderProps & {
+ defaultClassName: string | undefined
+})) => string
defaultSelectedKeys?: 'all' | Iterable<Key>
dependencies?: ReadonlyArray<any>
- disabledBehavior?: DisabledBehavior = "all"
+ disabledBehavior?: DisabledBehavior
disabledKeys?: Iterable<Key>
disallowEmptySelection?: boolean
disallowTypeAhead?: boolean = false
dragAndDropHooks?: DragAndDropHooks
escapeKeyBehavior?: 'clearSelection' | 'none' = 'clearSelection'
id?: string
items?: Iterable<T>
keyboardNavigationBehavior?: 'arrow' | 'tab' = 'arrow'
layout?: 'stack' | 'grid' = 'stack'
onAction?: (Key) => void
onScroll?: (UIEvent<Element>) => void
onSelectionChange?: (Selection) => void
renderEmptyState?: (GridListRenderProps) => ReactNode
selectedKeys?: 'all' | Iterable<Key>
- selectionBehavior?: SelectionBehavior = "toggle"
+ selectionBehavior?: SelectionBehavior
selectionMode?: SelectionMode
shouldSelectOnPressUp?: boolean
slot?: string | null
- style?: StyleOrFunction<GridListRenderProps>
+ style?: CSSProperties | ((GridListRenderProps & {
+ defaultStyle: CSSProperties
+})) => CSSProperties | undefined
}/react-aria-components:GridListItem GridListItem <T extends {}> {
- children?: ChildrenOrFunction<GridListItemRenderProps>
- className?: ClassNameOrFunction<GridListItemRenderProps>
+ children?: ReactNode | ((GridListItemRenderProps & {
+ defaultChildren: ReactNode | undefined
+})) => ReactNode
+ className?: string | ((GridListItemRenderProps & {
+ defaultClassName: string | undefined
+})) => string
download?: boolean | string
href?: Href
hrefLang?: string
id?: Key
isDisabled?: boolean
onAction?: () => void
onHoverChange?: (boolean) => void
onHoverEnd?: (HoverEvent) => void
onHoverStart?: (HoverEvent) => void
ping?: string
referrerPolicy?: HTMLAttributeReferrerPolicy
rel?: string
routerOptions?: RouterOptions
- style?: StyleOrFunction<GridListItemRenderProps>
+ style?: CSSProperties | ((GridListItemRenderProps & {
+ defaultStyle: CSSProperties
+})) => CSSProperties | undefined
target?: HTMLAttributeAnchorTarget
textValue?: string
value?: {}
}/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>
+ children?: ReactNode | ((GroupRenderProps & {
+ defaultChildren: ReactNode | undefined
+})) => ReactNode
+ className?: string | ((GroupRenderProps & {
+ defaultClassName: string | undefined
+})) => string
id?: string
isDisabled?: boolean
isInvalid?: boolean
onHoverChange?: (boolean) => void
onHoverEnd?: (HoverEvent) => void
onHoverStart?: (HoverEvent) => void
role?: 'group' | 'region' | 'presentation' = 'group'
slot?: string | null
- style?: StyleOrFunction<GroupRenderProps>
+ style?: CSSProperties | ((GroupRenderProps & {
+ defaultStyle: CSSProperties
+})) => CSSProperties | undefined
}/react-aria-components:Input Input extends InputHTMLAttributes {
- className?: ClassNameOrFunction<InputRenderProps>
+ className?: string | ((InputRenderProps & {
+ defaultClassName: string | undefined
+})) => string
onHoverChange?: (boolean) => void
onHoverEnd?: (HoverEvent) => void
onHoverStart?: (HoverEvent) => void
- style?: StyleOrFunction<InputRenderProps>
+ style?: CSSProperties | ((InputRenderProps & {
+ defaultStyle: CSSProperties
+})) => CSSProperties | undefined
}/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>
+ children?: ReactNode | ((LinkRenderProps & {
+ defaultChildren: ReactNode | undefined
+})) => ReactNode
+ className?: string | ((LinkRenderProps & {
+ defaultClassName: string | undefined
+})) => string
download?: boolean | string
href?: Href
hrefLang?: string
isDisabled?: boolean
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
ping?: string
referrerPolicy?: HTMLAttributeReferrerPolicy
rel?: string
routerOptions?: RouterOptions
slot?: string | null
- style?: StyleOrFunction<LinkRenderProps>
+ style?: CSSProperties | ((LinkRenderProps & {
+ defaultStyle: CSSProperties
+})) => CSSProperties | undefined
target?: HTMLAttributeAnchorTarget
}/react-aria-components:UNSTABLE_ListBoxLoadingSentinel-UNSTABLE_ListBoxLoadingSentinel <T extends {}> {
- children?: ReactNode
- className?: string
- isLoading?: boolean
- onLoadMore?: () => any
- scrollOffset?: number = 1
- style?: CSSProperties
-}/react-aria-components:ListBox ListBox <T extends {}> {
aria-describedby?: string
aria-details?: string
aria-label?: string
aria-labelledby?: string
autoFocus?: boolean | FocusStrategy
children?: ReactNode | ({}) => ReactNode
- className?: ClassNameOrFunction<ListBoxRenderProps>
+ className?: string | ((ListBoxRenderProps & {
+ defaultClassName: string | undefined
+})) => string
defaultSelectedKeys?: 'all' | Iterable<Key>
dependencies?: ReadonlyArray<any>
disabledKeys?: Iterable<Key>
disallowEmptySelection?: boolean
dragAndDropHooks?: DragAndDropHooks
escapeKeyBehavior?: 'clearSelection' | 'none' = 'clearSelection'
id?: string
items?: Iterable<T>
layout?: 'stack' | 'grid' = 'stack'
onAction?: (Key) => void
onBlur?: (FocusEvent<Target>) => void
onFocus?: (FocusEvent<Target>) => void
onFocusChange?: (boolean) => void
onScroll?: (UIEvent<Element>) => void
onSelectionChange?: (Selection) => void
orientation?: Orientation = 'vertical'
renderEmptyState?: (ListBoxRenderProps) => ReactNode
selectedKeys?: 'all' | Iterable<Key>
- selectionBehavior?: SelectionBehavior = "toggle"
+ selectionBehavior?: SelectionBehavior
selectionMode?: SelectionMode
shouldFocusOnHover?: boolean
shouldFocusWrap?: boolean
shouldSelectOnPressUp?: boolean
slot?: string | null
- style?: StyleOrFunction<ListBoxRenderProps>
+ style?: CSSProperties | ((ListBoxRenderProps & {
+ defaultStyle: CSSProperties
+})) => CSSProperties | undefined
}/react-aria-components:ListBoxItem ListBoxItem <T extends {}> {
aria-label?: string
- children?: ChildrenOrFunction<ListBoxItemRenderProps>
- className?: ClassNameOrFunction<ListBoxItemRenderProps>
+ children?: ReactNode | ((ListBoxItemRenderProps & {
+ defaultChildren: ReactNode | undefined
+})) => ReactNode
+ className?: string | ((ListBoxItemRenderProps & {
+ defaultClassName: string | undefined
+})) => string
download?: boolean | string
href?: Href
hrefLang?: string
id?: Key
isDisabled?: boolean
onAction?: () => void
onHoverChange?: (boolean) => void
onHoverEnd?: (HoverEvent) => void
onHoverStart?: (HoverEvent) => void
ping?: string
referrerPolicy?: HTMLAttributeReferrerPolicy
rel?: string
routerOptions?: RouterOptions
- style?: StyleOrFunction<ListBoxItemRenderProps>
+ style?: CSSProperties | ((ListBoxItemRenderProps & {
+ defaultStyle: CSSProperties
+})) => CSSProperties | undefined
target?: HTMLAttributeAnchorTarget
textValue?: string
value?: {}
}/react-aria-components:Menu Menu <T extends {}> {
aria-describedby?: string
aria-details?: string
aria-label?: string
aria-labelledby?: string
autoFocus?: boolean | FocusStrategy
children?: ReactNode | ({}) => ReactNode
- className?: ClassNameOrFunction<MenuRenderProps>
+ className?: string | ((MenuRenderProps & {
+ defaultClassName: string | undefined
+})) => string
defaultSelectedKeys?: 'all' | Iterable<Key>
dependencies?: ReadonlyArray<any>
disabledKeys?: Iterable<Key>
disallowEmptySelection?: boolean
escapeKeyBehavior?: 'clearSelection' | 'none' = 'clearSelection'
id?: string
items?: Iterable<T>
onAction?: (Key) => void
onClose?: () => void
onScroll?: (UIEvent<Element>) => void
onSelectionChange?: (Selection) => void
renderEmptyState?: () => ReactNode
selectedKeys?: 'all' | Iterable<Key>
selectionMode?: SelectionMode
shouldFocusWrap?: boolean
slot?: string | null
- style?: StyleOrFunction<MenuRenderProps>
+ style?: CSSProperties | ((MenuRenderProps & {
+ defaultStyle: CSSProperties
+})) => CSSProperties | undefined
}/react-aria-components:MenuItem MenuItem <T extends {}> {
aria-label?: string
- children?: ChildrenOrFunction<MenuItemRenderProps>
- className?: ClassNameOrFunction<MenuItemRenderProps>
+ children?: ReactNode | ((MenuItemRenderProps & {
+ defaultChildren: ReactNode | undefined
+})) => ReactNode
+ className?: string | ((MenuItemRenderProps & {
+ defaultClassName: string | undefined
+})) => string
download?: boolean | string
href?: Href
hrefLang?: string
id?: Key
isDisabled?: boolean
onAction?: () => void
onHoverChange?: (boolean) => void
onHoverEnd?: (HoverEvent) => void
onHoverStart?: (HoverEvent) => void
ping?: string
referrerPolicy?: HTMLAttributeReferrerPolicy
rel?: string
routerOptions?: RouterOptions
- style?: StyleOrFunction<MenuItemRenderProps>
+ style?: CSSProperties | ((MenuItemRenderProps & {
+ defaultStyle: CSSProperties
+})) => CSSProperties | undefined
target?: HTMLAttributeAnchorTarget
textValue?: string
value?: {}
}/react-aria-components:Meter Meter {
aria-describedby?: string
aria-details?: string
aria-label?: string
aria-labelledby?: string
- children?: ChildrenOrFunction<MeterRenderProps>
- className?: ClassNameOrFunction<MeterRenderProps>
+ children?: ReactNode | ((MeterRenderProps & {
+ defaultChildren: ReactNode | undefined
+})) => ReactNode
+ className?: string | ((MeterRenderProps & {
+ defaultClassName: string | undefined
+})) => string
formatOptions?: Intl.NumberFormatOptions = {style: 'percent'}
id?: string
maxValue?: number = 100
minValue?: number = 0
slot?: string | null
- style?: StyleOrFunction<MeterRenderProps>
+ style?: CSSProperties | ((MeterRenderProps & {
+ defaultStyle: CSSProperties
+})) => CSSProperties | undefined
value?: number = 0
valueLabel?: ReactNode
}/react-aria-components:Modal Modal {
- children?: ChildrenOrFunction<ModalRenderProps>
- className?: ClassNameOrFunction<ModalRenderProps>
+ children?: ReactNode | ((ModalRenderProps & {
+ defaultChildren: ReactNode | undefined
+})) => ReactNode
+ className?: string | ((ModalRenderProps & {
+ defaultClassName: string | undefined
+})) => string
defaultOpen?: boolean
isDismissable?: boolean = false
isEntering?: boolean
isExiting?: boolean
isKeyboardDismissDisabled?: boolean = false
isOpen?: boolean
onOpenChange?: (boolean) => void
shouldCloseOnInteractOutside?: (Element) => boolean
slot?: string | null
- style?: StyleOrFunction<ModalRenderProps>
+ style?: CSSProperties | ((ModalRenderProps & {
+ defaultStyle: CSSProperties
+})) => CSSProperties | undefined
}/react-aria-components:ModalOverlay ModalOverlay {
- children?: ChildrenOrFunction<ModalRenderProps>
- className?: ClassNameOrFunction<ModalRenderProps>
+ children?: ReactNode | ((ModalRenderProps & {
+ defaultChildren: ReactNode | undefined
+})) => ReactNode
+ className?: string | ((ModalRenderProps & {
+ defaultClassName: string | undefined
+})) => string
defaultOpen?: boolean
isDismissable?: boolean = false
isEntering?: boolean
isExiting?: boolean
isKeyboardDismissDisabled?: boolean = false
isOpen?: boolean
onOpenChange?: (boolean) => void
shouldCloseOnInteractOutside?: (Element) => boolean
slot?: string | null
- style?: StyleOrFunction<ModalRenderProps>
+ style?: CSSProperties | ((ModalRenderProps & {
+ defaultStyle: CSSProperties
+})) => CSSProperties | undefined
}/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>
+ children?: ReactNode | ((NumberFieldRenderProps & {
+ defaultChildren: ReactNode | undefined
+})) => ReactNode
+ className?: string | ((NumberFieldRenderProps & {
+ defaultClassName: string | undefined
+})) => string
decrementAriaLabel?: string
defaultValue?: number
formatOptions?: Intl.NumberFormatOptions
id?: string
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>
+ style?: CSSProperties | ((NumberFieldRenderProps & {
+ defaultStyle: CSSProperties
+})) => CSSProperties | undefined
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>
+ children?: ReactNode | ((OverlayArrowRenderProps & {
+ defaultChildren: ReactNode | undefined
+})) => ReactNode
+ className?: string | ((OverlayArrowRenderProps & {
+ defaultClassName: string | undefined
+})) => string
id?: string
- style?: StyleOrFunction<OverlayArrowRenderProps>
+ style?: CSSProperties | ((OverlayArrowRenderProps & {
+ defaultStyle: CSSProperties
+})) => CSSProperties | undefined
}/react-aria-components:Popover Popover {
aria-describedby?: string
aria-details?: string
aria-label?: string
aria-labelledby?: string
arrowBoundaryOffset?: number = 0
boundaryElement?: Element = document.body
- children?: ChildrenOrFunction<PopoverRenderProps>
- className?: ClassNameOrFunction<PopoverRenderProps>
+ children?: ReactNode | ((PopoverRenderProps & {
+ defaultChildren: ReactNode | undefined
+})) => ReactNode
+ className?: string | ((PopoverRenderProps & {
+ defaultClassName: string | undefined
+})) => string
containerPadding?: number = 12
crossOffset?: number = 0
defaultOpen?: boolean
isEntering?: boolean
isExiting?: 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>
+ style?: CSSProperties | ((PopoverRenderProps & {
+ defaultStyle: CSSProperties
+})) => CSSProperties | undefined
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>
+ children?: ReactNode | ((ProgressBarRenderProps & {
+ defaultChildren: ReactNode | undefined
+})) => ReactNode
+ className?: string | ((ProgressBarRenderProps & {
+ defaultClassName: string | undefined
+})) => string
formatOptions?: Intl.NumberFormatOptions = {style: 'percent'}
id?: string
isIndeterminate?: boolean
maxValue?: number = 100
minValue?: number = 0
slot?: string | null
- style?: StyleOrFunction<ProgressBarRenderProps>
+ style?: CSSProperties | ((ProgressBarRenderProps & {
+ defaultStyle: CSSProperties
+})) => CSSProperties | undefined
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>
+ children?: ReactNode | ((RadioGroupRenderProps & {
+ defaultChildren: ReactNode | undefined
+})) => ReactNode
+ className?: string | ((RadioGroupRenderProps & {
+ defaultClassName: string | undefined
+})) => string
defaultValue?: string | null
id?: string
isDisabled?: boolean
isInvalid?: 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>
+ style?: CSSProperties | ((RadioGroupRenderProps & {
+ defaultStyle: CSSProperties
+})) => CSSProperties | undefined
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>
+ children?: ReactNode | ((RadioRenderProps & {
+ defaultChildren: ReactNode | undefined
+})) => ReactNode
+ className?: string | ((RadioRenderProps & {
+ defaultClassName: string | undefined
+})) => string
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
slot?: string | null
- style?: StyleOrFunction<RadioRenderProps>
+ style?: CSSProperties | ((RadioRenderProps & {
+ defaultStyle: CSSProperties
+})) => CSSProperties | undefined
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>
+ children?: ReactNode | ((SearchFieldRenderProps & {
+ defaultChildren: ReactNode | undefined
+})) => ReactNode
+ className?: string | ((SearchFieldRenderProps & {
+ defaultClassName: string | undefined
+})) => string
defaultValue?: string
enterKeyHint?: 'enter' | 'done' | 'go' | 'next' | 'previous' | 'search' | 'send'
excludeFromTabOrder?: boolean
id?: 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>
+ style?: CSSProperties | ((SearchFieldRenderProps & {
+ defaultStyle: CSSProperties
+})) => CSSProperties | undefined
type?: 'text' | 'search' | 'url' | 'tel' | 'email' | 'password' | (string & {
})
validate?: (string) => ValidationError | boolean | null | undefined
value?: string
}/react-aria-components:Select Select <T extends {} = {
}> {
aria-describedby?: string
aria-details?: string
aria-label?: string
aria-labelledby?: string
autoComplete?: string
autoFocus?: boolean
- children?: ChildrenOrFunction<SelectRenderProps>
- className?: ClassNameOrFunction<SelectRenderProps>
+ children?: ReactNode | ((SelectRenderProps & {
+ defaultChildren: ReactNode | undefined
+})) => ReactNode
+ className?: string | ((SelectRenderProps & {
+ defaultClassName: string | undefined
+})) => string
defaultOpen?: boolean
defaultSelectedKey?: Key
disabledKeys?: Iterable<Key>
excludeFromTabOrder?: boolean
id?: string
isDisabled?: boolean
isInvalid?: boolean
isOpen?: boolean
isRequired?: boolean
name?: string
onBlur?: (FocusEvent<Target>) => void
onFocus?: (FocusEvent<Target>) => void
onFocusChange?: (boolean) => void
onKeyDown?: (KeyboardEvent) => void
onKeyUp?: (KeyboardEvent) => void
onOpenChange?: (boolean) => void
onSelectionChange?: (Key | null) => void
placeholder?: string = 'Select an item' (localized)
selectedKey?: Key | null
slot?: string | null
- style?: StyleOrFunction<SelectRenderProps>
+ style?: CSSProperties | ((SelectRenderProps & {
+ defaultStyle: CSSProperties
+})) => CSSProperties | undefined
validate?: (Key) => ValidationError | boolean | null | undefined
validationBehavior?: 'native' | 'aria' = 'native'
}/react-aria-components:SelectValue SelectValue <T extends {}> extends HTMLAttributes {
- children?: ChildrenOrFunction<SelectValueRenderProps<{}>>
- className?: ClassNameOrFunction<SelectValueRenderProps<{}>>
- style?: StyleOrFunction<SelectValueRenderProps<{}>>
+ children?: ReactNode | ((SelectValueRenderProps<{}> & {
+ defaultChildren: ReactNode | undefined
+})) => ReactNode
+ className?: string | ((SelectValueRenderProps<{}> & {
+ defaultClassName: string | undefined
+})) => string
+ style?: CSSProperties | ((SelectValueRenderProps<{}> & {
+ defaultStyle: CSSProperties
+})) => CSSProperties | undefined
}/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>
+ children?: ReactNode | ((SliderRenderProps & {
+ defaultChildren: ReactNode | undefined
+})) => ReactNode
+ className?: string | ((SliderRenderProps & {
+ defaultClassName: string | undefined
+})) => string
defaultValue?: T
formatOptions?: Intl.NumberFormatOptions
id?: string
isDisabled?: boolean
maxValue?: number = 100
minValue?: number = 0
onChange?: (T) => void
onChangeEnd?: (T) => void
orientation?: Orientation = 'horizontal'
slot?: string | null
step?: number = 1
- style?: StyleOrFunction<SliderRenderProps>
+ style?: CSSProperties | ((SliderRenderProps & {
+ defaultStyle: CSSProperties
+})) => CSSProperties | undefined
value?: T
}/react-aria-components:SliderOutput SliderOutput {
- children?: ChildrenOrFunction<SliderRenderProps>
- className?: ClassNameOrFunction<SliderRenderProps>
- style?: StyleOrFunction<SliderRenderProps>
+ children?: ReactNode | ((SliderRenderProps & {
+ defaultChildren: ReactNode | undefined
+})) => ReactNode
+ className?: string | ((SliderRenderProps & {
+ defaultClassName: string | undefined
+})) => string
+ style?: CSSProperties | ((SliderRenderProps & {
+ defaultStyle: CSSProperties
+})) => CSSProperties | undefined
}/react-aria-components:SliderTrack SliderTrack {
- children?: ChildrenOrFunction<SliderTrackRenderProps>
- className?: ClassNameOrFunction<SliderTrackRenderProps>
+ children?: ReactNode | ((SliderTrackRenderProps & {
+ defaultChildren: ReactNode | undefined
+})) => ReactNode
+ className?: string | ((SliderTrackRenderProps & {
+ defaultClassName: string | undefined
+})) => string
onHoverChange?: (boolean) => void
onHoverEnd?: (HoverEvent) => void
onHoverStart?: (HoverEvent) => void
- style?: StyleOrFunction<SliderTrackRenderProps>
+ style?: CSSProperties | ((SliderTrackRenderProps & {
+ defaultStyle: CSSProperties
+})) => CSSProperties | undefined
}/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>
+ children?: ReactNode | ((SliderThumbRenderProps & {
+ defaultChildren: ReactNode | undefined
+})) => ReactNode
+ className?: string | ((SliderThumbRenderProps & {
+ defaultClassName: string | undefined
+})) => string
id?: string
index?: number = 0
inputRef?: RefObject<HTMLInputElement | null>
isDisabled?: boolean
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>
+ style?: CSSProperties | ((SliderThumbRenderProps & {
+ defaultStyle: CSSProperties
+})) => CSSProperties | undefined
}/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>
+ children?: ReactNode | ((SwitchRenderProps & {
+ defaultChildren: ReactNode | undefined
+})) => ReactNode
+ className?: string | ((SwitchRenderProps & {
+ defaultClassName: string | undefined
+})) => string
defaultSelected?: boolean
excludeFromTabOrder?: boolean
id?: string
inputRef?: RefObject<HTMLInputElement | null>
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>
+ style?: CSSProperties | ((SwitchRenderProps & {
+ defaultStyle: CSSProperties
+})) => CSSProperties | undefined
value?: string
}/react-aria-components:UNSTABLE_TableLoadingSentinel-UNSTABLE_TableLoadingSentinel <T extends {}> {
- children?: ReactNode
- className?: string
- isLoading?: boolean
- onLoadMore?: () => any
- scrollOffset?: number = 1
- style?: CSSProperties
-}/react-aria-components:Table Table {
aria-describedby?: string
aria-details?: string
aria-label?: string
aria-labelledby?: string
children?: ReactNode
- className?: ClassNameOrFunction<TableRenderProps>
+ className?: string | ((TableRenderProps & {
+ defaultClassName: string | undefined
+})) => string
defaultSelectedKeys?: 'all' | Iterable<Key>
disabledBehavior?: DisabledBehavior = "selection"
disabledKeys?: Iterable<Key>
disallowEmptySelection?: boolean
dragAndDropHooks?: DragAndDropHooks
escapeKeyBehavior?: 'clearSelection' | 'none' = 'clearSelection'
onRowAction?: (Key) => void
onScroll?: (UIEvent<Element>) => void
onSelectionChange?: (Selection) => void
onSortChange?: (SortDescriptor) => any
selectedKeys?: 'all' | Iterable<Key>
selectionBehavior?: SelectionBehavior = "toggle"
selectionMode?: SelectionMode
shouldSelectOnPressUp?: boolean
slot?: string | null
sortDescriptor?: SortDescriptor
- style?: StyleOrFunction<TableRenderProps>
+ style?: CSSProperties | ((TableRenderProps & {
+ defaultStyle: CSSProperties
+})) => CSSProperties | undefined
}/react-aria-components:Row Row <T extends {}> {
children?: ReactNode | ({}) => ReactElement
- className?: ClassNameOrFunction<RowRenderProps>
+ className?: string | ((RowRenderProps & {
+ defaultClassName: string | undefined
+})) => string
columns?: Iterable<{}>
dependencies?: ReadonlyArray<any>
download?: boolean | string
href?: Href
hrefLang?: string
id?: Key
isDisabled?: boolean
onAction?: () => void
onHoverChange?: (boolean) => void
onHoverEnd?: (HoverEvent) => void
onHoverStart?: (HoverEvent) => void
ping?: string
referrerPolicy?: HTMLAttributeReferrerPolicy
rel?: string
routerOptions?: RouterOptions
- style?: StyleOrFunction<RowRenderProps>
+ style?: CSSProperties | ((RowRenderProps & {
+ defaultStyle: CSSProperties
+})) => CSSProperties | undefined
target?: HTMLAttributeAnchorTarget
textValue?: string
value?: {}
}/react-aria-components:Cell Cell {
- children?: ChildrenOrFunction<CellRenderProps>
- className?: ClassNameOrFunction<CellRenderProps>
+ children?: ReactNode | ((CellRenderProps & {
+ defaultChildren: ReactNode | undefined
+})) => ReactNode
+ className?: string | ((CellRenderProps & {
+ defaultClassName: string | undefined
+})) => string
colSpan?: number
id?: Key
- style?: StyleOrFunction<CellRenderProps>
+ style?: CSSProperties | ((CellRenderProps & {
+ defaultStyle: CSSProperties
+})) => CSSProperties | undefined
textValue?: string
}/react-aria-components:Column Column {
allowsSorting?: boolean
- children?: ChildrenOrFunction<ColumnRenderProps>
- className?: ClassNameOrFunction<ColumnRenderProps>
+ children?: ReactNode | ((ColumnRenderProps & {
+ defaultChildren: ReactNode | undefined
+})) => ReactNode
+ className?: string | ((ColumnRenderProps & {
+ defaultClassName: string | undefined
+})) => string
defaultWidth?: ColumnSize | null
id?: Key
isRowHeader?: boolean
maxWidth?: ColumnStaticSize | null
minWidth?: ColumnStaticSize | null
- style?: StyleOrFunction<ColumnRenderProps>
+ style?: CSSProperties | ((ColumnRenderProps & {
+ defaultStyle: CSSProperties
+})) => CSSProperties | undefined
textValue?: string
width?: ColumnSize | null
}/react-aria-components:ColumnResizer ColumnResizer {
aria-label?: string
- children?: ChildrenOrFunction<ColumnResizerRenderProps>
- className?: ClassNameOrFunction<ColumnResizerRenderProps>
+ children?: ReactNode | ((ColumnResizerRenderProps & {
+ defaultChildren: ReactNode | undefined
+})) => ReactNode
+ className?: string | ((ColumnResizerRenderProps & {
+ defaultClassName: string | undefined
+})) => string
onHoverChange?: (boolean) => void
onHoverEnd?: (HoverEvent) => void
onHoverStart?: (HoverEvent) => void
- style?: StyleOrFunction<ColumnResizerRenderProps>
+ style?: CSSProperties | ((ColumnResizerRenderProps & {
+ defaultStyle: CSSProperties
+})) => CSSProperties | undefined
}/react-aria-components:TableHeader TableHeader <T extends {}> {
children?: ReactNode | ({}) => ReactElement
- className?: ClassNameOrFunction<TableHeaderRenderProps>
+ className?: string | ((TableHeaderRenderProps & {
+ defaultClassName: string | undefined
+})) => string
columns?: Iterable<{}>
dependencies?: ReadonlyArray<any>
onHoverChange?: (boolean) => void
onHoverEnd?: (HoverEvent) => void
onHoverStart?: (HoverEvent) => void
- style?: StyleOrFunction<TableHeaderRenderProps>
+ style?: CSSProperties | ((TableHeaderRenderProps & {
+ defaultStyle: CSSProperties
+})) => CSSProperties | undefined
}/react-aria-components:TableBody TableBody <T extends {}> {
children?: ReactNode | (T) => ReactNode
- className?: ClassNameOrFunction<TableBodyRenderProps>
+ className?: string | ((TableBodyRenderProps & {
+ defaultClassName: string | undefined
+})) => string
dependencies?: ReadonlyArray<any>
items?: Iterable<T>
renderEmptyState?: (TableBodyRenderProps) => ReactNode
- style?: StyleOrFunction<TableBodyRenderProps>
+ style?: CSSProperties | ((TableBodyRenderProps & {
+ defaultStyle: CSSProperties
+})) => CSSProperties | undefined
}/react-aria-components:Tabs Tabs {
aria-describedby?: string
aria-details?: string
aria-label?: string
aria-labelledby?: string
- children?: ChildrenOrFunction<TabsRenderProps>
- className?: ClassNameOrFunction<TabsRenderProps>
+ children?: ReactNode | ((TabsRenderProps & {
+ defaultChildren: ReactNode | undefined
+})) => ReactNode
+ className?: string | ((TabsRenderProps & {
+ defaultClassName: string | undefined
+})) => string
defaultSelectedKey?: Key
disabledKeys?: Iterable<Key>
id?: string
isDisabled?: boolean
keyboardActivation?: 'automatic' | 'manual' = 'automatic'
onSelectionChange?: (Key) => void
orientation?: Orientation = 'horizontal'
selectedKey?: Key | null
slot?: string | null
- style?: StyleOrFunction<TabsRenderProps>
+ style?: CSSProperties | ((TabsRenderProps & {
+ defaultStyle: CSSProperties
+})) => CSSProperties | undefined
}/react-aria-components:TabList TabList <T extends {}> {
aria-describedby?: string
aria-details?: string
aria-label?: string
aria-labelledby?: string
children?: ReactNode | (T) => ReactNode
- className?: ClassNameOrFunction<TabListRenderProps>
+ className?: string | ((TabListRenderProps & {
+ defaultClassName: string | undefined
+})) => string
dependencies?: ReadonlyArray<any>
items?: Iterable<T>
- style?: StyleOrFunction<TabListRenderProps>
+ style?: CSSProperties | ((TabListRenderProps & {
+ defaultStyle: CSSProperties
+})) => CSSProperties | undefined
}/react-aria-components:TabPanel TabPanel {
aria-describedby?: string
aria-details?: string
aria-label?: string
aria-labelledby?: string
- children?: ChildrenOrFunction<TabPanelRenderProps>
- className?: ClassNameOrFunction<TabPanelRenderProps>
+ children?: ReactNode | ((TabPanelRenderProps & {
+ defaultChildren: ReactNode | undefined
+})) => ReactNode
+ className?: string | ((TabPanelRenderProps & {
+ defaultClassName: string | undefined
+})) => string
id?: string
shouldForceMount?: boolean = false
- style?: StyleOrFunction<TabPanelRenderProps>
+ style?: CSSProperties | ((TabPanelRenderProps & {
+ defaultStyle: CSSProperties
+})) => CSSProperties | undefined
}/react-aria-components:Tab Tab {
aria-describedby?: string
aria-details?: string
aria-label?: string
aria-labelledby?: string
- children?: ChildrenOrFunction<TabRenderProps>
- className?: ClassNameOrFunction<TabRenderProps>
+ children?: ReactNode | ((TabRenderProps & {
+ defaultChildren: ReactNode | undefined
+})) => ReactNode
+ className?: string | ((TabRenderProps & {
+ defaultClassName: string | undefined
+})) => string
download?: boolean | string
href?: Href
hrefLang?: string
id?: Key
isDisabled?: boolean
onHoverChange?: (boolean) => void
onHoverEnd?: (HoverEvent) => void
onHoverStart?: (HoverEvent) => void
ping?: string
referrerPolicy?: HTMLAttributeReferrerPolicy
rel?: string
routerOptions?: RouterOptions
- style?: StyleOrFunction<TabRenderProps>
+ style?: CSSProperties | ((TabRenderProps & {
+ defaultStyle: CSSProperties
+})) => CSSProperties | undefined
target?: HTMLAttributeAnchorTarget
}/react-aria-components:TagList TagList <T extends {}> {
children?: ReactNode | (T) => ReactNode
- className?: ClassNameOrFunction<TagListRenderProps>
+ className?: string | ((TagListRenderProps & {
+ defaultClassName: string | undefined
+})) => string
dependencies?: ReadonlyArray<any>
items?: Iterable<T>
renderEmptyState?: (TagListRenderProps) => ReactNode
- style?: StyleOrFunction<TagListRenderProps>
+ style?: CSSProperties | ((TagListRenderProps & {
+ defaultStyle: CSSProperties
+})) => CSSProperties | undefined
}/react-aria-components:Tag Tag {
- children?: ChildrenOrFunction<TagRenderProps>
- className?: ClassNameOrFunction<TagRenderProps>
+ children?: ReactNode | ((TagRenderProps & {
+ defaultChildren: ReactNode | undefined
+})) => ReactNode
+ className?: string | ((TagRenderProps & {
+ defaultClassName: string | undefined
+})) => string
download?: boolean | string
href?: Href
hrefLang?: string
id?: Key
isDisabled?: boolean
onHoverChange?: (boolean) => void
onHoverEnd?: (HoverEvent) => void
onHoverStart?: (HoverEvent) => void
ping?: string
referrerPolicy?: HTMLAttributeReferrerPolicy
rel?: string
routerOptions?: RouterOptions
- style?: StyleOrFunction<TagRenderProps>
+ style?: CSSProperties | ((TagRenderProps & {
+ defaultStyle: CSSProperties
+})) => CSSProperties | undefined
target?: HTMLAttributeAnchorTarget
textValue?: string
}/react-aria-components:TextArea TextArea extends TextareaHTMLAttributes {
- className?: ClassNameOrFunction<InputRenderProps>
+ className?: string | ((InputRenderProps & {
+ defaultClassName: string | undefined
+})) => string
onHoverChange?: (boolean) => void
onHoverEnd?: (HoverEvent) => void
onHoverStart?: (HoverEvent) => void
- style?: StyleOrFunction<InputRenderProps>
+ style?: CSSProperties | ((InputRenderProps & {
+ defaultStyle: CSSProperties
+})) => CSSProperties | undefined
}/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>
+ children?: ReactNode | ((TextFieldRenderProps & {
+ defaultChildren: ReactNode | undefined
+})) => ReactNode
+ className?: string | ((TextFieldRenderProps & {
+ defaultClassName: string | undefined
+})) => string
defaultValue?: string
enterKeyHint?: 'enter' | 'done' | 'go' | 'next' | 'previous' | 'search' | 'send'
excludeFromTabOrder?: boolean
id?: 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>
+ style?: CSSProperties | ((TextFieldRenderProps & {
+ defaultStyle: CSSProperties
+})) => CSSProperties | undefined
type?: 'text' | 'search' | 'url' | 'tel' | 'email' | 'password' | (string & {
})
validate?: (string) => ValidationError | boolean | null | undefined
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>>
- style?: StyleOrFunction<ToastRenderProps<T>>
+ children?: ReactNode | ((ToastRenderProps<T> & {
+ defaultChildren: ReactNode | undefined
+})) => ReactNode
+ className?: string | ((ToastRenderProps<T> & {
+ defaultClassName: string | undefined
+})) => string
+ style?: CSSProperties | ((ToastRenderProps<T> & {
+ defaultStyle: CSSProperties
+})) => CSSProperties | undefined
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>>
- style?: StyleOrFunction<ToastRegionRenderProps<T>>
+ className?: string | ((ToastRegionRenderProps<T> & {
+ defaultClassName: string | undefined
+})) => string
+ style?: CSSProperties | ((ToastRegionRenderProps<T> & {
+ defaultStyle: CSSProperties
+})) => CSSProperties | undefined
}/react-aria-components:UNSTABLE_ToastRegion UNSTABLE_ToastRegion <T> {
aria-describedby?: string
aria-details?: string
aria-label?: string = "Notifications"
aria-labelledby?: string
children: ReactNode | ({
toast: QueuedToast<T>
}) => ReactElement
- className?: ClassNameOrFunction<ToastRegionRenderProps<T>>
+ className?: string | ((ToastRegionRenderProps<T> & {
+ defaultClassName: string | undefined
+})) => string
queue: ToastQueue<T>
- style?: StyleOrFunction<ToastRegionRenderProps<T>>
+ style?: CSSProperties | ((ToastRegionRenderProps<T> & {
+ defaultStyle: CSSProperties
+})) => CSSProperties | undefined
}/react-aria-components:ToggleButton ToggleButton {
aria-controls?: string
aria-describedby?: string
aria-details?: string
aria-expanded?: boolean | 'true' | 'false'
aria-haspopup?: boolean | 'menu' | 'listbox' | 'tree' | 'grid' | 'dialog' | 'true' | 'false'
aria-label?: string
aria-labelledby?: string
aria-pressed?: boolean | 'true' | 'false' | 'mixed'
autoFocus?: boolean
- children?: ChildrenOrFunction<ToggleButtonRenderProps>
- className?: ClassNameOrFunction<ToggleButtonRenderProps>
+ children?: ReactNode | ((ToggleButtonRenderProps & {
+ defaultChildren: ReactNode | undefined
+})) => ReactNode
+ className?: string | ((ToggleButtonRenderProps & {
+ defaultClassName: string | undefined
+})) => string
defaultSelected?: boolean
excludeFromTabOrder?: boolean
id?: Key
isDisabled?: boolean
isSelected?: 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>
+ style?: CSSProperties | ((ToggleButtonRenderProps & {
+ defaultStyle: CSSProperties
+})) => CSSProperties | undefined
type?: 'button' | 'submit' | 'reset' = 'button'
}/react-aria-components:ToggleButtonGroup ToggleButtonGroup {
aria-describedby?: string
aria-details?: string
aria-label?: string
aria-labelledby?: string
- children?: ChildrenOrFunction<ToggleButtonGroupRenderProps>
- className?: ClassNameOrFunction<ToggleButtonGroupRenderProps>
+ children?: ReactNode | ((ToggleButtonGroupRenderProps & {
+ defaultChildren: ReactNode | undefined
+})) => ReactNode
+ className?: string | ((ToggleButtonGroupRenderProps & {
+ defaultClassName: string | undefined
+})) => string
defaultSelectedKeys?: Iterable<Key>
disallowEmptySelection?: boolean
isDisabled?: boolean
onSelectionChange?: (Set<Key>) => void
orientation?: Orientation = 'horizontal'
selectedKeys?: Iterable<Key>
selectionMode?: 'single' | 'multiple'
slot?: string | null
- style?: StyleOrFunction<ToggleButtonGroupRenderProps>
+ style?: CSSProperties | ((ToggleButtonGroupRenderProps & {
+ defaultStyle: CSSProperties
+})) => CSSProperties | undefined
}/react-aria-components:Toolbar Toolbar {
aria-describedby?: string
aria-details?: string
aria-label?: string
aria-labelledby?: string
- children?: ChildrenOrFunction<ToolbarRenderProps>
- className?: ClassNameOrFunction<ToolbarRenderProps>
+ children?: ReactNode | ((ToolbarRenderProps & {
+ defaultChildren: ReactNode | undefined
+})) => ReactNode
+ className?: string | ((ToolbarRenderProps & {
+ defaultClassName: string | undefined
+})) => string
orientation?: Orientation = 'horizontal'
slot?: string | null
- style?: StyleOrFunction<ToolbarRenderProps>
+ style?: CSSProperties | ((ToolbarRenderProps & {
+ defaultStyle: CSSProperties
+})) => CSSProperties | undefined
}/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>
+ children?: ReactNode | ((TooltipRenderProps & {
+ defaultChildren: ReactNode | undefined
+})) => ReactNode
+ className?: string | ((TooltipRenderProps & {
+ defaultClassName: string | undefined
+})) => string
containerPadding?: number = 12
crossOffset?: number = 0
defaultOpen?: boolean
isEntering?: boolean
isExiting?: boolean
isOpen?: boolean
offset?: number = 0
onOpenChange?: (boolean) => void
placement?: Placement = 'top'
shouldFlip?: boolean = true
- style?: StyleOrFunction<TooltipRenderProps>
+ style?: CSSProperties | ((TooltipRenderProps & {
+ defaultStyle: CSSProperties
+})) => CSSProperties | undefined
triggerRef?: RefObject<Element | null>
}/react-aria-components:UNSTABLE_TreeLoadingIndicator-UNSTABLE_TreeLoadingIndicator <T extends {}> {
- children?: ChildrenOrFunction<UNSTABLE_TreeLoadingIndicatorRenderProps>
- className?: ClassNameOrFunction<UNSTABLE_TreeLoadingIndicatorRenderProps>
- style?: StyleOrFunction<UNSTABLE_TreeLoadingIndicatorRenderProps>
-}/react-aria-components:Tree Tree <T extends {}> {
aria-describedby?: string
aria-details?: string
aria-label?: string
aria-labelledby?: string
autoFocus?: boolean | FocusStrategy
children?: ReactNode | ({}) => ReactNode
- className?: ClassNameOrFunction<TreeRenderProps>
+ className?: string | ((TreeRenderProps & {
+ defaultClassName: string | undefined
+})) => string
defaultExpandedKeys?: Iterable<Key>
defaultSelectedKeys?: 'all' | Iterable<Key>
dependencies?: ReadonlyArray<any>
disabledBehavior?: DisabledBehavior = 'all'
disabledKeys?: Iterable<Key>
disallowEmptySelection?: boolean
dragAndDropHooks?: DragAndDropHooks
escapeKeyBehavior?: 'clearSelection' | 'none' = 'clearSelection'
expandedKeys?: Iterable<Key>
id?: string
items?: Iterable<T>
onAction?: (Key) => void
onExpandedChange?: (Set<Key>) => any
onScroll?: (UIEvent<Element>) => void
onSelectionChange?: (Selection) => void
renderEmptyState?: (TreeEmptyStateRenderProps) => ReactNode
selectedKeys?: 'all' | Iterable<Key>
- selectionBehavior?: SelectionBehavior = "toggle"
+ selectionBehavior?: SelectionBehavior
selectionMode?: SelectionMode
shouldSelectOnPressUp?: boolean
slot?: string | null
- style?: StyleOrFunction<TreeRenderProps>
+ style?: CSSProperties | ((TreeRenderProps & {
+ defaultStyle: CSSProperties
+})) => CSSProperties | undefined
}/react-aria-components:TreeItem TreeItem <T extends {}> {
aria-label?: string
children: ReactNode
- className?: ClassNameOrFunction<TreeItemRenderProps>
+ className?: string | ((TreeItemRenderProps & {
+ defaultClassName: string | undefined
+})) => string
download?: boolean | string
hasChildItems?: boolean
href?: Href
hrefLang?: string
id?: Key
isDisabled?: boolean
onAction?: () => void
onHoverChange?: (boolean) => void
onHoverEnd?: (HoverEvent) => void
onHoverStart?: (HoverEvent) => void
ping?: string
referrerPolicy?: HTMLAttributeReferrerPolicy
rel?: string
routerOptions?: RouterOptions
- style?: StyleOrFunction<TreeItemRenderProps>
+ style?: CSSProperties | ((TreeItemRenderProps & {
+ defaultStyle: CSSProperties
+})) => CSSProperties | undefined
target?: HTMLAttributeAnchorTarget
textValue: string
value?: {}
}/react-aria-components:TreeItemContent TreeItemContent {
- children?: ChildrenOrFunction<T>
+ children?: ReactNode | ((T & {
+ defaultChildren: ReactNode | undefined
+})) => ReactNode
}/react-aria-components:DropIndicator DropIndicator {
- children?: ChildrenOrFunction<DropIndicatorRenderProps>
- className?: ClassNameOrFunction<DropIndicatorRenderProps>
- style?: StyleOrFunction<DropIndicatorRenderProps>
+ children?: ReactNode | ((DropIndicatorRenderProps & {
+ defaultChildren: ReactNode | undefined
+})) => ReactNode
+ className?: string | ((DropIndicatorRenderProps & {
+ defaultClassName: string | undefined
+})) => string
+ style?: CSSProperties | ((DropIndicatorRenderProps & {
+ defaultStyle: CSSProperties
+})) => CSSProperties | undefined
target: DropTarget
}/react-aria-components:BreadcrumbProps BreadcrumbProps {
- children?: ChildrenOrFunction<BreadcrumbRenderProps>
- className?: ClassNameOrFunction<BreadcrumbRenderProps>
+ children?: ReactNode | ((BreadcrumbRenderProps & {
+ defaultChildren: ReactNode | undefined
+})) => ReactNode
+ className?: string | ((BreadcrumbRenderProps & {
+ defaultClassName: string | undefined
+})) => string
id?: Key
- style?: StyleOrFunction<BreadcrumbRenderProps>
+ style?: CSSProperties | ((BreadcrumbRenderProps & {
+ defaultStyle: CSSProperties
+})) => CSSProperties | undefined
}/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-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>
+ children?: ReactNode | ((ButtonRenderProps & {
+ defaultChildren: ReactNode | undefined
+})) => ReactNode
+ className?: string | ((ButtonRenderProps & {
+ defaultClassName: string | undefined
+})) => string
excludeFromTabOrder?: boolean
form?: string
formAction?: string
formEncType?: string
formMethod?: 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>
+ style?: CSSProperties | ((ButtonRenderProps & {
+ defaultStyle: CSSProperties
+})) => CSSProperties | undefined
type?: 'button' | 'submit' | 'reset' = 'button'
value?: string
}/react-aria-components:CalendarCellProps CalendarCellProps {
- children?: ChildrenOrFunction<CalendarCellRenderProps>
- className?: ClassNameOrFunction<CalendarCellRenderProps>
+ children?: ReactNode | ((CalendarCellRenderProps & {
+ defaultChildren: ReactNode | undefined
+})) => ReactNode
+ className?: string | ((CalendarCellRenderProps & {
+ defaultClassName: string | undefined
+})) => string
date: CalendarDate
onHoverChange?: (boolean) => void
onHoverEnd?: (HoverEvent) => void
onHoverStart?: (HoverEvent) => void
- style?: StyleOrFunction<CalendarCellRenderProps>
+ style?: CSSProperties | ((CalendarCellRenderProps & {
+ defaultStyle: CSSProperties
+})) => CSSProperties | undefined
}/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>
+ children?: ReactNode | ((CalendarRenderProps & {
+ defaultChildren: ReactNode | undefined
+})) => ReactNode
+ className?: string | ((CalendarRenderProps & {
+ defaultClassName: string | undefined
+})) => string
createCalendar?: (CalendarIdentifier) => Calendar
defaultFocusedValue?: DateValue | null
defaultValue?: DateValue | null
firstDayOfWeek?: 'sun' | 'mon' | 'tue' | 'wed' | 'thu' | 'fri' | 'sat'
focusedValue?: DateValue | null
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
slot?: string | null
- style?: StyleOrFunction<CalendarRenderProps>
+ style?: CSSProperties | ((CalendarRenderProps & {
+ defaultStyle: CSSProperties
+})) => CSSProperties | undefined
value?: DateValue | null
visibleDuration?: DateDuration = {months: 1}
}/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>
+ children?: ReactNode | ((RangeCalendarRenderProps & {
+ defaultChildren: ReactNode | undefined
+})) => ReactNode
+ className?: string | ((RangeCalendarRenderProps & {
+ defaultClassName: string | undefined
+})) => string
createCalendar?: (CalendarIdentifier) => Calendar
defaultFocusedValue?: DateValue | null
defaultValue?: RangeValue<DateValue> | null
firstDayOfWeek?: 'sun' | 'mon' | 'tue' | 'wed' | 'thu' | 'fri' | 'sat'
focusedValue?: DateValue | null
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
slot?: string | null
- style?: StyleOrFunction<RangeCalendarRenderProps>
+ style?: CSSProperties | ((RangeCalendarRenderProps & {
+ defaultStyle: CSSProperties
+})) => CSSProperties | undefined
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>
+ children?: ReactNode | ((CheckboxGroupRenderProps & {
+ defaultChildren: ReactNode | undefined
+})) => ReactNode
+ className?: string | ((CheckboxGroupRenderProps & {
+ defaultClassName: string | undefined
+})) => string
defaultValue?: Array<string>
id?: string
isDisabled?: boolean
isInvalid?: 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>
+ style?: CSSProperties | ((CheckboxGroupRenderProps & {
+ defaultStyle: CSSProperties
+})) => CSSProperties | undefined
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>
+ children?: ReactNode | ((CheckboxRenderProps & {
+ defaultChildren: ReactNode | undefined
+})) => ReactNode
+ className?: string | ((CheckboxRenderProps & {
+ defaultClassName: string | undefined
+})) => string
defaultSelected?: boolean
excludeFromTabOrder?: boolean
id?: string
inputRef?: RefObject<HTMLInputElement | null>
isDisabled?: boolean
isIndeterminate?: boolean
isInvalid?: boolean
isReadOnly?: boolean
isRequired?: boolean
isSelected?: boolean
name?: string
onBlur?: (FocusEvent<Target>) => void
onChange?: (boolean) => void
onFocus?: (FocusEvent<Target>) => void
onFocusChange?: (boolean) => void
onHoverChange?: (boolean) => void
onHoverEnd?: (HoverEvent) => void
onHoverStart?: (HoverEvent) => void
onKeyDown?: (KeyboardEvent) => void
onKeyUp?: (KeyboardEvent) => void
slot?: string | null
- style?: StyleOrFunction<CheckboxRenderProps>
+ style?: CSSProperties | ((CheckboxRenderProps & {
+ defaultStyle: CSSProperties
+})) => CSSProperties | undefined
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>
+ children?: ReactNode | ((ColorAreaRenderProps & {
+ defaultChildren: ReactNode | undefined
+})) => ReactNode
+ className?: string | ((ColorAreaRenderProps & {
+ defaultClassName: string | undefined
+})) => string
colorSpace?: ColorSpace
defaultValue?: T
id?: string
isDisabled?: boolean
onChange?: (Color) => void
onChangeEnd?: (Color) => void
slot?: string | null
- style?: StyleOrFunction<ColorAreaRenderProps>
+ style?: CSSProperties | ((ColorAreaRenderProps & {
+ defaultStyle: CSSProperties
+})) => CSSProperties | undefined
value?: T
xChannel?: ColorChannel
xName?: string
yChannel?: ColorChannel
}/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>
+ children?: ReactNode | ((ColorFieldRenderProps & {
+ defaultChildren: ReactNode | undefined
+})) => ReactNode
+ className?: string | ((ColorFieldRenderProps & {
+ defaultClassName: string | undefined
+})) => string
colorSpace?: ColorSpace
defaultValue?: T
excludeFromTabOrder?: boolean
id?: 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>
+ style?: CSSProperties | ((ColorFieldRenderProps & {
+ defaultStyle: CSSProperties
+})) => CSSProperties | undefined
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>
+ children?: ReactNode | ((ColorSliderRenderProps & {
+ defaultChildren: ReactNode | undefined
+})) => ReactNode
+ className?: string | ((ColorSliderRenderProps & {
+ defaultClassName: string | undefined
+})) => string
colorSpace?: ColorSpace
defaultValue?: T
id?: string
isDisabled?: boolean
name?: string
onChange?: (Color) => void
onChangeEnd?: (Color) => void
orientation?: Orientation = 'horizontal'
slot?: string | null
- style?: StyleOrFunction<ColorSliderRenderProps>
+ style?: CSSProperties | ((ColorSliderRenderProps & {
+ defaultStyle: CSSProperties
+})) => CSSProperties | undefined
value?: T
}/react-aria-components:ColorSwatchProps ColorSwatchProps {
aria-describedby?: string
aria-details?: string
aria-label?: string
aria-labelledby?: string
- className?: ClassNameOrFunction<ColorSwatchRenderProps>
+ className?: string | ((ColorSwatchRenderProps & {
+ defaultClassName: string | undefined
+})) => string
color?: string | Color
colorName?: string
id?: string
slot?: string | null
- style?: StyleOrFunction<ColorSwatchRenderProps>
+ style?: CSSProperties | ((ColorSwatchRenderProps & {
+ defaultStyle: CSSProperties
+})) => CSSProperties | undefined
}/react-aria-components:ColorSwatchPickerProps ColorSwatchPickerProps {
aria-describedby?: string
aria-details?: string
aria-label?: string
aria-labelledby?: string
children?: ReactNode
- className?: ClassNameOrFunction<ColorSwatchPickerRenderProps>
+ className?: string | ((ColorSwatchPickerRenderProps & {
+ defaultClassName: string | undefined
+})) => string
defaultValue?: string | Color
layout?: 'grid' | 'stack' = 'grid'
onChange?: (Color) => void
- style?: StyleOrFunction<ColorSwatchPickerRenderProps>
+ style?: CSSProperties | ((ColorSwatchPickerRenderProps & {
+ defaultStyle: CSSProperties
+})) => CSSProperties | undefined
value?: string | Color
}/react-aria-components:ColorSwatchPickerItemProps ColorSwatchPickerItemProps {
- children?: ChildrenOrFunction<ColorSwatchPickerItemRenderProps>
- className?: ClassNameOrFunction<ColorSwatchPickerItemRenderProps>
+ children?: ReactNode | ((ColorSwatchPickerItemRenderProps & {
+ defaultChildren: ReactNode | undefined
+})) => ReactNode
+ className?: string | ((ColorSwatchPickerItemRenderProps & {
+ defaultClassName: string | undefined
+})) => string
color: string | Color
isDisabled?: boolean
onHoverChange?: (boolean) => void
onHoverEnd?: (HoverEvent) => void
onHoverStart?: (HoverEvent) => void
- style?: StyleOrFunction<ColorSwatchPickerItemRenderProps>
+ style?: CSSProperties | ((ColorSwatchPickerItemRenderProps & {
+ defaultStyle: CSSProperties
+})) => CSSProperties | undefined
}/react-aria-components:ColorThumbProps ColorThumbProps {
- children?: ChildrenOrFunction<ColorThumbRenderProps>
- className?: ClassNameOrFunction<ColorThumbRenderProps>
+ children?: ReactNode | ((ColorThumbRenderProps & {
+ defaultChildren: ReactNode | undefined
+})) => ReactNode
+ className?: string | ((ColorThumbRenderProps & {
+ defaultClassName: string | undefined
+})) => string
onHoverChange?: (boolean) => void
onHoverEnd?: (HoverEvent) => void
onHoverStart?: (HoverEvent) => void
- style?: StyleOrFunction<ColorThumbRenderProps>
+ style?: CSSProperties | ((ColorThumbRenderProps & {
+ defaultStyle: CSSProperties
+})) => CSSProperties | undefined
}/react-aria-components:ColorPickerProps ColorPickerProps {
- children?: ChildrenOrFunction<T>
+ children?: ReactNode | ((T & {
+ defaultChildren: ReactNode | undefined
+})) => ReactNode
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>
+ children?: ReactNode | ((ColorWheelRenderProps & {
+ defaultChildren: ReactNode | undefined
+})) => ReactNode
+ className?: string | ((ColorWheelRenderProps & {
+ defaultClassName: string | undefined
+})) => string
defaultValue?: string | Color = 'hsl(0, 100%, 50%)'
id?: string
innerRadius: number
isDisabled?: boolean
name?: string
onChange?: (Color) => void
onChangeEnd?: (Color) => void
outerRadius: number
slot?: string | null
- style?: StyleOrFunction<ColorWheelRenderProps>
+ style?: CSSProperties | ((ColorWheelRenderProps & {
+ defaultStyle: CSSProperties
+})) => CSSProperties | undefined
value?: T
}/react-aria-components:ColorWheelTrackProps ColorWheelTrackProps {
- className?: ClassNameOrFunction<ColorWheelTrackRenderProps>
- style?: StyleOrFunction<ColorWheelTrackRenderProps>
+ className?: string | ((ColorWheelTrackRenderProps & {
+ defaultClassName: string | undefined
+})) => string
+ style?: CSSProperties | ((ColorWheelTrackRenderProps & {
+ defaultStyle: CSSProperties
+})) => CSSProperties | undefined
}/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>
+ children?: ReactNode | ((ComboBoxRenderProps & {
+ defaultChildren: ReactNode | undefined
+})) => ReactNode
+ className?: string | ((ComboBoxRenderProps & {
+ defaultClassName: string | undefined
+})) => string
defaultFilter?: (string, string) => boolean
defaultInputValue?: string
defaultItems?: Iterable<T>
defaultSelectedKey?: Key
disabledKeys?: Iterable<Key>
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>
+ style?: CSSProperties | ((ComboBoxRenderProps & {
+ defaultStyle: CSSProperties
+})) => CSSProperties | undefined
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
autoFocus?: boolean
- children?: ChildrenOrFunction<DateFieldRenderProps>
- className?: ClassNameOrFunction<DateFieldRenderProps>
+ children?: ReactNode | ((DateFieldRenderProps & {
+ defaultChildren: ReactNode | undefined
+})) => ReactNode
+ className?: string | ((DateFieldRenderProps & {
+ defaultClassName: string | undefined
+})) => string
defaultValue?: DateValue | null
granularity?: Granularity
hideTimeZone?: boolean = false
hourCycle?: number | number
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>
+ style?: CSSProperties | ((DateFieldRenderProps & {
+ defaultStyle: CSSProperties
+})) => CSSProperties | undefined
validate?: (MappedDateValue<DateValue>) => ValidationError | boolean | null | undefined
validationBehavior?: 'native' | 'aria' = 'native'
value?: DateValue | null
}/react-aria-components:DateInputProps DateInputProps {
children: (DateSegment) => ReactElement
- className?: ClassNameOrFunction<DateInputRenderProps>
+ className?: string | ((DateInputRenderProps & {
+ defaultClassName: string | undefined
+})) => string
slot?: string | null
- style?: StyleOrFunction<DateInputRenderProps>
+ style?: CSSProperties | ((DateInputRenderProps & {
+ defaultStyle: CSSProperties
+})) => CSSProperties | undefined
}/react-aria-components:DateSegmentProps DateSegmentProps {
- children?: ChildrenOrFunction<DateSegmentRenderProps>
- className?: ClassNameOrFunction<DateSegmentRenderProps>
+ children?: ReactNode | ((DateSegmentRenderProps & {
+ defaultChildren: ReactNode | undefined
+})) => ReactNode
+ className?: string | ((DateSegmentRenderProps & {
+ defaultClassName: string | undefined
+})) => string
onHoverChange?: (boolean) => void
onHoverEnd?: (HoverEvent) => void
onHoverStart?: (HoverEvent) => void
segment: DateSegment
- style?: StyleOrFunction<DateSegmentRenderProps>
+ style?: CSSProperties | ((DateSegmentRenderProps & {
+ defaultStyle: CSSProperties
+})) => CSSProperties | undefined
}/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>
+ children?: ReactNode | ((DateFieldRenderProps & {
+ defaultChildren: ReactNode | undefined
+})) => ReactNode
+ className?: string | ((DateFieldRenderProps & {
+ defaultClassName: string | undefined
+})) => string
defaultValue?: TimeValue | null
granularity?: 'hour' | 'minute' | 'second' = 'minute'
hideTimeZone?: boolean
hourCycle?: number | number
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>
+ style?: CSSProperties | ((DateFieldRenderProps & {
+ defaultStyle: CSSProperties
+})) => CSSProperties | undefined
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
autoFocus?: boolean
- children?: ChildrenOrFunction<DatePickerRenderProps>
- className?: ClassNameOrFunction<DatePickerRenderProps>
+ children?: ReactNode | ((DatePickerRenderProps & {
+ defaultChildren: ReactNode | undefined
+})) => ReactNode
+ className?: string | ((DatePickerRenderProps & {
+ defaultClassName: string | undefined
+})) => string
defaultOpen?: boolean
defaultValue?: DateValue | null
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
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>
+ style?: CSSProperties | ((DatePickerRenderProps & {
+ defaultStyle: CSSProperties
+})) => CSSProperties | undefined
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>
+ children?: ReactNode | ((DateRangePickerRenderProps & {
+ defaultChildren: ReactNode | undefined
+})) => ReactNode
+ className?: string | ((DateRangePickerRenderProps & {
+ defaultClassName: string | undefined
+})) => string
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>
+ style?: CSSProperties | ((DateRangePickerRenderProps & {
+ defaultStyle: CSSProperties
+})) => CSSProperties | undefined
validate?: (RangeValue<MappedDateValue<DateValue>>) => ValidationError | boolean | null | undefined
validationBehavior?: 'native' | 'aria' = 'native'
value?: RangeValue<DateValue> | null
}/react-aria-components:DisclosureProps DisclosureProps {
- children?: ChildrenOrFunction<DisclosureRenderProps>
- className?: ClassNameOrFunction<DisclosureRenderProps>
+ children?: ReactNode | ((DisclosureRenderProps & {
+ defaultChildren: ReactNode | undefined
+})) => ReactNode
+ className?: string | ((DisclosureRenderProps & {
+ defaultClassName: string | undefined
+})) => string
defaultExpanded?: boolean
id?: Key
isDisabled?: boolean
isExpanded?: boolean
onExpandedChange?: (boolean) => void
slot?: string | null
- style?: StyleOrFunction<DisclosureRenderProps>
+ style?: CSSProperties | ((DisclosureRenderProps & {
+ defaultStyle: CSSProperties
+})) => CSSProperties | undefined
}/react-aria-components:DisclosurePanelProps DisclosurePanelProps {
children: ReactNode
- className?: ClassNameOrFunction<DisclosurePanelRenderProps>
+ className?: string | ((DisclosurePanelRenderProps & {
+ defaultClassName: string | undefined
+})) => string
id?: string
role?: 'group' | 'region' = 'group'
- style?: StyleOrFunction<DisclosurePanelRenderProps>
+ style?: CSSProperties | ((DisclosurePanelRenderProps & {
+ defaultStyle: CSSProperties
+})) => CSSProperties | undefined
}/react-aria-components:DisclosureGroupProps DisclosureGroupProps {
allowsMultipleExpanded?: boolean
- children?: ChildrenOrFunction<DisclosureGroupRenderProps>
- className?: ClassNameOrFunction<DisclosureGroupRenderProps>
+ children?: ReactNode | ((DisclosureGroupRenderProps & {
+ defaultChildren: ReactNode | undefined
+})) => ReactNode
+ className?: string | ((DisclosureGroupRenderProps & {
+ defaultClassName: string | undefined
+})) => string
defaultExpandedKeys?: Iterable<Key>
expandedKeys?: Iterable<Key>
id?: string
isDisabled?: boolean
onExpandedChange?: (Set<Key>) => any
- style?: StyleOrFunction<DisclosureGroupRenderProps>
+ style?: CSSProperties | ((DisclosureGroupRenderProps & {
+ defaultStyle: CSSProperties
+})) => CSSProperties | undefined
}/react-aria-components:DropZoneProps DropZoneProps {
aria-describedby?: string
aria-details?: string
aria-label?: string
aria-labelledby?: string
- children?: ChildrenOrFunction<DropZoneRenderProps>
- className?: ClassNameOrFunction<DropZoneRenderProps>
+ children?: ReactNode | ((DropZoneRenderProps & {
+ defaultChildren: ReactNode | undefined
+})) => ReactNode
+ className?: string | ((DropZoneRenderProps & {
+ defaultClassName: string | undefined
+})) => string
getDropOperation?: (DragTypes, Array<DropOperation>) => DropOperation
isDisabled?: boolean
onDrop?: (DropEvent) => void
onDropActivate?: (DropActivateEvent) => void
onDropEnter?: (DropEnterEvent) => void
onDropExit?: (DropExitEvent) => void
onDropMove?: (DropMoveEvent) => void
onHoverChange?: (boolean) => void
onHoverEnd?: (HoverEvent) => void
onHoverStart?: (HoverEvent) => void
slot?: string | null
- style?: StyleOrFunction<DropZoneRenderProps>
+ style?: CSSProperties | ((DropZoneRenderProps & {
+ defaultStyle: CSSProperties
+})) => CSSProperties | undefined
}/react-aria-components:FieldErrorProps FieldErrorProps {
- children?: ChildrenOrFunction<FieldErrorRenderProps>
- className?: ClassNameOrFunction<FieldErrorRenderProps>
+ children?: ReactNode | ((FieldErrorRenderProps & {
+ defaultChildren: ReactNode | undefined
+})) => ReactNode
+ className?: string | ((FieldErrorRenderProps & {
+ defaultClassName: string | undefined
+})) => string
id?: string
- style?: StyleOrFunction<FieldErrorRenderProps>
+ style?: CSSProperties | ((FieldErrorRenderProps & {
+ defaultStyle: CSSProperties
+})) => CSSProperties | undefined
}/react-aria-components:GridListProps GridListProps <T> {
aria-describedby?: string
aria-details?: string
aria-label?: string
aria-labelledby?: string
autoFocus?: boolean | FocusStrategy
children?: ReactNode | (T) => ReactNode
- className?: ClassNameOrFunction<GridListRenderProps>
+ className?: string | ((GridListRenderProps & {
+ defaultClassName: string | undefined
+})) => string
defaultSelectedKeys?: 'all' | Iterable<Key>
dependencies?: ReadonlyArray<any>
- disabledBehavior?: DisabledBehavior = "all"
+ disabledBehavior?: DisabledBehavior
disabledKeys?: Iterable<Key>
disallowEmptySelection?: boolean
disallowTypeAhead?: boolean = false
dragAndDropHooks?: DragAndDropHooks
escapeKeyBehavior?: 'clearSelection' | 'none' = 'clearSelection'
id?: string
items?: Iterable<T>
keyboardNavigationBehavior?: 'arrow' | 'tab' = 'arrow'
layout?: 'stack' | 'grid' = 'stack'
onAction?: (Key) => void
onScroll?: (UIEvent<Element>) => void
onSelectionChange?: (Selection) => void
renderEmptyState?: (GridListRenderProps) => ReactNode
selectedKeys?: 'all' | Iterable<Key>
- selectionBehavior?: SelectionBehavior = "toggle"
+ selectionBehavior?: SelectionBehavior
selectionMode?: SelectionMode
shouldSelectOnPressUp?: boolean
slot?: string | null
- style?: StyleOrFunction<GridListRenderProps>
+ style?: CSSProperties | ((GridListRenderProps & {
+ defaultStyle: CSSProperties
+})) => CSSProperties | undefined
}/react-aria-components:GridListItemProps GridListItemProps <T = {}> {
- children?: ChildrenOrFunction<GridListItemRenderProps>
- className?: ClassNameOrFunction<GridListItemRenderProps>
+ children?: ReactNode | ((GridListItemRenderProps & {
+ defaultChildren: ReactNode | undefined
+})) => ReactNode
+ className?: string | ((GridListItemRenderProps & {
+ defaultClassName: string | undefined
+})) => string
download?: boolean | string
href?: Href
hrefLang?: string
id?: Key
isDisabled?: boolean
onAction?: () => void
onHoverChange?: (boolean) => void
onHoverEnd?: (HoverEvent) => void
onHoverStart?: (HoverEvent) => void
ping?: string
referrerPolicy?: HTMLAttributeReferrerPolicy
rel?: string
routerOptions?: RouterOptions
- style?: StyleOrFunction<GridListItemRenderProps>
+ style?: CSSProperties | ((GridListItemRenderProps & {
+ defaultStyle: CSSProperties
+})) => CSSProperties | undefined
target?: HTMLAttributeAnchorTarget
textValue?: string
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>
+ children?: ReactNode | ((GroupRenderProps & {
+ defaultChildren: ReactNode | undefined
+})) => ReactNode
+ className?: string | ((GroupRenderProps & {
+ defaultClassName: string | undefined
+})) => string
id?: string
isDisabled?: boolean
isInvalid?: boolean
onHoverChange?: (boolean) => void
onHoverEnd?: (HoverEvent) => void
onHoverStart?: (HoverEvent) => void
role?: 'group' | 'region' | 'presentation' = 'group'
slot?: string | null
- style?: StyleOrFunction<GroupRenderProps>
+ style?: CSSProperties | ((GroupRenderProps & {
+ defaultStyle: CSSProperties
+})) => CSSProperties | undefined
}/react-aria-components:InputProps InputProps {
- className?: ClassNameOrFunction<InputRenderProps>
+ className?: string | ((InputRenderProps & {
+ defaultClassName: string | undefined
+})) => string
onHoverChange?: (boolean) => void
onHoverEnd?: (HoverEvent) => void
onHoverStart?: (HoverEvent) => void
- style?: StyleOrFunction<InputRenderProps>
+ style?: CSSProperties | ((InputRenderProps & {
+ defaultStyle: CSSProperties
+})) => CSSProperties | undefined
}/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>
+ children?: ReactNode | ((LinkRenderProps & {
+ defaultChildren: ReactNode | undefined
+})) => ReactNode
+ className?: string | ((LinkRenderProps & {
+ defaultClassName: string | undefined
+})) => string
download?: boolean | string
href?: Href
hrefLang?: string
isDisabled?: boolean
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
ping?: string
referrerPolicy?: HTMLAttributeReferrerPolicy
rel?: string
routerOptions?: RouterOptions
slot?: string | null
- style?: StyleOrFunction<LinkRenderProps>
+ style?: CSSProperties | ((LinkRenderProps & {
+ defaultStyle: CSSProperties
+})) => CSSProperties | undefined
target?: HTMLAttributeAnchorTarget
}/react-aria-components:ListBoxProps ListBoxProps <T> {
aria-describedby?: string
aria-details?: string
aria-label?: string
aria-labelledby?: string
autoFocus?: boolean | FocusStrategy
children?: ReactNode | (T) => ReactNode
- className?: ClassNameOrFunction<ListBoxRenderProps>
+ className?: string | ((ListBoxRenderProps & {
+ defaultClassName: string | undefined
+})) => string
defaultSelectedKeys?: 'all' | Iterable<Key>
dependencies?: ReadonlyArray<any>
disabledKeys?: Iterable<Key>
disallowEmptySelection?: boolean
dragAndDropHooks?: DragAndDropHooks
escapeKeyBehavior?: 'clearSelection' | 'none' = 'clearSelection'
id?: string
items?: Iterable<T>
layout?: 'stack' | 'grid' = 'stack'
onAction?: (Key) => void
onBlur?: (FocusEvent<Target>) => void
onFocus?: (FocusEvent<Target>) => void
onFocusChange?: (boolean) => void
onScroll?: (UIEvent<Element>) => void
onSelectionChange?: (Selection) => void
orientation?: Orientation = 'vertical'
renderEmptyState?: (ListBoxRenderProps) => ReactNode
selectedKeys?: 'all' | Iterable<Key>
- selectionBehavior?: SelectionBehavior = "toggle"
+ selectionBehavior?: SelectionBehavior
selectionMode?: SelectionMode
shouldFocusOnHover?: boolean
shouldFocusWrap?: boolean
shouldSelectOnPressUp?: boolean
slot?: string | null
- style?: StyleOrFunction<ListBoxRenderProps>
+ style?: CSSProperties | ((ListBoxRenderProps & {
+ defaultStyle: CSSProperties
+})) => CSSProperties | undefined
}/react-aria-components:ListBoxItemProps ListBoxItemProps <T = {}> {
aria-label?: string
- children?: ChildrenOrFunction<ListBoxItemRenderProps>
- className?: ClassNameOrFunction<ListBoxItemRenderProps>
+ children?: ReactNode | ((ListBoxItemRenderProps & {
+ defaultChildren: ReactNode | undefined
+})) => ReactNode
+ className?: string | ((ListBoxItemRenderProps & {
+ defaultClassName: string | undefined
+})) => string
download?: boolean | string
href?: Href
hrefLang?: string
id?: Key
isDisabled?: boolean
onAction?: () => void
onHoverChange?: (boolean) => void
onHoverEnd?: (HoverEvent) => void
onHoverStart?: (HoverEvent) => void
ping?: string
referrerPolicy?: HTMLAttributeReferrerPolicy
rel?: string
routerOptions?: RouterOptions
- style?: StyleOrFunction<ListBoxItemRenderProps>
+ style?: CSSProperties | ((ListBoxItemRenderProps & {
+ defaultStyle: CSSProperties
+})) => CSSProperties | undefined
target?: HTMLAttributeAnchorTarget
textValue?: string
value?: T
}/react-aria-components:MenuProps MenuProps <T> {
aria-describedby?: string
aria-details?: string
aria-label?: string
aria-labelledby?: string
autoFocus?: boolean | FocusStrategy
children?: ReactNode | (T) => ReactNode
- className?: ClassNameOrFunction<MenuRenderProps>
+ className?: string | ((MenuRenderProps & {
+ defaultClassName: string | undefined
+})) => string
defaultSelectedKeys?: 'all' | Iterable<Key>
dependencies?: ReadonlyArray<any>
disabledKeys?: Iterable<Key>
disallowEmptySelection?: boolean
escapeKeyBehavior?: 'clearSelection' | 'none' = 'clearSelection'
id?: string
items?: Iterable<T>
onAction?: (Key) => void
onClose?: () => void
onScroll?: (UIEvent<Element>) => void
onSelectionChange?: (Selection) => void
renderEmptyState?: () => ReactNode
selectedKeys?: 'all' | Iterable<Key>
selectionMode?: SelectionMode
shouldFocusWrap?: boolean
slot?: string | null
- style?: StyleOrFunction<MenuRenderProps>
+ style?: CSSProperties | ((MenuRenderProps & {
+ defaultStyle: CSSProperties
+})) => CSSProperties | undefined
}/react-aria-components:MenuItemProps MenuItemProps <T = {}> {
aria-label?: string
- children?: ChildrenOrFunction<MenuItemRenderProps>
- className?: ClassNameOrFunction<MenuItemRenderProps>
+ children?: ReactNode | ((MenuItemRenderProps & {
+ defaultChildren: ReactNode | undefined
+})) => ReactNode
+ className?: string | ((MenuItemRenderProps & {
+ defaultClassName: string | undefined
+})) => string
download?: boolean | string
href?: Href
hrefLang?: string
id?: Key
isDisabled?: boolean
onAction?: () => void
onHoverChange?: (boolean) => void
onHoverEnd?: (HoverEvent) => void
onHoverStart?: (HoverEvent) => void
ping?: string
referrerPolicy?: HTMLAttributeReferrerPolicy
rel?: string
routerOptions?: RouterOptions
- style?: StyleOrFunction<MenuItemRenderProps>
+ style?: CSSProperties | ((MenuItemRenderProps & {
+ defaultStyle: CSSProperties
+})) => CSSProperties | undefined
target?: HTMLAttributeAnchorTarget
textValue?: string
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>
+ children?: ReactNode | ((MeterRenderProps & {
+ defaultChildren: ReactNode | undefined
+})) => ReactNode
+ className?: string | ((MeterRenderProps & {
+ defaultClassName: string | undefined
+})) => string
formatOptions?: Intl.NumberFormatOptions = {style: 'percent'}
id?: string
maxValue?: number = 100
minValue?: number = 0
slot?: string | null
- style?: StyleOrFunction<MeterRenderProps>
+ style?: CSSProperties | ((MeterRenderProps & {
+ defaultStyle: CSSProperties
+})) => CSSProperties | undefined
value?: number = 0
valueLabel?: ReactNode
}/react-aria-components:ModalOverlayProps ModalOverlayProps {
- children?: ChildrenOrFunction<ModalRenderProps>
- className?: ClassNameOrFunction<ModalRenderProps>
+ children?: ReactNode | ((ModalRenderProps & {
+ defaultChildren: ReactNode | undefined
+})) => ReactNode
+ className?: string | ((ModalRenderProps & {
+ defaultClassName: string | undefined
+})) => string
defaultOpen?: boolean
isDismissable?: boolean = false
isEntering?: boolean
isExiting?: boolean
isKeyboardDismissDisabled?: boolean = false
isOpen?: boolean
onOpenChange?: (boolean) => void
shouldCloseOnInteractOutside?: (Element) => boolean
slot?: string | null
- style?: StyleOrFunction<ModalRenderProps>
+ style?: CSSProperties | ((ModalRenderProps & {
+ defaultStyle: CSSProperties
+})) => CSSProperties | undefined
}/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>
+ children?: ReactNode | ((NumberFieldRenderProps & {
+ defaultChildren: ReactNode | undefined
+})) => ReactNode
+ className?: string | ((NumberFieldRenderProps & {
+ defaultClassName: string | undefined
+})) => string
decrementAriaLabel?: string
defaultValue?: number
formatOptions?: Intl.NumberFormatOptions
id?: string
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>
+ style?: CSSProperties | ((NumberFieldRenderProps & {
+ defaultStyle: CSSProperties
+})) => CSSProperties | undefined
validate?: (number) => ValidationError | boolean | null | undefined
validationBehavior?: 'native' | 'aria' = 'native'
value?: number
}/react-aria-components:OverlayArrowProps OverlayArrowProps {
- children?: ChildrenOrFunction<OverlayArrowRenderProps>
- className?: ClassNameOrFunction<OverlayArrowRenderProps>
+ children?: ReactNode | ((OverlayArrowRenderProps & {
+ defaultChildren: ReactNode | undefined
+})) => ReactNode
+ className?: string | ((OverlayArrowRenderProps & {
+ defaultClassName: string | undefined
+})) => string
id?: string
- style?: StyleOrFunction<OverlayArrowRenderProps>
+ style?: CSSProperties | ((OverlayArrowRenderProps & {
+ defaultStyle: CSSProperties
+})) => CSSProperties | undefined
}/react-aria-components:PopoverProps PopoverProps {
aria-describedby?: string
aria-details?: string
aria-label?: string
aria-labelledby?: string
arrowBoundaryOffset?: number = 0
boundaryElement?: Element = document.body
- children?: ChildrenOrFunction<PopoverRenderProps>
- className?: ClassNameOrFunction<PopoverRenderProps>
+ children?: ReactNode | ((PopoverRenderProps & {
+ defaultChildren: ReactNode | undefined
+})) => ReactNode
+ className?: string | ((PopoverRenderProps & {
+ defaultClassName: string | undefined
+})) => string
containerPadding?: number = 12
crossOffset?: number = 0
defaultOpen?: boolean
isEntering?: boolean
isExiting?: 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>
+ style?: CSSProperties | ((PopoverRenderProps & {
+ defaultStyle: CSSProperties
+})) => CSSProperties | undefined
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>
+ children?: ReactNode | ((ProgressBarRenderProps & {
+ defaultChildren: ReactNode | undefined
+})) => ReactNode
+ className?: string | ((ProgressBarRenderProps & {
+ defaultClassName: string | undefined
+})) => string
formatOptions?: Intl.NumberFormatOptions = {style: 'percent'}
id?: string
isIndeterminate?: boolean
maxValue?: number = 100
minValue?: number = 0
slot?: string | null
- style?: StyleOrFunction<ProgressBarRenderProps>
+ style?: CSSProperties | ((ProgressBarRenderProps & {
+ defaultStyle: CSSProperties
+})) => CSSProperties | undefined
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>
+ children?: ReactNode | ((RadioGroupRenderProps & {
+ defaultChildren: ReactNode | undefined
+})) => ReactNode
+ className?: string | ((RadioGroupRenderProps & {
+ defaultClassName: string | undefined
+})) => string
defaultValue?: string | null
id?: string
isDisabled?: boolean
isInvalid?: 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>
+ style?: CSSProperties | ((RadioGroupRenderProps & {
+ defaultStyle: CSSProperties
+})) => CSSProperties | undefined
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>
+ children?: ReactNode | ((RadioRenderProps & {
+ defaultChildren: ReactNode | undefined
+})) => ReactNode
+ className?: string | ((RadioRenderProps & {
+ defaultClassName: string | undefined
+})) => string
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
slot?: string | null
- style?: StyleOrFunction<RadioRenderProps>
+ style?: CSSProperties | ((RadioRenderProps & {
+ defaultStyle: CSSProperties
+})) => CSSProperties | undefined
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>
+ children?: ReactNode | ((SearchFieldRenderProps & {
+ defaultChildren: ReactNode | undefined
+})) => ReactNode
+ className?: string | ((SearchFieldRenderProps & {
+ defaultClassName: string | undefined
+})) => string
defaultValue?: string
enterKeyHint?: 'enter' | 'done' | 'go' | 'next' | 'previous' | 'search' | 'send'
excludeFromTabOrder?: boolean
id?: 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>
+ style?: CSSProperties | ((SearchFieldRenderProps & {
+ defaultStyle: CSSProperties
+})) => CSSProperties | undefined
type?: 'text' | 'search' | 'url' | 'tel' | 'email' | 'password' | (string & {
})
validate?: (string) => ValidationError | boolean | null | undefined
value?: string
}/react-aria-components:SelectProps SelectProps <T extends {} = {
}> {
aria-describedby?: string
aria-details?: string
aria-label?: string
aria-labelledby?: string
autoComplete?: string
autoFocus?: boolean
- children?: ChildrenOrFunction<SelectRenderProps>
- className?: ClassNameOrFunction<SelectRenderProps>
+ children?: ReactNode | ((SelectRenderProps & {
+ defaultChildren: ReactNode | undefined
+})) => ReactNode
+ className?: string | ((SelectRenderProps & {
+ defaultClassName: string | undefined
+})) => string
defaultOpen?: boolean
defaultSelectedKey?: Key
disabledKeys?: Iterable<Key>
excludeFromTabOrder?: boolean
id?: string
isDisabled?: boolean
isInvalid?: boolean
isOpen?: boolean
isRequired?: boolean
name?: string
onBlur?: (FocusEvent<Target>) => void
onFocus?: (FocusEvent<Target>) => void
onFocusChange?: (boolean) => void
onKeyDown?: (KeyboardEvent) => void
onKeyUp?: (KeyboardEvent) => void
onOpenChange?: (boolean) => void
onSelectionChange?: (Key | null) => void
placeholder?: string = 'Select an item' (localized)
selectedKey?: Key | null
slot?: string | null
- style?: StyleOrFunction<SelectRenderProps>
+ style?: CSSProperties | ((SelectRenderProps & {
+ defaultStyle: CSSProperties
+})) => CSSProperties | undefined
validate?: (Key) => ValidationError | boolean | null | undefined
validationBehavior?: 'native' | 'aria' = 'native'
}/react-aria-components:SelectValueProps SelectValueProps <T extends {}> {
- children?: ChildrenOrFunction<SelectValueRenderProps<{}>>
- className?: ClassNameOrFunction<SelectValueRenderProps<{}>>
- style?: StyleOrFunction<SelectValueRenderProps<{}>>
+ children?: ReactNode | ((SelectValueRenderProps<{}> & {
+ defaultChildren: ReactNode | undefined
+})) => ReactNode
+ className?: string | ((SelectValueRenderProps<{}> & {
+ defaultClassName: string | undefined
+})) => string
+ style?: CSSProperties | ((SelectValueRenderProps<{}> & {
+ defaultStyle: CSSProperties
+})) => CSSProperties | undefined
}/react-aria-components:SliderOutputProps SliderOutputProps {
- children?: ChildrenOrFunction<SliderRenderProps>
- className?: ClassNameOrFunction<SliderRenderProps>
- style?: StyleOrFunction<SliderRenderProps>
+ children?: ReactNode | ((SliderRenderProps & {
+ defaultChildren: ReactNode | undefined
+})) => ReactNode
+ className?: string | ((SliderRenderProps & {
+ defaultClassName: string | undefined
+})) => string
+ style?: CSSProperties | ((SliderRenderProps & {
+ defaultStyle: CSSProperties
+})) => CSSProperties | undefined
}/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>
+ children?: ReactNode | ((SliderRenderProps & {
+ defaultChildren: ReactNode | undefined
+})) => ReactNode
+ className?: string | ((SliderRenderProps & {
+ defaultClassName: string | undefined
+})) => string
defaultValue?: T
formatOptions?: Intl.NumberFormatOptions
id?: string
isDisabled?: boolean
maxValue?: number = 100
minValue?: number = 0
onChange?: (T) => void
onChangeEnd?: (T) => void
orientation?: Orientation = 'horizontal'
slot?: string | null
step?: number = 1
- style?: StyleOrFunction<SliderRenderProps>
+ style?: CSSProperties | ((SliderRenderProps & {
+ defaultStyle: CSSProperties
+})) => CSSProperties | undefined
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>
+ children?: ReactNode | ((SliderThumbRenderProps & {
+ defaultChildren: ReactNode | undefined
+})) => ReactNode
+ className?: string | ((SliderThumbRenderProps & {
+ defaultClassName: string | undefined
+})) => string
id?: string
index?: number = 0
inputRef?: RefObject<HTMLInputElement | null>
isDisabled?: boolean
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>
+ style?: CSSProperties | ((SliderThumbRenderProps & {
+ defaultStyle: CSSProperties
+})) => CSSProperties | undefined
}/react-aria-components:SliderTrackProps SliderTrackProps {
- children?: ChildrenOrFunction<SliderTrackRenderProps>
- className?: ClassNameOrFunction<SliderTrackRenderProps>
+ children?: ReactNode | ((SliderTrackRenderProps & {
+ defaultChildren: ReactNode | undefined
+})) => ReactNode
+ className?: string | ((SliderTrackRenderProps & {
+ defaultClassName: string | undefined
+})) => string
onHoverChange?: (boolean) => void
onHoverEnd?: (HoverEvent) => void
onHoverStart?: (HoverEvent) => void
- style?: StyleOrFunction<SliderTrackRenderProps>
+ style?: CSSProperties | ((SliderTrackRenderProps & {
+ defaultStyle: CSSProperties
+})) => CSSProperties | undefined
}/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>
+ children?: ReactNode | ((SwitchRenderProps & {
+ defaultChildren: ReactNode | undefined
+})) => ReactNode
+ className?: string | ((SwitchRenderProps & {
+ defaultClassName: string | undefined
+})) => string
defaultSelected?: boolean
excludeFromTabOrder?: boolean
id?: string
inputRef?: RefObject<HTMLInputElement | null>
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>
+ style?: CSSProperties | ((SwitchRenderProps & {
+ defaultStyle: CSSProperties
+})) => CSSProperties | undefined
value?: string
}/react-aria-components:TableProps TableProps {
aria-describedby?: string
aria-details?: string
aria-label?: string
aria-labelledby?: string
children?: ReactNode
- className?: ClassNameOrFunction<TableRenderProps>
+ className?: string | ((TableRenderProps & {
+ defaultClassName: string | undefined
+})) => string
defaultSelectedKeys?: 'all' | Iterable<Key>
disabledBehavior?: DisabledBehavior = "selection"
disabledKeys?: Iterable<Key>
disallowEmptySelection?: boolean
dragAndDropHooks?: DragAndDropHooks
escapeKeyBehavior?: 'clearSelection' | 'none' = 'clearSelection'
onRowAction?: (Key) => void
onScroll?: (UIEvent<Element>) => void
onSelectionChange?: (Selection) => void
onSortChange?: (SortDescriptor) => any
selectedKeys?: 'all' | Iterable<Key>
selectionBehavior?: SelectionBehavior = "toggle"
selectionMode?: SelectionMode
shouldSelectOnPressUp?: boolean
slot?: string | null
sortDescriptor?: SortDescriptor
- style?: StyleOrFunction<TableRenderProps>
+ style?: CSSProperties | ((TableRenderProps & {
+ defaultStyle: CSSProperties
+})) => CSSProperties | undefined
}/react-aria-components:TableHeaderProps TableHeaderProps <T> {
children?: ReactNode | (T) => ReactElement
- className?: ClassNameOrFunction<TableHeaderRenderProps>
+ className?: string | ((TableHeaderRenderProps & {
+ defaultClassName: string | undefined
+})) => string
columns?: Iterable<T>
dependencies?: ReadonlyArray<any>
onHoverChange?: (boolean) => void
onHoverEnd?: (HoverEvent) => void
onHoverStart?: (HoverEvent) => void
- style?: StyleOrFunction<TableHeaderRenderProps>
+ style?: CSSProperties | ((TableHeaderRenderProps & {
+ defaultStyle: CSSProperties
+})) => CSSProperties | undefined
}/react-aria-components:TableBodyProps TableBodyProps <T> {
children?: ReactNode | (T) => ReactNode
- className?: ClassNameOrFunction<TableBodyRenderProps>
+ className?: string | ((TableBodyRenderProps & {
+ defaultClassName: string | undefined
+})) => string
dependencies?: ReadonlyArray<any>
items?: Iterable<T>
renderEmptyState?: (TableBodyRenderProps) => ReactNode
- style?: StyleOrFunction<TableBodyRenderProps>
+ style?: CSSProperties | ((TableBodyRenderProps & {
+ defaultStyle: CSSProperties
+})) => CSSProperties | undefined
}/react-aria-components:ColumnProps ColumnProps {
allowsSorting?: boolean
- children?: ChildrenOrFunction<ColumnRenderProps>
- className?: ClassNameOrFunction<ColumnRenderProps>
+ children?: ReactNode | ((ColumnRenderProps & {
+ defaultChildren: ReactNode | undefined
+})) => ReactNode
+ className?: string | ((ColumnRenderProps & {
+ defaultClassName: string | undefined
+})) => string
defaultWidth?: ColumnSize | null
id?: Key
isRowHeader?: boolean
maxWidth?: ColumnStaticSize | null
minWidth?: ColumnStaticSize | null
- style?: StyleOrFunction<ColumnRenderProps>
+ style?: CSSProperties | ((ColumnRenderProps & {
+ defaultStyle: CSSProperties
+})) => CSSProperties | undefined
textValue?: string
width?: ColumnSize | null
}/react-aria-components:ColumnResizerProps ColumnResizerProps {
aria-label?: string
- children?: ChildrenOrFunction<ColumnResizerRenderProps>
- className?: ClassNameOrFunction<ColumnResizerRenderProps>
+ children?: ReactNode | ((ColumnResizerRenderProps & {
+ defaultChildren: ReactNode | undefined
+})) => ReactNode
+ className?: string | ((ColumnResizerRenderProps & {
+ defaultClassName: string | undefined
+})) => string
onHoverChange?: (boolean) => void
onHoverEnd?: (HoverEvent) => void
onHoverStart?: (HoverEvent) => void
- style?: StyleOrFunction<ColumnResizerRenderProps>
+ style?: CSSProperties | ((ColumnResizerRenderProps & {
+ defaultStyle: CSSProperties
+})) => CSSProperties | undefined
}/react-aria-components:RowProps RowProps <T> {
children?: ReactNode | (T) => ReactElement
- className?: ClassNameOrFunction<RowRenderProps>
+ className?: string | ((RowRenderProps & {
+ defaultClassName: string | undefined
+})) => string
columns?: Iterable<T>
dependencies?: ReadonlyArray<any>
download?: boolean | string
href?: Href
hrefLang?: string
id?: Key
isDisabled?: boolean
onAction?: () => void
onHoverChange?: (boolean) => void
onHoverEnd?: (HoverEvent) => void
onHoverStart?: (HoverEvent) => void
ping?: string
referrerPolicy?: HTMLAttributeReferrerPolicy
rel?: string
routerOptions?: RouterOptions
- style?: StyleOrFunction<RowRenderProps>
+ style?: CSSProperties | ((RowRenderProps & {
+ defaultStyle: CSSProperties
+})) => CSSProperties | undefined
target?: HTMLAttributeAnchorTarget
textValue?: string
value?: T
}/react-aria-components:CellProps CellProps {
- children?: ChildrenOrFunction<CellRenderProps>
- className?: ClassNameOrFunction<CellRenderProps>
+ children?: ReactNode | ((CellRenderProps & {
+ defaultChildren: ReactNode | undefined
+})) => ReactNode
+ className?: string | ((CellRenderProps & {
+ defaultClassName: string | undefined
+})) => string
colSpan?: number
id?: Key
- style?: StyleOrFunction<CellRenderProps>
+ style?: CSSProperties | ((CellRenderProps & {
+ defaultStyle: CSSProperties
+})) => CSSProperties | undefined
textValue?: string
}/react-aria-components:TabListProps TabListProps <T> {
aria-describedby?: string
aria-details?: string
aria-label?: string
aria-labelledby?: string
children?: ReactNode | (T) => ReactNode
- className?: ClassNameOrFunction<TabListRenderProps>
+ className?: string | ((TabListRenderProps & {
+ defaultClassName: string | undefined
+})) => string
dependencies?: ReadonlyArray<any>
items?: Iterable<T>
- style?: StyleOrFunction<TabListRenderProps>
+ style?: CSSProperties | ((TabListRenderProps & {
+ defaultStyle: CSSProperties
+})) => CSSProperties | undefined
}/react-aria-components:TabPanelProps TabPanelProps {
aria-describedby?: string
aria-details?: string
aria-label?: string
aria-labelledby?: string
- children?: ChildrenOrFunction<TabPanelRenderProps>
- className?: ClassNameOrFunction<TabPanelRenderProps>
+ children?: ReactNode | ((TabPanelRenderProps & {
+ defaultChildren: ReactNode | undefined
+})) => ReactNode
+ className?: string | ((TabPanelRenderProps & {
+ defaultClassName: string | undefined
+})) => string
id?: string
shouldForceMount?: boolean = false
- style?: StyleOrFunction<TabPanelRenderProps>
+ style?: CSSProperties | ((TabPanelRenderProps & {
+ defaultStyle: CSSProperties
+})) => CSSProperties | undefined
}/react-aria-components:TabProps TabProps {
aria-describedby?: string
aria-details?: string
aria-label?: string
aria-labelledby?: string
- children?: ChildrenOrFunction<TabRenderProps>
- className?: ClassNameOrFunction<TabRenderProps>
+ children?: ReactNode | ((TabRenderProps & {
+ defaultChildren: ReactNode | undefined
+})) => ReactNode
+ className?: string | ((TabRenderProps & {
+ defaultClassName: string | undefined
+})) => string
download?: boolean | string
href?: Href
hrefLang?: string
id?: Key
isDisabled?: boolean
onHoverChange?: (boolean) => void
onHoverEnd?: (HoverEvent) => void
onHoverStart?: (HoverEvent) => void
ping?: string
referrerPolicy?: HTMLAttributeReferrerPolicy
rel?: string
routerOptions?: RouterOptions
- style?: StyleOrFunction<TabRenderProps>
+ style?: CSSProperties | ((TabRenderProps & {
+ defaultStyle: CSSProperties
+})) => CSSProperties | undefined
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>
+ children?: ReactNode | ((TabsRenderProps & {
+ defaultChildren: ReactNode | undefined
+})) => ReactNode
+ className?: string | ((TabsRenderProps & {
+ defaultClassName: string | undefined
+})) => string
defaultSelectedKey?: Key
disabledKeys?: Iterable<Key>
id?: string
isDisabled?: boolean
keyboardActivation?: 'automatic' | 'manual' = 'automatic'
onSelectionChange?: (Key) => void
orientation?: Orientation = 'horizontal'
selectedKey?: Key | null
slot?: string | null
- style?: StyleOrFunction<TabsRenderProps>
+ style?: CSSProperties | ((TabsRenderProps & {
+ defaultStyle: CSSProperties
+})) => CSSProperties | undefined
}/react-aria-components:TagListProps TagListProps <T> {
children?: ReactNode | (T) => ReactNode
- className?: ClassNameOrFunction<TagListRenderProps>
+ className?: string | ((TagListRenderProps & {
+ defaultClassName: string | undefined
+})) => string
dependencies?: ReadonlyArray<any>
items?: Iterable<T>
renderEmptyState?: (TagListRenderProps) => ReactNode
- style?: StyleOrFunction<TagListRenderProps>
+ style?: CSSProperties | ((TagListRenderProps & {
+ defaultStyle: CSSProperties
+})) => CSSProperties | undefined
}/react-aria-components:TagProps TagProps {
- children?: ChildrenOrFunction<TagRenderProps>
- className?: ClassNameOrFunction<TagRenderProps>
+ children?: ReactNode | ((TagRenderProps & {
+ defaultChildren: ReactNode | undefined
+})) => ReactNode
+ className?: string | ((TagRenderProps & {
+ defaultClassName: string | undefined
+})) => string
download?: boolean | string
href?: Href
hrefLang?: string
id?: Key
isDisabled?: boolean
onHoverChange?: (boolean) => void
onHoverEnd?: (HoverEvent) => void
onHoverStart?: (HoverEvent) => void
ping?: string
referrerPolicy?: HTMLAttributeReferrerPolicy
rel?: string
routerOptions?: RouterOptions
- style?: StyleOrFunction<TagRenderProps>
+ style?: CSSProperties | ((TagRenderProps & {
+ defaultStyle: CSSProperties
+})) => CSSProperties | undefined
target?: HTMLAttributeAnchorTarget
textValue?: string
}/react-aria-components:TextAreaProps TextAreaProps {
- className?: ClassNameOrFunction<InputRenderProps>
+ className?: string | ((InputRenderProps & {
+ defaultClassName: string | undefined
+})) => string
onHoverChange?: (boolean) => void
onHoverEnd?: (HoverEvent) => void
onHoverStart?: (HoverEvent) => void
- style?: StyleOrFunction<InputRenderProps>
+ style?: CSSProperties | ((InputRenderProps & {
+ defaultStyle: CSSProperties
+})) => CSSProperties | undefined
}/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>
+ children?: ReactNode | ((TextFieldRenderProps & {
+ defaultChildren: ReactNode | undefined
+})) => ReactNode
+ className?: string | ((TextFieldRenderProps & {
+ defaultClassName: string | undefined
+})) => string
defaultValue?: string
enterKeyHint?: 'enter' | 'done' | 'go' | 'next' | 'previous' | 'search' | 'send'
excludeFromTabOrder?: boolean
id?: 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>
+ style?: CSSProperties | ((TextFieldRenderProps & {
+ defaultStyle: CSSProperties
+})) => CSSProperties | undefined
type?: 'text' | 'search' | 'url' | 'tel' | 'email' | 'password' | (string & {
})
validate?: (string) => ValidationError | boolean | null | undefined
value?: string
}/react-aria-components:ToastRegionProps ToastRegionProps <T> {
aria-describedby?: string
aria-details?: string
aria-label?: string = "Notifications"
aria-labelledby?: string
children: ReactNode | ({
toast: QueuedToast<T>
}) => ReactElement
- className?: ClassNameOrFunction<ToastRegionRenderProps<T>>
+ className?: string | ((ToastRegionRenderProps<T> & {
+ defaultClassName: string | undefined
+})) => string
queue: ToastQueue<T>
- style?: StyleOrFunction<ToastRegionRenderProps<T>>
+ style?: CSSProperties | ((ToastRegionRenderProps<T> & {
+ defaultStyle: CSSProperties
+})) => CSSProperties | undefined
}/react-aria-components:ToastListProps ToastListProps <T> {
aria-describedby?: string
aria-details?: string
aria-label?: string = "Notifications"
aria-labelledby?: string
children: ({
toast: QueuedToast<T>
}) => ReactElement
- className?: ClassNameOrFunction<ToastRegionRenderProps<T>>
- style?: StyleOrFunction<ToastRegionRenderProps<T>>
+ className?: string | ((ToastRegionRenderProps<T> & {
+ defaultClassName: string | undefined
+})) => string
+ style?: CSSProperties | ((ToastRegionRenderProps<T> & {
+ defaultStyle: CSSProperties
+})) => CSSProperties | undefined
}/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>>
- style?: StyleOrFunction<ToastRenderProps<T>>
+ children?: ReactNode | ((ToastRenderProps<T> & {
+ defaultChildren: ReactNode | undefined
+})) => ReactNode
+ className?: string | ((ToastRenderProps<T> & {
+ defaultClassName: string | undefined
+})) => string
+ style?: CSSProperties | ((ToastRenderProps<T> & {
+ defaultStyle: CSSProperties
+})) => CSSProperties | undefined
toast: QueuedToast<T>
}/react-aria-components:ToggleButtonProps ToggleButtonProps {
aria-controls?: string
aria-describedby?: string
aria-details?: string
aria-expanded?: boolean | 'true' | 'false'
aria-haspopup?: boolean | 'menu' | 'listbox' | 'tree' | 'grid' | 'dialog' | 'true' | 'false'
aria-label?: string
aria-labelledby?: string
aria-pressed?: boolean | 'true' | 'false' | 'mixed'
autoFocus?: boolean
- children?: ChildrenOrFunction<ToggleButtonRenderProps>
- className?: ClassNameOrFunction<ToggleButtonRenderProps>
+ children?: ReactNode | ((ToggleButtonRenderProps & {
+ defaultChildren: ReactNode | undefined
+})) => ReactNode
+ className?: string | ((ToggleButtonRenderProps & {
+ defaultClassName: string | undefined
+})) => string
defaultSelected?: boolean
excludeFromTabOrder?: boolean
id?: Key
isDisabled?: boolean
isSelected?: 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>
+ style?: CSSProperties | ((ToggleButtonRenderProps & {
+ defaultStyle: CSSProperties
+})) => CSSProperties | undefined
type?: 'button' | 'submit' | 'reset' = 'button'
}/react-aria-components:ToggleButtonGroupProps ToggleButtonGroupProps {
aria-describedby?: string
aria-details?: string
aria-label?: string
aria-labelledby?: string
- children?: ChildrenOrFunction<ToggleButtonGroupRenderProps>
- className?: ClassNameOrFunction<ToggleButtonGroupRenderProps>
+ children?: ReactNode | ((ToggleButtonGroupRenderProps & {
+ defaultChildren: ReactNode | undefined
+})) => ReactNode
+ className?: string | ((ToggleButtonGroupRenderProps & {
+ defaultClassName: string | undefined
+})) => string
defaultSelectedKeys?: Iterable<Key>
disallowEmptySelection?: boolean
isDisabled?: boolean
onSelectionChange?: (Set<Key>) => void
orientation?: Orientation = 'horizontal'
selectedKeys?: Iterable<Key>
selectionMode?: 'single' | 'multiple'
slot?: string | null
- style?: StyleOrFunction<ToggleButtonGroupRenderProps>
+ style?: CSSProperties | ((ToggleButtonGroupRenderProps & {
+ defaultStyle: CSSProperties
+})) => CSSProperties | undefined
}/react-aria-components:ToolbarProps ToolbarProps {
aria-describedby?: string
aria-details?: string
aria-label?: string
aria-labelledby?: string
- children?: ChildrenOrFunction<ToolbarRenderProps>
- className?: ClassNameOrFunction<ToolbarRenderProps>
+ children?: ReactNode | ((ToolbarRenderProps & {
+ defaultChildren: ReactNode | undefined
+})) => ReactNode
+ className?: string | ((ToolbarRenderProps & {
+ defaultClassName: string | undefined
+})) => string
orientation?: Orientation = 'horizontal'
slot?: string | null
- style?: StyleOrFunction<ToolbarRenderProps>
+ style?: CSSProperties | ((ToolbarRenderProps & {
+ defaultStyle: CSSProperties
+})) => CSSProperties | undefined
}/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>
+ children?: ReactNode | ((TooltipRenderProps & {
+ defaultChildren: ReactNode | undefined
+})) => ReactNode
+ className?: string | ((TooltipRenderProps & {
+ defaultClassName: string | undefined
+})) => string
containerPadding?: number = 12
crossOffset?: number = 0
defaultOpen?: boolean
isEntering?: boolean
isExiting?: boolean
isOpen?: boolean
offset?: number = 0
onOpenChange?: (boolean) => void
placement?: Placement = 'top'
shouldFlip?: boolean = true
- style?: StyleOrFunction<TooltipRenderProps>
+ style?: CSSProperties | ((TooltipRenderProps & {
+ defaultStyle: CSSProperties
+})) => CSSProperties | undefined
triggerRef?: RefObject<Element | null>
}/react-aria-components:TreeProps TreeProps <T> {
aria-describedby?: string
aria-details?: string
aria-label?: string
aria-labelledby?: string
autoFocus?: boolean | FocusStrategy
children?: ReactNode | (T) => ReactNode
- className?: ClassNameOrFunction<TreeRenderProps>
+ className?: string | ((TreeRenderProps & {
+ defaultClassName: string | undefined
+})) => string
defaultExpandedKeys?: Iterable<Key>
defaultSelectedKeys?: 'all' | Iterable<Key>
dependencies?: ReadonlyArray<any>
disabledBehavior?: DisabledBehavior = 'all'
disabledKeys?: Iterable<Key>
disallowEmptySelection?: boolean
dragAndDropHooks?: DragAndDropHooks
escapeKeyBehavior?: 'clearSelection' | 'none' = 'clearSelection'
expandedKeys?: Iterable<Key>
id?: string
items?: Iterable<T>
onAction?: (Key) => void
onExpandedChange?: (Set<Key>) => any
onScroll?: (UIEvent<Element>) => void
onSelectionChange?: (Selection) => void
renderEmptyState?: (TreeEmptyStateRenderProps) => ReactNode
selectedKeys?: 'all' | Iterable<Key>
- selectionBehavior?: SelectionBehavior = "toggle"
+ selectionBehavior?: SelectionBehavior
selectionMode?: SelectionMode
shouldSelectOnPressUp?: boolean
slot?: string | null
- style?: StyleOrFunction<TreeRenderProps>
+ style?: CSSProperties | ((TreeRenderProps & {
+ defaultStyle: CSSProperties
+})) => CSSProperties | undefined
}/react-aria-components:TreeItemProps TreeItemProps <T = {}> {
aria-label?: string
children: ReactNode
- className?: ClassNameOrFunction<TreeItemRenderProps>
+ className?: string | ((TreeItemRenderProps & {
+ defaultClassName: string | undefined
+})) => string
download?: boolean | string
hasChildItems?: boolean
href?: Href
hrefLang?: string
id?: Key
isDisabled?: boolean
onAction?: () => void
onHoverChange?: (boolean) => void
onHoverEnd?: (HoverEvent) => void
onHoverStart?: (HoverEvent) => void
ping?: string
referrerPolicy?: HTMLAttributeReferrerPolicy
rel?: string
routerOptions?: RouterOptions
- style?: StyleOrFunction<TreeItemRenderProps>
+ style?: CSSProperties | ((TreeItemRenderProps & {
+ defaultStyle: CSSProperties
+})) => CSSProperties | undefined
target?: HTMLAttributeAnchorTarget
textValue: string
value?: T
}/react-aria-components:TreeItemContentProps TreeItemContentProps {
- children?: ChildrenOrFunction<T>
+ children?: ReactNode | ((T & {
+ defaultChildren: ReactNode | undefined
+})) => ReactNode
}/react-aria-components:DropIndicatorProps DropIndicatorProps {
- children?: ChildrenOrFunction<DropIndicatorRenderProps>
- className?: ClassNameOrFunction<DropIndicatorRenderProps>
- style?: StyleOrFunction<DropIndicatorRenderProps>
+ children?: ReactNode | ((DropIndicatorRenderProps & {
+ defaultChildren: ReactNode | undefined
+})) => ReactNode
+ className?: string | ((DropIndicatorRenderProps & {
+ defaultClassName: string | undefined
+})) => string
+ style?: CSSProperties | ((DropIndicatorRenderProps & {
+ defaultStyle: CSSProperties
+})) => CSSProperties | undefined
target: DropTarget
}/react-aria-components:RenderProps RenderProps <T> {
- children?: ChildrenOrFunction<T>
- className?: ClassNameOrFunction<T>
- style?: StyleOrFunction<T>
+ children?: ReactNode | ((T & {
+ defaultChildren: ReactNode | undefined
+})) => ReactNode
+ className?: string | ((T & {
+ defaultClassName: string | undefined
+})) => string
+ style?: CSSProperties | ((T & {
+ defaultStyle: CSSProperties
+})) => CSSProperties | undefined
}/react-aria-components:StyleRenderProps StyleRenderProps <T> {
- className?: ClassNameOrFunction<T>
- style?: StyleOrFunction<T>
+ className?: string | ((T & {
+ defaultClassName: string | undefined
+})) => string
+ style?: CSSProperties | ((T & {
+ defaultStyle: CSSProperties
+})) => CSSProperties | undefined
}/react-aria-components:GridListLoadMoreItem+GridListLoadMoreItem <T extends {}> {
+ children?: ReactNode
+ className?: string
+ isLoading?: boolean
+ onLoadMore?: () => any
+ scrollOffset?: number = 1
+ style?: CSSProperties
+}/react-aria-components:ListBoxLoadMoreItem+ListBoxLoadMoreItem <T extends {}> {
+ children?: ReactNode
+ className?: string
+ isLoading?: boolean
+ onLoadMore?: () => any
+ scrollOffset?: number = 1
+ style?: CSSProperties
+}/react-aria-components:TableLoadMoreItem+TableLoadMoreItem <T extends {}> {
+ children?: ReactNode
+ className?: string
+ isLoading?: boolean
+ onLoadMore?: () => any
+ scrollOffset?: number = 1
+ style?: CSSProperties
+}/react-aria-components:TreeLoadMoreItem+TreeLoadMoreItem <T extends {}> {
+ children?: ReactNode | ((TreeLoadMoreItemRenderProps & {
+ defaultChildren: ReactNode | undefined
+})) => ReactNode
+ className?: string | ((TreeLoadMoreItemRenderProps & {
+ defaultClassName: string | undefined
+})) => string
+ isLoading?: boolean
+ onLoadMore?: () => any
+ scrollOffset?: number = 1
+ style?: CSSProperties | ((TreeLoadMoreItemRenderProps & {
+ defaultStyle: CSSProperties
+})) => CSSProperties | undefined
+}/react-aria-components:GridListLoadMoreItemProps+GridListLoadMoreItemProps {
+ children?: ReactNode
+ className?: string
+ isLoading?: boolean
+ onLoadMore?: () => any
+ scrollOffset?: number = 1
+ style?: CSSProperties
+}/react-aria-components:ListBoxLoadMoreItemProps+ListBoxLoadMoreItemProps {
+ children?: ReactNode
+ className?: string
+ isLoading?: boolean
+ onLoadMore?: () => any
+ scrollOffset?: number = 1
+ style?: CSSProperties
+}/react-aria-components:TableLoadMoreItemProps+TableLoadMoreItemProps {
+ children?: ReactNode
+ className?: string
+ isLoading?: boolean
+ onLoadMore?: () => any
+ scrollOffset?: number = 1
+ style?: CSSProperties
+}/react-aria-components:TreeLoadMoreItemProps+TreeLoadMoreItemProps {
+ children?: ReactNode | ((TreeLoadMoreItemRenderProps & {
+ defaultChildren: ReactNode | undefined
+})) => ReactNode
+ className?: string | ((TreeLoadMoreItemRenderProps & {
+ defaultClassName: string | undefined
+})) => string
+ isLoading?: boolean
+ onLoadMore?: () => any
+ scrollOffset?: number = 1
+ style?: CSSProperties | ((TreeLoadMoreItemRenderProps & {
+ defaultStyle: CSSProperties
+})) => CSSProperties | undefined
+}/react-aria-components:TreeLoadMoreItemRenderProps+TreeLoadMoreItemRenderProps {
+ level: number
+}@react-aria/gridlist/@react-aria/gridlist:AriaGridListOptions AriaGridListOptions <T> {
aria-describedby?: string
aria-details?: string
aria-label?: string
aria-labelledby?: string
autoFocus?: boolean | FocusStrategy
defaultSelectedKeys?: 'all' | Iterable<Key>
- disabledBehavior?: DisabledBehavior = "all"
+ disabledBehavior?: DisabledBehavior
disabledKeys?: Iterable<Key>
disallowEmptySelection?: boolean
disallowTypeAhead?: boolean = false
escapeKeyBehavior?: 'clearSelection' | 'none' = 'clearSelection'
isVirtualized?: boolean
items?: Iterable<T>
keyboardDelegate?: KeyboardDelegate
keyboardNavigationBehavior?: 'arrow' | 'tab' = 'arrow'
layoutDelegate?: LayoutDelegate
linkBehavior?: 'action' | 'selection' | 'override' = 'action'
onAction?: (Key) => void
onSelectionChange?: (Selection) => void
selectedKeys?: 'all' | Iterable<Key>
selectionMode?: SelectionMode
shouldFocusWrap?: boolean = false
shouldSelectOnPressUp?: boolean
}/@react-aria/gridlist:AriaGridListProps AriaGridListProps <T> {
aria-describedby?: string
aria-details?: string
aria-label?: string
aria-labelledby?: string
autoFocus?: boolean | FocusStrategy
children: CollectionChildren<T>
defaultSelectedKeys?: 'all' | Iterable<Key>
- disabledBehavior?: DisabledBehavior = "all"
+ disabledBehavior?: DisabledBehavior
disabledKeys?: Iterable<Key>
disallowEmptySelection?: boolean
escapeKeyBehavior?: 'clearSelection' | 'none' = 'clearSelection'
id?: string
keyboardNavigationBehavior?: 'arrow' | 'tab' = 'arrow'
onAction?: (Key) => void
onSelectionChange?: (Selection) => void
selectedKeys?: 'all' | Iterable<Key>
selectionMode?: SelectionMode
shouldSelectOnPressUp?: boolean
}/@react-aria/gridlist:GridListProps GridListProps <T> {
autoFocus?: boolean | FocusStrategy
children: CollectionChildren<T>
defaultSelectedKeys?: 'all' | Iterable<Key>
- disabledBehavior?: DisabledBehavior = "all"
+ disabledBehavior?: DisabledBehavior
disabledKeys?: Iterable<Key>
disallowEmptySelection?: boolean
items?: Iterable<T>
onAction?: (Key) => void
selectedKeys?: 'all' | Iterable<Key>
selectionMode?: SelectionMode
shouldSelectOnPressUp?: boolean
}@react-aria/tree/@react-aria/tree:AriaTreeOptions AriaTreeOptions <T> {
aria-describedby?: string
aria-details?: string
aria-label?: string
aria-labelledby?: string
autoFocus?: boolean | FocusStrategy
defaultSelectedKeys?: 'all' | Iterable<Key>
- disabledBehavior?: DisabledBehavior = "all"
+ disabledBehavior?: DisabledBehavior
disabledKeys?: Iterable<Key>
disallowEmptySelection?: boolean
disallowTypeAhead?: boolean = false
escapeKeyBehavior?: 'clearSelection' | 'none' = 'clearSelection'
isVirtualized?: boolean
items?: Iterable<T>
keyboardDelegate?: KeyboardDelegate
keyboardNavigationBehavior?: 'arrow' | 'tab' = 'arrow'
layoutDelegate?: LayoutDelegate
linkBehavior?: 'action' | 'selection' | 'override' = 'action'
onAction?: (Key) => void
onSelectionChange?: (Selection) => void
selectedKeys?: 'all' | Iterable<Key>
selectionMode?: SelectionMode
shouldSelectOnPressUp?: boolean
}/@react-aria/tree:AriaTreeProps AriaTreeProps <T> {
aria-describedby?: string
aria-details?: string
aria-label?: string
aria-labelledby?: string
autoFocus?: boolean | FocusStrategy
children: CollectionChildren<T>
defaultSelectedKeys?: 'all' | Iterable<Key>
- disabledBehavior?: DisabledBehavior = "all"
+ disabledBehavior?: DisabledBehavior
disabledKeys?: Iterable<Key>
disallowEmptySelection?: boolean
escapeKeyBehavior?: 'clearSelection' | 'none' = 'clearSelection'
id?: string
onAction?: (Key) => void
onSelectionChange?: (Selection) => void
selectedKeys?: 'all' | Iterable<Key>
selectionMode?: SelectionMode
shouldSelectOnPressUp?: boolean
}/@react-aria/tree:TreeProps TreeProps <T> {
autoFocus?: boolean | FocusStrategy
children: CollectionChildren<T>
defaultSelectedKeys?: 'all' | Iterable<Key>
- disabledBehavior?: DisabledBehavior = "all"
+ disabledBehavior?: DisabledBehavior
disabledKeys?: Iterable<Key>
disallowEmptySelection?: boolean
items?: Iterable<T>
onAction?: (Key) => void
selectedKeys?: 'all' | Iterable<Key>
selectionMode?: SelectionMode
shouldSelectOnPressUp?: boolean
}@react-spectrum/list/@react-spectrum/list:ListView ListView <T extends {}> {
UNSAFE_className?: string
UNSAFE_style?: CSSProperties
alignSelf?: Responsive<'auto' | 'normal' | 'start' | 'end' | 'center' | 'flex-start' | 'flex-end' | 'self-start' | 'self-end' | 'stretch'>
aria-describedby?: string
aria-details?: string
aria-label?: string
aria-labelledby?: string
autoFocus?: boolean | FocusStrategy
bottom?: Responsive<DimensionValue>
children: CollectionChildren<T>
defaultSelectedKeys?: 'all' | Iterable<Key>
density?: 'compact' | 'regular' | 'spacious' = 'regular'
- disabledBehavior?: DisabledBehavior = "all"
+ disabledBehavior?: DisabledBehavior
disabledKeys?: Iterable<Key>
disallowEmptySelection?: boolean
dragAndDropHooks?: DragAndDropHooks['dragAndDropHooks']
end?: Responsive<DimensionValue>
flex?: Responsive<string | number | boolean>
flexBasis?: Responsive<number | string>
flexGrow?: Responsive<number>
flexShrink?: Responsive<number>
gridArea?: Responsive<string>
gridColumn?: Responsive<string>
gridColumnEnd?: Responsive<string>
gridColumnStart?: Responsive<string>
gridRow?: Responsive<string>
gridRowEnd?: Responsive<string>
gridRowStart?: Responsive<string>
height?: Responsive<DimensionValue>
id?: string
isHidden?: Responsive<boolean>
isQuiet?: boolean
items?: Iterable<T>
justifySelf?: Responsive<'auto' | 'normal' | 'start' | 'end' | 'flex-start' | 'flex-end' | 'self-start' | 'self-end' | 'center' | 'left' | 'right' | 'stretch'>
left?: Responsive<DimensionValue>
loadingState?: LoadingState
margin?: Responsive<DimensionValue>
marginBottom?: Responsive<DimensionValue>
marginEnd?: Responsive<DimensionValue>
marginStart?: Responsive<DimensionValue>
marginTop?: Responsive<DimensionValue>
marginX?: Responsive<DimensionValue>
marginY?: Responsive<DimensionValue>
maxHeight?: Responsive<DimensionValue>
maxWidth?: Responsive<DimensionValue>
minHeight?: Responsive<DimensionValue>
minWidth?: Responsive<DimensionValue>
onAction?: (Key) => void
onLoadMore?: () => any
onSelectionChange?: (Selection) => void
order?: Responsive<number>
overflowMode?: 'truncate' | 'wrap' = 'truncate'
position?: Responsive<'static' | 'relative' | 'absolute' | 'fixed' | 'sticky'>
renderEmptyState?: () => JSX.Element
right?: Responsive<DimensionValue>
selectedKeys?: 'all' | Iterable<Key>
selectionMode?: SelectionMode
selectionStyle?: 'checkbox' | 'highlight'
shouldSelectOnPressUp?: boolean
start?: Responsive<DimensionValue>
top?: Responsive<DimensionValue>
width?: Responsive<DimensionValue>
zIndex?: Responsive<number>
}/@react-spectrum/list:SpectrumListViewProps SpectrumListViewProps <T> {
UNSAFE_className?: string
UNSAFE_style?: CSSProperties
alignSelf?: Responsive<'auto' | 'normal' | 'start' | 'end' | 'center' | 'flex-start' | 'flex-end' | 'self-start' | 'self-end' | 'stretch'>
aria-describedby?: string
aria-details?: string
aria-label?: string
aria-labelledby?: string
autoFocus?: boolean | FocusStrategy
bottom?: Responsive<DimensionValue>
children: CollectionChildren<T>
defaultSelectedKeys?: 'all' | Iterable<Key>
density?: 'compact' | 'regular' | 'spacious' = 'regular'
- disabledBehavior?: DisabledBehavior = "all"
+ disabledBehavior?: DisabledBehavior
disabledKeys?: Iterable<Key>
disallowEmptySelection?: boolean
dragAndDropHooks?: DragAndDropHooks['dragAndDropHooks']
end?: Responsive<DimensionValue>
flex?: Responsive<string | number | boolean>
flexBasis?: Responsive<number | string>
flexGrow?: Responsive<number>
flexShrink?: Responsive<number>
gridArea?: Responsive<string>
gridColumn?: Responsive<string>
gridColumnEnd?: Responsive<string>
gridColumnStart?: Responsive<string>
gridRow?: Responsive<string>
gridRowEnd?: Responsive<string>
gridRowStart?: Responsive<string>
height?: Responsive<DimensionValue>
id?: string
isHidden?: Responsive<boolean>
isQuiet?: boolean
items?: Iterable<T>
justifySelf?: Responsive<'auto' | 'normal' | 'start' | 'end' | 'flex-start' | 'flex-end' | 'self-start' | 'self-end' | 'center' | 'left' | 'right' | 'stretch'>
left?: Responsive<DimensionValue>
loadingState?: LoadingState
margin?: Responsive<DimensionValue>
marginBottom?: Responsive<DimensionValue>
marginEnd?: Responsive<DimensionValue>
marginStart?: Responsive<DimensionValue>
marginTop?: Responsive<DimensionValue>
marginX?: Responsive<DimensionValue>
marginY?: Responsive<DimensionValue>
maxHeight?: Responsive<DimensionValue>
maxWidth?: Responsive<DimensionValue>
minHeight?: Responsive<DimensionValue>
minWidth?: Responsive<DimensionValue>
onAction?: (Key) => void
onLoadMore?: () => any
onSelectionChange?: (Selection) => void
order?: Responsive<number>
overflowMode?: 'truncate' | 'wrap' = 'truncate'
position?: Responsive<'static' | 'relative' | 'absolute' | 'fixed' | 'sticky'>
renderEmptyState?: () => JSX.Element
right?: Responsive<DimensionValue>
selectedKeys?: 'all' | Iterable<Key>
selectionMode?: SelectionMode
selectionStyle?: 'checkbox' | 'highlight'
shouldSelectOnPressUp?: boolean
start?: Responsive<DimensionValue>
top?: Responsive<DimensionValue>
width?: Responsive<DimensionValue>
zIndex?: Responsive<number>
}@react-spectrum/s2/@react-spectrum/s2:Breadcrumb Breadcrumb {
+ aria-current?: 'page' | 'step' | 'location' | 'date' | 'time' | boolean | 'true' | 'false' = 'page'
+ aria-describedby?: string
+ aria-details?: string
+ aria-label?: string
+ aria-labelledby?: string
children: ReactNode
download?: boolean | string
+ elementType?: string = 'a'
href?: Href
hrefLang?: string
- id?: Key
+ id?: string
+ isCurrent?: boolean
+ isDisabled?: boolean
+ onBlur?: (FocusEvent<Target>) => void
+ onFocus?: (FocusEvent<Target>) => void
+ onFocusChange?: (boolean) => void
+ onKeyDown?: (KeyboardEvent) => void
+ onKeyUp?: (KeyboardEvent) => void
+ onPress?: (PressEvent) => void
+ onPressChange?: (boolean) => void
+ onPressEnd?: (PressEvent) => void
+ onPressStart?: (PressEvent) => void
+ onPressUp?: (PressEvent) => void
ping?: string
referrerPolicy?: HTMLAttributeReferrerPolicy
rel?: string
routerOptions?: RouterOptions
}/@react-spectrum/s2:CardView CardView <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
defaultSelectedKeys?: 'all' | Iterable<Key>
density?: 'compact' | 'regular' | 'spacious' = 'regular'
dependencies?: ReadonlyArray<any>
- disabledBehavior?: DisabledBehavior = "all"
+ disabledBehavior?: DisabledBehavior
disabledKeys?: Iterable<Key>
disallowEmptySelection?: boolean
disallowTypeAhead?: boolean = false
dragAndDropHooks?: DragAndDropHooks
id?: string
items?: Iterable<T>
layout?: 'grid' | 'waterfall' = 'grid'
loadingState?: LoadingState
onAction?: (Key) => void
onLoadMore?: () => void
onScroll?: (UIEvent<Element>) => void
onSelectionChange?: (Selection) => void
renderActionBar?: ('all' | Set<Key>) => ReactElement
renderEmptyState?: (GridListRenderProps) => ReactNode
selectedKeys?: 'all' | Iterable<Key>
selectionMode?: SelectionMode
selectionStyle?: 'checkbox' | 'highlight' = 'checkbox'
shouldSelectOnPressUp?: boolean
size?: 'XS' | 'S' | 'M' | 'L' | 'XL' = 'M'
slot?: string | null
styles?: StylesPropWithHeight
variant?: 'primary' | 'secondary' | 'tertiary' | 'quiet' = 'primary'
}/@react-spectrum/s2:Picker Picker <T extends {}> {
UNSAFE_className?: UnsafeClassName
UNSAFE_style?: CSSProperties
align?: 'start' | 'end' = 'start'
aria-describedby?: string
aria-details?: string
aria-label?: string
aria-labelledby?: string
autoComplete?: string
autoFocus?: boolean
children: ReactNode | ({}) => ReactNode
contextualHelp?: ReactNode
defaultOpen?: boolean
defaultSelectedKey?: Key
dependencies?: ReadonlyArray<any>
description?: ReactNode
direction?: 'bottom' | 'top' = 'bottom'
disabledKeys?: Iterable<Key>
errorMessage?: ReactNode | (ValidationResult) => ReactNode
excludeFromTabOrder?: boolean
id?: string
isDisabled?: boolean
isInvalid?: boolean
isOpen?: boolean
- isQuiet?: boolean
isRequired?: boolean
items?: Iterable<T>
label?: ReactNode
labelAlign?: Alignment = 'start'
loadingState?: LoadingState
menuWidth?: number
name?: string
necessityIndicator?: NecessityIndicator = 'icon'
onBlur?: (FocusEvent<Target>) => void
onFocus?: (FocusEvent<Target>) => void
onFocusChange?: (boolean) => void
onKeyDown?: (KeyboardEvent) => void
onKeyUp?: (KeyboardEvent) => void
onLoadMore?: () => any
onOpenChange?: (boolean) => void
onSelectionChange?: (Key | null) => void
placeholder?: string = 'Select an item' (localized)
selectedKey?: Key | null
shouldFlip?: boolean = true
size?: 'S' | 'M' | 'L' | 'XL' = 'M'
slot?: string | null
styles?: StylesProp
validate?: (Key) => ValidationError | boolean | null | undefined
validationBehavior?: 'native' | 'aria' = 'native'
}/@react-spectrum/s2:Cell Cell {
align?: 'start' | 'center' | 'end' = 'start'
children: ReactNode
- className?: ClassNameOrFunction<CellRenderProps>
+ className?: string | ((CellRenderProps & {
+ defaultClassName: string | undefined
+})) => string
colSpan?: number
id?: Key
showDivider?: boolean
- style?: StyleOrFunction<CellRenderProps>
+ style?: CSSProperties | ((CellRenderProps & {
+ defaultStyle: CSSProperties
+})) => CSSProperties | undefined
textValue?: string
}/@react-spectrum/s2:Column Column {
align?: 'start' | 'center' | 'end' = 'start'
allowsResizing?: boolean
allowsSorting?: boolean
children: ReactNode
- className?: ClassNameOrFunction<ColumnRenderProps>
+ className?: string | ((ColumnRenderProps & {
+ defaultClassName: string | undefined
+})) => string
defaultWidth?: ColumnSize | null
id?: Key
isRowHeader?: boolean
maxWidth?: ColumnStaticSize | null
menuItems?: ReactNode
minWidth?: ColumnStaticSize | null
showDivider?: boolean
- style?: StyleOrFunction<ColumnRenderProps>
+ style?: CSSProperties | ((ColumnRenderProps & {
+ defaultStyle: CSSProperties
+})) => CSSProperties | undefined
textValue?: string
width?: ColumnSize | null
}/@react-spectrum/s2:UNSTABLE_ToastContainer UNSTABLE_ToastContainer {
aria-describedby?: string
aria-details?: string
aria-label?: string = "Notifications"
aria-labelledby?: string
- className?: ClassNameOrFunction<ToastRegionRenderProps<T>>
+ className?: string | ((ToastRegionRenderProps<T> & {
+ defaultClassName: string | undefined
+})) => string
placement?: ToastPlacement = "bottom"
- style?: StyleOrFunction<ToastRegionRenderProps<T>>
+ style?: CSSProperties | ((ToastRegionRenderProps<T> & {
+ defaultStyle: CSSProperties
+})) => CSSProperties | undefined
}/@react-spectrum/s2:BreadcrumbProps BreadcrumbProps {
+ aria-current?: 'page' | 'step' | 'location' | 'date' | 'time' | boolean | 'true' | 'false' = 'page'
+ aria-describedby?: string
+ aria-details?: string
+ aria-label?: string
+ aria-labelledby?: string
children: ReactNode
download?: boolean | string
+ elementType?: string = 'a'
href?: Href
hrefLang?: string
- id?: Key
+ id?: string
+ isCurrent?: boolean
+ isDisabled?: boolean
+ onBlur?: (FocusEvent<Target>) => void
+ onFocus?: (FocusEvent<Target>) => void
+ onFocusChange?: (boolean) => void
+ onKeyDown?: (KeyboardEvent) => void
+ onKeyUp?: (KeyboardEvent) => void
+ onPress?: (PressEvent) => void
+ onPressChange?: (boolean) => void
+ onPressEnd?: (PressEvent) => void
+ onPressStart?: (PressEvent) => void
+ onPressUp?: (PressEvent) => void
ping?: string
referrerPolicy?: HTMLAttributeReferrerPolicy
rel?: string
routerOptions?: RouterOptions
}/@react-spectrum/s2:CardViewProps CardViewProps <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
defaultSelectedKeys?: 'all' | Iterable<Key>
density?: 'compact' | 'regular' | 'spacious' = 'regular'
dependencies?: ReadonlyArray<any>
- disabledBehavior?: DisabledBehavior = "all"
+ disabledBehavior?: DisabledBehavior
disabledKeys?: Iterable<Key>
disallowEmptySelection?: boolean
disallowTypeAhead?: boolean = false
dragAndDropHooks?: DragAndDropHooks
id?: string
items?: Iterable<T>
layout?: 'grid' | 'waterfall' = 'grid'
loadingState?: LoadingState
onAction?: (Key) => void
onLoadMore?: () => void
onScroll?: (UIEvent<Element>) => void
onSelectionChange?: (Selection) => void
renderActionBar?: ('all' | Set<Key>) => ReactElement
renderEmptyState?: (GridListRenderProps) => ReactNode
selectedKeys?: 'all' | Iterable<Key>
selectionMode?: SelectionMode
selectionStyle?: 'checkbox' | 'highlight' = 'checkbox'
shouldSelectOnPressUp?: boolean
size?: 'XS' | 'S' | 'M' | 'L' | 'XL' = 'M'
slot?: string | null
styles?: StylesPropWithHeight
variant?: 'primary' | 'secondary' | 'tertiary' | 'quiet' = 'primary'
}/@react-spectrum/s2:PickerProps PickerProps <T extends {}> {
UNSAFE_className?: UnsafeClassName
UNSAFE_style?: CSSProperties
align?: 'start' | 'end' = 'start'
aria-describedby?: string
aria-details?: string
aria-label?: string
aria-labelledby?: string
autoComplete?: string
autoFocus?: boolean
children: ReactNode | ({}) => ReactNode
contextualHelp?: ReactNode
defaultOpen?: boolean
defaultSelectedKey?: Key
dependencies?: ReadonlyArray<any>
description?: ReactNode
direction?: 'bottom' | 'top' = 'bottom'
disabledKeys?: Iterable<Key>
errorMessage?: ReactNode | (ValidationResult) => ReactNode
excludeFromTabOrder?: boolean
id?: string
isDisabled?: boolean
isInvalid?: boolean
isOpen?: boolean
- isQuiet?: boolean
isRequired?: boolean
items?: Iterable<T>
label?: ReactNode
labelAlign?: Alignment = 'start'
loadingState?: LoadingState
menuWidth?: number
name?: string
necessityIndicator?: NecessityIndicator = 'icon'
onBlur?: (FocusEvent<Target>) => void
onFocus?: (FocusEvent<Target>) => void
onFocusChange?: (boolean) => void
onKeyDown?: (KeyboardEvent) => void
onKeyUp?: (KeyboardEvent) => void
onLoadMore?: () => any
onOpenChange?: (boolean) => void
onSelectionChange?: (Key | null) => void
placeholder?: string = 'Select an item' (localized)
selectedKey?: Key | null
shouldFlip?: boolean = true
size?: 'S' | 'M' | 'L' | 'XL' = 'M'
slot?: string | null
styles?: StylesProp
validate?: (Key) => ValidationError | boolean | null | undefined
validationBehavior?: 'native' | 'aria' = 'native'
}/@react-spectrum/s2:PopoverProps PopoverProps {
UNSAFE_className?: UnsafeClassName
UNSAFE_style?: CSSProperties
aria-describedby?: string
aria-details?: string
aria-label?: string
aria-labelledby?: string
boundaryElement?: Element = document.body
- children?: ChildrenOrFunction<PopoverRenderProps>
- className?: ClassNameOrFunction<PopoverRenderProps>
+ children?: ReactNode | ((PopoverRenderProps & {
+ defaultChildren: ReactNode | undefined
+})) => ReactNode
+ className?: string | ((PopoverRenderProps & {
+ defaultClassName: string | undefined
+})) => string
containerPadding?: number = 12
crossOffset?: number = 0
defaultOpen?: boolean
hideArrow?: boolean = false
isEntering?: boolean
isExiting?: boolean
isOpen?: boolean
maxHeight?: number
offset?: number = 8
onOpenChange?: (boolean) => void
placement?: Placement = 'bottom'
scrollRef?: RefObject<Element | null> = overlayRef
shouldFlip?: boolean = true
size?: 'S' | 'M' | 'L'
slot?: string | null
- style?: StyleOrFunction<PopoverRenderProps>
+ style?: CSSProperties | ((PopoverRenderProps & {
+ defaultStyle: CSSProperties
+})) => CSSProperties | undefined
styles?: StyleString
trigger?: string
triggerRef?: RefObject<Element | null>
}/@react-spectrum/s2:CellProps CellProps {
align?: 'start' | 'center' | 'end' = 'start'
children: ReactNode
- className?: ClassNameOrFunction<CellRenderProps>
+ className?: string | ((CellRenderProps & {
+ defaultClassName: string | undefined
+})) => string
colSpan?: number
id?: Key
showDivider?: boolean
- style?: StyleOrFunction<CellRenderProps>
+ style?: CSSProperties | ((CellRenderProps & {
+ defaultStyle: CSSProperties
+})) => CSSProperties | undefined
textValue?: string
}/@react-spectrum/s2:ColumnProps ColumnProps {
align?: 'start' | 'center' | 'end' = 'start'
allowsResizing?: boolean
allowsSorting?: boolean
children: ReactNode
- className?: ClassNameOrFunction<ColumnRenderProps>
+ className?: string | ((ColumnRenderProps & {
+ defaultClassName: string | undefined
+})) => string
defaultWidth?: ColumnSize | null
id?: Key
isRowHeader?: boolean
maxWidth?: ColumnStaticSize | null
menuItems?: ReactNode
minWidth?: ColumnStaticSize | null
showDivider?: boolean
- style?: StyleOrFunction<ColumnRenderProps>
+ style?: CSSProperties | ((ColumnRenderProps & {
+ defaultStyle: CSSProperties
+})) => CSSProperties | undefined
textValue?: string
width?: ColumnSize | null
}/@react-spectrum/s2:ToastContainerProps ToastContainerProps {
aria-describedby?: string
aria-details?: string
aria-label?: string = "Notifications"
aria-labelledby?: string
- className?: ClassNameOrFunction<ToastRegionRenderProps<T>>
+ className?: string | ((ToastRegionRenderProps<T> & {
+ defaultClassName: string | undefined
+})) => string
placement?: ToastPlacement = "bottom"
- style?: StyleOrFunction<ToastRegionRenderProps<T>>
+ style?: CSSProperties | ((ToastRegionRenderProps<T> & {
+ defaultStyle: CSSProperties
+})) => CSSProperties | undefined
}@react-spectrum/tree/@react-spectrum/tree:TreeView TreeView <T extends {}> {
UNSAFE_className?: string
UNSAFE_style?: CSSProperties
alignSelf?: Responsive<'auto' | 'normal' | 'start' | 'end' | 'center' | 'flex-start' | 'flex-end' | 'self-start' | 'self-end' | 'stretch'>
aria-describedby?: string
aria-details?: string
aria-label?: string
aria-labelledby?: string
autoFocus?: boolean | FocusStrategy
bottom?: Responsive<DimensionValue>
children?: ReactNode | ({}) => ReactNode
defaultExpandedKeys?: Iterable<Key>
defaultSelectedKeys?: 'all' | Iterable<Key>
- disabledBehavior?: DisabledBehavior = "all"
+ disabledBehavior?: DisabledBehavior
disabledKeys?: Iterable<Key>
disallowEmptySelection?: boolean
end?: Responsive<DimensionValue>
escapeKeyBehavior?: 'clearSelection' | 'none' = 'clearSelection'
flex?: Responsive<string | number | boolean>
flexBasis?: Responsive<number | string>
flexGrow?: Responsive<number>
flexShrink?: Responsive<number>
gridArea?: Responsive<string>
gridColumn?: Responsive<string>
gridColumnEnd?: Responsive<string>
gridColumnStart?: Responsive<string>
gridRow?: Responsive<string>
gridRowEnd?: Responsive<string>
gridRowStart?: Responsive<string>
height?: Responsive<DimensionValue>
id?: string
isHidden?: Responsive<boolean>
items?: Iterable<T>
justifySelf?: Responsive<'auto' | 'normal' | 'start' | 'end' | 'flex-start' | 'flex-end' | 'self-start' | 'self-end' | 'center' | 'left' | 'right' | 'stretch'>
left?: Responsive<DimensionValue>
margin?: Responsive<DimensionValue>
marginBottom?: Responsive<DimensionValue>
marginEnd?: Responsive<DimensionValue>
marginStart?: Responsive<DimensionValue>
marginTop?: Responsive<DimensionValue>
marginX?: Responsive<DimensionValue>
marginY?: Responsive<DimensionValue>
maxHeight?: Responsive<DimensionValue>
maxWidth?: Responsive<DimensionValue>
minHeight?: Responsive<DimensionValue>
minWidth?: Responsive<DimensionValue>
onAction?: (Key) => void
onExpandedChange?: (Set<Key>) => any
onSelectionChange?: (Selection) => void
order?: Responsive<number>
position?: Responsive<'static' | 'relative' | 'absolute' | 'fixed' | 'sticky'>
renderEmptyState?: () => JSX.Element
right?: Responsive<DimensionValue>
selectedKeys?: 'all' | Iterable<Key>
selectionMode?: SelectionMode
selectionStyle?: 'checkbox' | 'highlight'
shouldSelectOnPressUp?: boolean
start?: Responsive<DimensionValue>
top?: Responsive<DimensionValue>
width?: Responsive<DimensionValue>
zIndex?: Responsive<number>
}/@react-spectrum/tree:SpectrumTreeViewProps SpectrumTreeViewProps <T> {
UNSAFE_className?: string
UNSAFE_style?: CSSProperties
alignSelf?: Responsive<'auto' | 'normal' | 'start' | 'end' | 'center' | 'flex-start' | 'flex-end' | 'self-start' | 'self-end' | 'stretch'>
aria-describedby?: string
aria-details?: string
aria-label?: string
aria-labelledby?: string
autoFocus?: boolean | FocusStrategy
bottom?: Responsive<DimensionValue>
children?: ReactNode | (T) => ReactNode
defaultExpandedKeys?: Iterable<Key>
defaultSelectedKeys?: 'all' | Iterable<Key>
- disabledBehavior?: DisabledBehavior = "all"
+ disabledBehavior?: DisabledBehavior
disabledKeys?: Iterable<Key>
disallowEmptySelection?: boolean
end?: Responsive<DimensionValue>
escapeKeyBehavior?: 'clearSelection' | 'none' = 'clearSelection'
flex?: Responsive<string | number | boolean>
flexBasis?: Responsive<number | string>
flexGrow?: Responsive<number>
flexShrink?: Responsive<number>
gridArea?: Responsive<string>
gridColumn?: Responsive<string>
gridColumnEnd?: Responsive<string>
gridColumnStart?: Responsive<string>
gridRow?: Responsive<string>
gridRowEnd?: Responsive<string>
gridRowStart?: Responsive<string>
height?: Responsive<DimensionValue>
id?: string
isHidden?: Responsive<boolean>
items?: Iterable<T>
justifySelf?: Responsive<'auto' | 'normal' | 'start' | 'end' | 'flex-start' | 'flex-end' | 'self-start' | 'self-end' | 'center' | 'left' | 'right' | 'stretch'>
left?: Responsive<DimensionValue>
margin?: Responsive<DimensionValue>
marginBottom?: Responsive<DimensionValue>
marginEnd?: Responsive<DimensionValue>
marginStart?: Responsive<DimensionValue>
marginTop?: Responsive<DimensionValue>
marginX?: Responsive<DimensionValue>
marginY?: Responsive<DimensionValue>
maxHeight?: Responsive<DimensionValue>
maxWidth?: Responsive<DimensionValue>
minHeight?: Responsive<DimensionValue>
minWidth?: Responsive<DimensionValue>
onAction?: (Key) => void
onExpandedChange?: (Set<Key>) => any
onSelectionChange?: (Selection) => void
order?: Responsive<number>
position?: Responsive<'static' | 'relative' | 'absolute' | 'fixed' | 'sticky'>
renderEmptyState?: () => JSX.Element
right?: Responsive<DimensionValue>
selectedKeys?: 'all' | Iterable<Key>
selectionMode?: SelectionMode
selectionStyle?: 'checkbox' | 'highlight'
shouldSelectOnPressUp?: boolean
start?: Responsive<DimensionValue>
top?: Responsive<DimensionValue>
width?: Responsive<DimensionValue>
zIndex?: Responsive<number>
} |
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: