Improve S2 chromatic story coverage #6999
Merged
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
this is because we can only have one overay open at a time and so the open overlay doesnt cover the other elements in the main chromatic stories
LFDanLu
commented
Sep 11, 2024
Comment on lines
106
to
112
| // TODO: eventually make all none S2 chromatic stories have | ||
| // chromatic: { | ||
| // disableSnapshot: true | ||
| // } | ||
| // so that we centralize the chromatic stories. Wait until all these chromatic stories are finished | ||
| // and we run chromatic one last time to ensure a good baseline, then have all the stories in the | ||
| // chromatic folder import the original stories and rexport them |
There was a problem hiding this comment.
As we add powerset stories, some/all of the currently snapshotted S2 stories are redundant/extraneous so we'll want to centralize them all into this folder eventually
…omatic ones if needed
LFDanLu
changed the title
| key = 'default'; | ||
| } | ||
|
|
||
| let button = <Button key={key} {...otherArgs} {...c}>{children ? children : key}</Button>; |
There was a problem hiding this comment.
can we include the key as a data-* attribute as well so we can tell what the combination of props is on a given rendered element? regardless of if it's passed on the children or not
There was a problem hiding this comment.
also, some of those which send them on the children are hard to parse, so whatever we specify as the data attribute name should be more verbose
There was a problem hiding this comment.
sure I can do that, I originally just wanted to display them visibly so someone going through chromatic changes didn't have to open the build separately to check the config
There was a problem hiding this comment.
Yeah, that's nice when possible as well, but if there isn't room, I'm fine for them to be data-attributes. I think we have a blend in the RSP existing chromatic as well?
| render: () => <Avatar alt="design provided" src="https://i.imgur.com/xIe7Wlb.png" /> | ||
| }; | ||
|
|
||
| export const OverBackground = { |
There was a problem hiding this comment.
need one which uses the spectrum layer background? or maybe taken care of by AvatarGroup stories when we get those
There was a problem hiding this comment.
not quite sure the ask here, the base story goes through all the layer backgrounds if that is what is being asked for here
There was a problem hiding this comment.
Avatars can have a border around them that matches the layer color
base
'layer-1'
'layer-2'
pasteboard
elevated
But I don't think they have that border unless in a Card or AvatarGroup? Which, I guess we can rely on those to test it
| }; | ||
|
|
||
| export default meta; | ||
| export {Dynamic, Powerset} from './Breadcrumbs.stories'; |
There was a problem hiding this comment.
these don't flip like they should?
There was a problem hiding this comment.
Ah this is because I've set
Dynamic.parameters = {
// TODO: add ar-AE when we get intl strings
chromaticProvider: {colorSchemes: ['light'], backgrounds: ['base'], locales: ['en-US'], disableAnimations: true}
};
In the Breadcrumb stories that they use to make sure ar-AE doesn't actually apply since it blows up the story due to missing intl strings. When those strings are added I'll update these, will add a comment
| // {labelAlign: ['start', 'end']}, | ||
| // {labelPosition: ['top', 'side']}, | ||
| {necessityIndicator: ['label', 'icon']}, | ||
| {size: ['S', 'M', 'L', 'XL']} |
There was a problem hiding this comment.
reduce by only doing 1 non-default size? the range of sizes with all the states is already covered in checkbox
There was a problem hiding this comment.
again, just a bit wary that this assumes that the set of sizes will always be in lockstep between the Checkbox and CheckboxGroup thus we can skip rendering all of them.
Comment on lines
+29
to
+33
| {isDisabled: true}, | ||
| {isEmphasized: true}, | ||
| {isInvalid: true}, | ||
| {isReadOnly: true}, | ||
| {isRequired: true}, |
There was a problem hiding this comment.
what matters is just that the value is sent on the context, can we test that these values are set via unit testing since the combinations are already tested for individual checkboxes.
we should only have checkboxgroup specific visual tests here, such as the HelpText or Required or layout direction
There was a problem hiding this comment.
my only hesitation is that this assumes that the group wrapper styling won't ever be affected by these props. Happy for others to weigh in, I know the power sets are already quite hard to parse so happy to be overruled here
|
|
||
| export default meta; | ||
|
|
||
| export const Default = { |
There was a problem hiding this comment.
be good to get one of these with a play function to focus the handle and show the colour loupe or whatever that thing is called
There was a problem hiding this comment.
yep, on our list for stories to add
| combos: topChunks[4] | ||
| } | ||
| }; | ||
|
|
There was a problem hiding this comment.
helptext placement seems bad, don't fix in this PR, but we should followup
There was a problem hiding this comment.
good catch! I'll make a ticket documenting these
## API Changes
react-aria-components/react-aria-components:Breadcrumb Breadcrumb {
children?: ReactNode | ((BreadcrumbRenderProps & {
defaultChildren: ReactNode | undefined
})) => ReactNode
className?: string | ((BreadcrumbRenderProps & {
defaultClassName: string | undefined
})) => string
id?: Key
style?: CSSProperties | ((BreadcrumbRenderProps & {
defaultStyle: CSSProperties
-})) => CSSProperties | undefined
+})) => CSSProperties
}/react-aria-components:Button Button {
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?: 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
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
onPress?: (PressEvent) => void
onPressChange?: (boolean) => void
onPressEnd?: (PressEvent) => void
onPressStart?: (PressEvent) => void
onPressUp?: (PressEvent) => void
preventFocusOnPress?: boolean
slot?: string | null
style?: CSSProperties | ((ButtonRenderProps & {
defaultStyle: CSSProperties
-})) => CSSProperties | undefined
+})) => CSSProperties
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?: ReactNode | ((CalendarRenderProps & {
defaultChildren: ReactNode | undefined
})) => ReactNode
className?: string | ((CalendarRenderProps & {
defaultClassName: string | undefined
})) => string
defaultFocusedValue?: DateValue
defaultValue?: DateValue | null
focusedValue?: DateValue
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?: CSSProperties | ((CalendarRenderProps & {
defaultStyle: CSSProperties
-})) => CSSProperties | undefined
+})) => CSSProperties
value?: DateValue | null
visibleDuration?: DateDuration = {months: 1}
}/react-aria-components:CalendarCell CalendarCell {
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?: CSSProperties | ((CalendarCellRenderProps & {
defaultStyle: CSSProperties
-})) => CSSProperties | undefined
+})) => CSSProperties
}/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?: ReactNode | ((RangeCalendarRenderProps & {
defaultChildren: ReactNode | undefined
})) => ReactNode
className?: string | ((RangeCalendarRenderProps & {
defaultClassName: string | undefined
})) => string
defaultFocusedValue?: DateValue
defaultValue?: RangeValue<DateValue> | null
focusedValue?: DateValue
id?: string
isDateUnavailable?: (DateValue) => boolean
isDisabled?: boolean = false
isInvalid?: boolean
isReadOnly?: boolean = false
maxValue?: DateValue | null
minValue?: DateValue | null
onChange?: (T) => void
onFocusChange?: (CalendarDate) => void
pageBehavior?: PageBehavior = visible
slot?: string | null
style?: CSSProperties | ((RangeCalendarRenderProps & {
defaultStyle: CSSProperties
-})) => CSSProperties | undefined
+})) => CSSProperties
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?: 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?: CSSProperties | ((CheckboxRenderProps & {
defaultStyle: CSSProperties
-})) => CSSProperties | undefined
+})) => CSSProperties
validate?: (T) => 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?: 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?: CSSProperties | ((CheckboxGroupRenderProps & {
defaultStyle: CSSProperties
-})) => CSSProperties | undefined
+})) => CSSProperties
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?: 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?: CSSProperties | ((ColorAreaRenderProps & {
defaultStyle: CSSProperties
-})) => CSSProperties | undefined
+})) => CSSProperties
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?: 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?: CSSProperties | ((ColorFieldRenderProps & {
defaultStyle: CSSProperties
-})) => CSSProperties | undefined
+})) => CSSProperties
validate?: (Color | null) => ValidationError | boolean | null | undefined
validationBehavior?: 'native' | 'aria' = 'native'
value?: T
}/react-aria-components:ColorSlider ColorSlider {
aria-describedby?: string
aria-details?: string
aria-label?: string
aria-labelledby?: string
channel: ColorChannel
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?: CSSProperties | ((ColorSliderRenderProps & {
defaultStyle: CSSProperties
-})) => CSSProperties | undefined
+})) => CSSProperties
value?: T
}/react-aria-components:ColorSwatch ColorSwatch {
aria-describedby?: string
aria-details?: string
aria-label?: string
aria-labelledby?: string
className?: string | ((ColorSwatchRenderProps & {
defaultClassName: string | undefined
})) => string
color?: string | Color
colorName?: string
id?: string
slot?: string | null
style?: CSSProperties | ((ColorSwatchRenderProps & {
defaultStyle: CSSProperties
-})) => CSSProperties | undefined
+})) => CSSProperties
}/react-aria-components:ColorSwatchPicker ColorSwatchPicker {
aria-describedby?: string
aria-details?: string
aria-label?: string
aria-labelledby?: string
children?: ReactNode
className?: string | ((ColorSwatchPickerRenderProps & {
defaultClassName: string | undefined
})) => string
defaultValue?: string | Color
layout?: 'grid' | 'stack' = 'grid'
onChange?: (Color) => void
style?: CSSProperties | ((ColorSwatchPickerRenderProps & {
defaultStyle: CSSProperties
-})) => CSSProperties | undefined
+})) => CSSProperties
value?: string | Color
}/react-aria-components:ColorSwatchPickerItem ColorSwatchPickerItem {
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?: CSSProperties | ((ColorSwatchPickerItemRenderProps & {
defaultStyle: CSSProperties
-})) => CSSProperties | undefined
+})) => CSSProperties
}/react-aria-components:ColorThumb ColorThumb {
children?: ReactNode | ((ColorThumbRenderProps & {
defaultChildren: ReactNode | undefined
})) => ReactNode
className?: string | ((ColorThumbRenderProps & {
defaultClassName: string | undefined
})) => string
onHoverChange?: (boolean) => void
onHoverEnd?: (HoverEvent) => void
onHoverStart?: (HoverEvent) => void
style?: CSSProperties | ((ColorThumbRenderProps & {
defaultStyle: CSSProperties
-})) => CSSProperties | undefined
+})) => CSSProperties
}/react-aria-components:ColorWheel ColorWheel {
aria-describedby?: string
aria-details?: string
aria-label?: string
aria-labelledby?: string
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?: CSSProperties | ((ColorWheelRenderProps & {
defaultStyle: CSSProperties
-})) => CSSProperties | undefined
+})) => CSSProperties
value?: T
}/react-aria-components:ColorWheelTrack ColorWheelTrack {
className?: string | ((ColorWheelTrackRenderProps & {
defaultClassName: string | undefined
})) => string
style?: CSSProperties | ((ColorWheelTrackRenderProps & {
defaultStyle: CSSProperties
-})) => CSSProperties | undefined
+})) => CSSProperties
}/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?: 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?: CSSProperties | ((ComboBoxRenderProps & {
defaultStyle: CSSProperties
-})) => CSSProperties | undefined
+})) => CSSProperties
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?: ReactNode | ((DateFieldRenderProps & {
defaultChildren: ReactNode | undefined
})) => ReactNode
className?: string | ((DateFieldRenderProps & {
defaultClassName: string | undefined
})) => string
defaultOpen?: boolean
defaultValue?: DateValue | null
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
minValue?: DateValue
name?: string
onBlur?: (FocusEvent<Target>) => void
onChange?: (MappedDateValue<DateValue>) => void
onFocus?: (FocusEvent<Target>) => void
onFocusChange?: (boolean) => void
onKeyDown?: (KeyboardEvent) => void
onKeyUp?: (KeyboardEvent) => void
onOpenChange?: (boolean) => void
placeholderValue?: DateValue
shouldForceLeadingZeros?: boolean
slot?: string | null
style?: CSSProperties | ((DateFieldRenderProps & {
defaultStyle: CSSProperties
-})) => CSSProperties | undefined
+})) => CSSProperties
validate?: (MappedDateValue<DateValue>) => ValidationError | boolean | null | undefined
validationBehavior?: 'native' | 'aria' = 'native'
value?: DateValue | null
}/react-aria-components:DateInput DateInput {
children: (DateSegment) => ReactElement
className?: string | ((DateInputRenderProps & {
defaultClassName: string | undefined
})) => string
slot?: string | null
style?: CSSProperties | ((DateInputRenderProps & {
defaultStyle: CSSProperties
-})) => CSSProperties | undefined
+})) => CSSProperties
}/react-aria-components:DateSegment DateSegment {
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?: CSSProperties | ((DateSegmentRenderProps & {
defaultStyle: CSSProperties
-})) => CSSProperties | undefined
+})) => CSSProperties
}/react-aria-components:TimeField TimeField <T extends TimeValue> {
aria-describedby?: string
aria-details?: string
aria-label?: string
aria-labelledby?: string
autoFocus?: boolean
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
minValue?: TimeValue
name?: string
onBlur?: (FocusEvent<Target>) => void
onChange?: (MappedTimeValue<TimeValue>) => void
onFocus?: (FocusEvent<Target>) => void
onFocusChange?: (boolean) => void
onKeyDown?: (KeyboardEvent) => void
onKeyUp?: (KeyboardEvent) => void
placeholderValue?: TimeValue
shouldForceLeadingZeros?: boolean
slot?: string | null
style?: CSSProperties | ((DateFieldRenderProps & {
defaultStyle: CSSProperties
-})) => CSSProperties | undefined
+})) => CSSProperties
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?: ReactNode | ((DatePickerRenderProps & {
defaultChildren: ReactNode | undefined
})) => ReactNode
className?: string | ((DatePickerRenderProps & {
defaultClassName: string | undefined
})) => string
defaultOpen?: boolean
defaultValue?: DateValue | null
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
minValue?: DateValue
name?: string
onBlur?: (FocusEvent<Target>) => void
onChange?: (MappedDateValue<DateValue>) => void
onFocus?: (FocusEvent<Target>) => void
onFocusChange?: (boolean) => void
onKeyDown?: (KeyboardEvent) => void
onKeyUp?: (KeyboardEvent) => void
onOpenChange?: (boolean) => void
pageBehavior?: PageBehavior = visible
placeholderValue?: DateValue
shouldCloseOnSelect?: boolean | () => boolean = true
shouldForceLeadingZeros?: boolean
slot?: string | null
style?: CSSProperties | ((DatePickerRenderProps & {
defaultStyle: CSSProperties
-})) => CSSProperties | undefined
+})) => CSSProperties
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?: ReactNode | ((DateRangePickerRenderProps & {
defaultChildren: ReactNode | undefined
})) => ReactNode
className?: string | ((DateRangePickerRenderProps & {
defaultClassName: string | undefined
})) => string
defaultOpen?: boolean
defaultValue?: RangeValue<DateValue> | null
endName?: string
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
minValue?: DateValue
onBlur?: (FocusEvent<Target>) => void
onChange?: (RangeValue<MappedDateValue<DateValue>>) => void
onFocus?: (FocusEvent<Target>) => void
onFocusChange?: (boolean) => void
onKeyDown?: (KeyboardEvent) => void
onKeyUp?: (KeyboardEvent) => void
onOpenChange?: (boolean) => void
pageBehavior?: PageBehavior = visible
placeholderValue?: DateValue
shouldCloseOnSelect?: boolean | () => boolean = true
shouldForceLeadingZeros?: boolean
slot?: string | null
startName?: string
style?: CSSProperties | ((DateRangePickerRenderProps & {
defaultStyle: CSSProperties
-})) => CSSProperties | undefined
+})) => CSSProperties
validate?: (RangeValue<MappedDateValue<DateValue>>) => ValidationError | boolean | null | undefined
validationBehavior?: 'native' | 'aria' = 'native'
value?: RangeValue<DateValue> | null
}/react-aria-components:DropZone DropZone {
aria-describedby?: string
aria-details?: string
aria-label?: string
aria-labelledby?: string
children?: ReactNode | ((DropZoneRenderProps & {
defaultChildren: ReactNode | undefined
})) => ReactNode
className?: string | ((DropZoneRenderProps & {
defaultClassName: string | undefined
})) => string
getDropOperation?: (DragTypes, Array<DropOperation>) => DropOperation
isDisabled?: boolean
onDrop?: (DropEvent) => void
onDropEnter?: (DropEnterEvent) => void
onDropExit?: (DropExitEvent) => void
onDropMove?: (DropMoveEvent) => void
onHoverChange?: (boolean) => void
onHoverEnd?: (HoverEvent) => void
onHoverStart?: (HoverEvent) => void
slot?: string | null
style?: CSSProperties | ((DropZoneRenderProps & {
defaultStyle: CSSProperties
-})) => CSSProperties | undefined
+})) => CSSProperties
}/react-aria-components:FieldError FieldError {
children?: ReactNode | ((FieldErrorRenderProps & {
defaultChildren: ReactNode | undefined
})) => ReactNode
className?: string | ((FieldErrorRenderProps & {
defaultClassName: string | undefined
})) => string
id?: string
style?: CSSProperties | ((FieldErrorRenderProps & {
defaultStyle: CSSProperties
-})) => CSSProperties | undefined
+})) => CSSProperties
}/react-aria-components:GridList GridList <T extends {}> {
aria-describedby?: string
aria-details?: string
aria-label?: string
aria-labelledby?: string
children?: ReactNode | ({}) => ReactNode
className?: string | ((GridListRenderProps & {
defaultClassName: string | undefined
})) => string
defaultSelectedKeys?: 'all' | Iterable<Key>
dependencies?: Array<any>
disabledBehavior?: DisabledBehavior
disabledKeys?: Iterable<Key>
disallowEmptySelection?: boolean
dragAndDropHooks?: DragAndDropHooks
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
selectionMode?: SelectionMode
slot?: string | null
style?: CSSProperties | ((GridListRenderProps & {
defaultStyle: CSSProperties
-})) => CSSProperties | undefined
+})) => CSSProperties
}/react-aria-components:GridListItem GridListItem <T extends {}> {
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?: CSSProperties | ((GridListItemRenderProps & {
defaultStyle: CSSProperties
-})) => CSSProperties | undefined
+})) => CSSProperties
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?: 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?: CSSProperties | ((GroupRenderProps & {
defaultStyle: CSSProperties
-})) => CSSProperties | undefined
+})) => CSSProperties
}/react-aria-components:Input Input extends InputHTMLAttributes {
className?: string | ((InputRenderProps & {
defaultClassName: string | undefined
})) => string
onHoverChange?: (boolean) => void
onHoverEnd?: (HoverEvent) => void
onHoverStart?: (HoverEvent) => void
style?: CSSProperties | ((InputRenderProps & {
defaultStyle: CSSProperties
-})) => CSSProperties | undefined
+})) => CSSProperties
}/react-aria-components:Link Link {
aria-describedby?: string
aria-details?: string
aria-label?: string
aria-labelledby?: string
autoFocus?: boolean
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
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?: CSSProperties | ((LinkRenderProps & {
defaultStyle: CSSProperties
-})) => CSSProperties | undefined
+})) => CSSProperties
target?: HTMLAttributeAnchorTarget
}/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?: string | ((ListBoxRenderProps & {
defaultClassName: string | undefined
})) => string
defaultSelectedKeys?: 'all' | Iterable<Key>
dependencies?: Array<any>
disabledKeys?: Iterable<Key>
disallowEmptySelection?: boolean
dragAndDropHooks?: DragAndDropHooks
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
selectionMode?: SelectionMode
shouldFocusWrap?: boolean
slot?: string | null
style?: CSSProperties | ((ListBoxRenderProps & {
defaultStyle: CSSProperties
-})) => CSSProperties | undefined
+})) => CSSProperties
}/react-aria-components:ListBoxItem ListBoxItem <T extends {}> {
aria-label?: string
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?: CSSProperties | ((ListBoxItemRenderProps & {
defaultStyle: CSSProperties
-})) => CSSProperties | undefined
+})) => CSSProperties
target?: HTMLAttributeAnchorTarget
textValue?: string
value?: {}
}/react-aria-components:MenuItem MenuItem <T extends {}> {
aria-label?: string
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?: CSSProperties | ((MenuItemRenderProps & {
defaultStyle: CSSProperties
-})) => CSSProperties | undefined
+})) => CSSProperties
target?: HTMLAttributeAnchorTarget
textValue?: string
value?: {}
}/react-aria-components:Meter Meter {
aria-describedby?: string
aria-details?: string
aria-label?: string
aria-labelledby?: string
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?: CSSProperties | ((MeterRenderProps & {
defaultStyle: CSSProperties
-})) => CSSProperties | undefined
+})) => CSSProperties
value?: number = 0
valueLabel?: ReactNode
}/react-aria-components:Modal Modal {
UNSTABLE_portalContainer?: Element = document.body
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?: CSSProperties | ((ModalRenderProps & {
defaultStyle: CSSProperties
-})) => CSSProperties | undefined
+})) => CSSProperties
}/react-aria-components:ModalOverlay ModalOverlay {
UNSTABLE_portalContainer?: Element = document.body
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?: CSSProperties | ((ModalRenderProps & {
defaultStyle: CSSProperties
-})) => CSSProperties | undefined
+})) => CSSProperties
}/react-aria-components:NumberField NumberField {
aria-describedby?: string
aria-details?: string
aria-label?: string
aria-labelledby?: string
autoFocus?: boolean
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?: CSSProperties | ((NumberFieldRenderProps & {
defaultStyle: CSSProperties
-})) => CSSProperties | undefined
+})) => CSSProperties
validate?: (number) => ValidationError | boolean | null | undefined
validationBehavior?: 'native' | 'aria' = 'native'
value?: number
}/react-aria-components:OverlayArrow OverlayArrow extends HTMLAttributes {
children?: ReactNode | ((OverlayArrowRenderProps & {
defaultChildren: ReactNode | undefined
})) => ReactNode
className?: string | ((OverlayArrowRenderProps & {
defaultClassName: string | undefined
})) => string
style?: CSSProperties | ((OverlayArrowRenderProps & {
defaultStyle: CSSProperties
-})) => CSSProperties | undefined
+})) => CSSProperties
}/react-aria-components:Popover Popover {
UNSTABLE_portalContainer?: Element = document.body
arrowBoundaryOffset?: number = 0
boundaryElement?: Element = document.body
children?: ReactNode | ((PopoverRenderProps & {
defaultChildren: ReactNode | undefined
})) => ReactNode
className?: string | ((PopoverRenderProps & {
defaultClassName: string | undefined
})) => string
containerPadding?: number = 12
crossOffset?: number = 0
defaultOpen?: boolean
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?: CSSProperties | ((PopoverRenderProps & {
defaultStyle: CSSProperties
-})) => CSSProperties | undefined
+})) => CSSProperties
trigger?: string
triggerRef?: RefObject<Element | null>
}/react-aria-components:ProgressBar ProgressBar {
aria-describedby?: string
aria-details?: string
aria-label?: string
aria-labelledby?: string
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?: CSSProperties | ((ProgressBarRenderProps & {
defaultStyle: CSSProperties
-})) => CSSProperties | undefined
+})) => CSSProperties
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?: 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?: CSSProperties | ((RadioGroupRenderProps & {
defaultStyle: CSSProperties
-})) => CSSProperties | undefined
+})) => CSSProperties
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?: 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?: CSSProperties | ((RadioRenderProps & {
defaultStyle: CSSProperties
-})) => CSSProperties | undefined
+})) => CSSProperties
value: string
}/react-aria-components:SearchField SearchField {
aria-activedescendant?: string
aria-autocomplete?: 'none' | 'inline' | 'list' | 'both'
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
autoFocus?: boolean
children?: ReactNode | ((SearchFieldRenderProps & {
defaultChildren: ReactNode | undefined
})) => ReactNode
className?: string | ((SearchFieldRenderProps & {
defaultClassName: string | undefined
})) => string
defaultValue?: string
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<Target>) => void
onChange?: (T) => void
onClear?: () => 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>
onSubmit?: (string) => void
pattern?: string
slot?: string | null
style?: CSSProperties | ((SearchFieldRenderProps & {
defaultStyle: CSSProperties
-})) => CSSProperties | undefined
+})) => CSSProperties
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?: 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) => void
placeholder?: string
selectedKey?: Key | null
slot?: string | null
style?: CSSProperties | ((SelectRenderProps & {
defaultStyle: CSSProperties
-})) => CSSProperties | undefined
+})) => CSSProperties
validate?: (Key) => ValidationError | boolean | null | undefined
validationBehavior?: 'native' | 'aria' = 'native'
}/react-aria-components:SelectValue SelectValue <T extends {}> extends HTMLAttributes {
children?: ReactNode | ((SelectValueRenderProps<{}> & {
defaultChildren: ReactNode | undefined
})) => ReactNode
className?: string | ((SelectValueRenderProps<{}> & {
defaultClassName: string | undefined
})) => string
style?: CSSProperties | ((SelectValueRenderProps<{}> & {
defaultStyle: CSSProperties
-})) => CSSProperties | undefined
+})) => CSSProperties
}/react-aria-components:Slider Slider <T extends number | Array<number>> {
aria-describedby?: string
aria-details?: string
aria-label?: string
aria-labelledby?: string
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?: CSSProperties | ((SliderRenderProps & {
defaultStyle: CSSProperties
-})) => CSSProperties | undefined
+})) => CSSProperties
value?: T
}/react-aria-components:SliderOutput SliderOutput {
children?: ReactNode | ((SliderRenderProps & {
defaultChildren: ReactNode | undefined
})) => ReactNode
className?: string | ((SliderRenderProps & {
defaultClassName: string | undefined
})) => string
style?: CSSProperties | ((SliderRenderProps & {
defaultStyle: CSSProperties
-})) => CSSProperties | undefined
+})) => CSSProperties
}/react-aria-components:SliderTrack SliderTrack {
children?: ReactNode | ((SliderTrackRenderProps & {
defaultChildren: ReactNode | undefined
})) => ReactNode
className?: string | ((SliderTrackRenderProps & {
defaultClassName: string | undefined
})) => string
onHoverChange?: (boolean) => void
onHoverEnd?: (HoverEvent) => void
onHoverStart?: (HoverEvent) => void
style?: CSSProperties | ((SliderTrackRenderProps & {
defaultStyle: CSSProperties
-})) => CSSProperties | undefined
+})) => CSSProperties
}/react-aria-components:SliderThumb SliderThumb {
aria-describedby?: string
aria-details?: string
aria-errormessage?: string
aria-label?: string
aria-labelledby?: string
autoFocus?: boolean
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?: CSSProperties | ((SliderThumbRenderProps & {
defaultStyle: CSSProperties
-})) => CSSProperties | undefined
+})) => CSSProperties
}/react-aria-components:Switch Switch {
aria-controls?: string
aria-describedby?: string
aria-details?: string
aria-label?: string
aria-labelledby?: string
autoFocus?: boolean
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?: CSSProperties | ((SwitchRenderProps & {
defaultStyle: CSSProperties
-})) => CSSProperties | undefined
+})) => CSSProperties
value?: string
}/react-aria-components:Table Table {
aria-describedby?: string
aria-details?: string
aria-label?: string
aria-labelledby?: string
children?: ReactNode
className?: string | ((TableRenderProps & {
defaultClassName: string | undefined
})) => string
defaultSelectedKeys?: 'all' | Iterable<Key>
disabledBehavior?: DisabledBehavior = "selection"
disabledKeys?: Iterable<Key>
disallowEmptySelection?: boolean
dragAndDropHooks?: DragAndDropHooks
onRowAction?: (Key) => void
onScroll?: (UIEvent<Element>) => void
onSelectionChange?: (Selection) => void
onSortChange?: (SortDescriptor) => any
selectedKeys?: 'all' | Iterable<Key>
selectionBehavior?: SelectionBehavior = "toggle"
selectionMode?: SelectionMode
slot?: string | null
sortDescriptor?: SortDescriptor
style?: CSSProperties | ((TableRenderProps & {
defaultStyle: CSSProperties
-})) => CSSProperties | undefined
+})) => CSSProperties
}/react-aria-components:Row Row <T extends {}> {
children?: ReactNode | ({}) => ReactElement
className?: string | ((RowRenderProps & {
defaultClassName: string | undefined
})) => string
columns?: Iterable<{}>
dependencies?: Array<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?: CSSProperties | ((RowRenderProps & {
defaultStyle: CSSProperties
-})) => CSSProperties | undefined
+})) => CSSProperties
target?: HTMLAttributeAnchorTarget
textValue?: string
value?: {}
}/react-aria-components:Cell Cell {
children?: ReactNode | ((CellRenderProps & {
defaultChildren: ReactNode | undefined
})) => ReactNode
className?: string | ((CellRenderProps & {
defaultClassName: string | undefined
})) => string
id?: Key
style?: CSSProperties | ((CellRenderProps & {
defaultStyle: CSSProperties
-})) => CSSProperties | undefined
+})) => CSSProperties
textValue?: string
}/react-aria-components:Column Column {
allowsSorting?: boolean
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?: CSSProperties | ((ColumnRenderProps & {
defaultStyle: CSSProperties
-})) => CSSProperties | undefined
+})) => CSSProperties
textValue?: string
width?: ColumnSize | null
}/react-aria-components:ColumnResizer ColumnResizer {
aria-label?: string
children?: ReactNode | ((ColumnResizerRenderProps & {
defaultChildren: ReactNode | undefined
})) => ReactNode
className?: string | ((ColumnResizerRenderProps & {
defaultClassName: string | undefined
})) => string
onHoverChange?: (boolean) => void
onHoverEnd?: (HoverEvent) => void
onHoverStart?: (HoverEvent) => void
style?: CSSProperties | ((ColumnResizerRenderProps & {
defaultStyle: CSSProperties
-})) => CSSProperties | undefined
+})) => CSSProperties
}/react-aria-components:TableHeader TableHeader <T extends {}> {
children?: ReactNode | ({}) => ReactElement
className?: string | ((TableHeaderRenderProps & {
defaultClassName: string | undefined
})) => string
columns?: Array<{}>
dependencies?: Array<any>
onHoverChange?: (boolean) => void
onHoverEnd?: (HoverEvent) => void
onHoverStart?: (HoverEvent) => void
style?: CSSProperties | ((TableHeaderRenderProps & {
defaultStyle: CSSProperties
-})) => CSSProperties | undefined
+})) => CSSProperties
}/react-aria-components:TableBody TableBody <T extends {}> {
children?: ReactNode | ({}) => ReactNode
className?: string | ((TableBodyRenderProps & {
defaultClassName: string | undefined
})) => string
dependencies?: Array<any>
disabledKeys?: Iterable<Key>
items?: Iterable<{}>
renderEmptyState?: (TableBodyRenderProps) => ReactNode
style?: CSSProperties | ((TableBodyRenderProps & {
defaultStyle: CSSProperties
-})) => CSSProperties | undefined
+})) => CSSProperties
}/react-aria-components:Tabs Tabs {
aria-describedby?: string
aria-details?: string
aria-label?: string
aria-labelledby?: string
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?: CSSProperties | ((TabsRenderProps & {
defaultStyle: CSSProperties
-})) => CSSProperties | undefined
+})) => CSSProperties
}/react-aria-components:TabList TabList <T extends {}> {
aria-describedby?: string
aria-details?: string
aria-label?: string
aria-labelledby?: string
children?: ReactNode | (T) => ReactNode
className?: string | ((TabListRenderProps & {
defaultClassName: string | undefined
})) => string
dependencies?: Array<any>
items?: Iterable<T>
style?: CSSProperties | ((TabListRenderProps & {
defaultStyle: CSSProperties
-})) => CSSProperties | undefined
+})) => CSSProperties
}/react-aria-components:TabPanel TabPanel {
aria-describedby?: string
aria-details?: string
aria-label?: string
aria-labelledby?: string
children?: ReactNode | ((TabPanelRenderProps & {
defaultChildren: ReactNode | undefined
})) => ReactNode
className?: string | ((TabPanelRenderProps & {
defaultClassName: string | undefined
})) => string
id?: string
shouldForceMount?: boolean = false
style?: CSSProperties | ((TabPanelRenderProps & {
defaultStyle: CSSProperties
-})) => CSSProperties | undefined
+})) => CSSProperties
}/react-aria-components:Tab Tab {
aria-describedby?: string
aria-details?: string
aria-label?: string
aria-labelledby?: string
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?: CSSProperties | ((TabRenderProps & {
defaultStyle: CSSProperties
-})) => CSSProperties | undefined
+})) => CSSProperties
target?: HTMLAttributeAnchorTarget
}/react-aria-components:TagList TagList <T extends {}> {
children?: ReactNode | (T) => ReactNode
className?: string | ((TagListRenderProps & {
defaultClassName: string | undefined
})) => string
dependencies?: Array<any>
items?: Iterable<T>
renderEmptyState?: (TagListRenderProps) => ReactNode
style?: CSSProperties | ((TagListRenderProps & {
defaultStyle: CSSProperties
-})) => CSSProperties | undefined
+})) => CSSProperties
}/react-aria-components:Tag Tag {
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?: CSSProperties | ((TagRenderProps & {
defaultStyle: CSSProperties
-})) => CSSProperties | undefined
+})) => CSSProperties
target?: HTMLAttributeAnchorTarget
textValue?: string
}/react-aria-components:TextArea TextArea extends TextareaHTMLAttributes {
className?: string | ((InputRenderProps & {
defaultClassName: string | undefined
})) => string
onHoverChange?: (boolean) => void
onHoverEnd?: (HoverEvent) => void
onHoverStart?: (HoverEvent) => void
style?: CSSProperties | ((InputRenderProps & {
defaultStyle: CSSProperties
-})) => CSSProperties | undefined
+})) => CSSProperties
}/react-aria-components:TextField TextField {
aria-activedescendant?: string
aria-autocomplete?: 'none' | 'inline' | 'list' | 'both'
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
autoFocus?: boolean
children?: ReactNode | ((TextFieldRenderProps & {
defaultChildren: ReactNode | undefined
})) => ReactNode
className?: string | ((TextFieldRenderProps & {
defaultClassName: string | undefined
})) => string
defaultValue?: string
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<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>
pattern?: string
slot?: string | null
style?: CSSProperties | ((TextFieldRenderProps & {
defaultStyle: CSSProperties
-})) => CSSProperties | undefined
+})) => CSSProperties
type?: 'text' | 'search' | 'url' | 'tel' | 'email' | 'password' | (string & {
})
validate?: (string) => ValidationError | boolean | null | undefined
value?: string
}/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?: ReactNode | ((ToggleButtonRenderProps & {
defaultChildren: ReactNode | undefined
})) => ReactNode
className?: string | ((ToggleButtonRenderProps & {
defaultClassName: string | undefined
})) => string
defaultSelected?: boolean
excludeFromTabOrder?: boolean
id?: string
isDisabled?: boolean
isSelected?: boolean
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
onPress?: (PressEvent) => void
onPressChange?: (boolean) => void
onPressEnd?: (PressEvent) => void
onPressStart?: (PressEvent) => void
onPressUp?: (PressEvent) => void
preventFocusOnPress?: boolean
slot?: string | null
style?: CSSProperties | ((ToggleButtonRenderProps & {
defaultStyle: CSSProperties
-})) => CSSProperties | undefined
+})) => CSSProperties
type?: 'button' | 'submit' | 'reset' = 'button'
}/react-aria-components:Toolbar Toolbar {
aria-describedby?: string
aria-details?: string
aria-label?: string
aria-labelledby?: string
children?: ReactNode | ((ToolbarRenderProps & {
defaultChildren: ReactNode | undefined
})) => ReactNode
className?: string | ((ToolbarRenderProps & {
defaultClassName: string | undefined
})) => string
orientation?: Orientation = 'horizontal'
slot?: string | null
style?: CSSProperties | ((ToolbarRenderProps & {
defaultStyle: CSSProperties
-})) => CSSProperties | undefined
+})) => CSSProperties
}/react-aria-components:Tooltip Tooltip {
UNSTABLE_portalContainer?: Element = document.body
aria-describedby?: string
aria-details?: string
aria-label?: string
aria-labelledby?: string
arrowBoundaryOffset?: number = 0
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?: CSSProperties | ((TooltipRenderProps & {
defaultStyle: CSSProperties
-})) => CSSProperties | undefined
+})) => CSSProperties
triggerRef?: RefObject<Element | null>
}/react-aria-components:UNSTABLE_TreeLoadingIndicator UNSTABLE_TreeLoadingIndicator <T extends {}> {
children?: ReactNode | ((TreeLoadingIndicatorRenderProps & {
defaultChildren: ReactNode | undefined
})) => ReactNode
className?: string | ((TreeLoadingIndicatorRenderProps & {
defaultClassName: string | undefined
})) => string
style?: CSSProperties | ((TreeLoadingIndicatorRenderProps & {
defaultStyle: CSSProperties
-})) => CSSProperties | undefined
+})) => CSSProperties
}/react-aria-components:UNSTABLE_Tree UNSTABLE_Tree <T extends {}> {
aria-describedby?: string
aria-details?: string
aria-label?: string
aria-labelledby?: string
children?: ReactNode | ({}) => ReactNode
className?: string | ((TreeRenderProps & {
defaultClassName: string | undefined
})) => string
defaultExpandedKeys?: Iterable<Key>
defaultSelectedKeys?: 'all' | Iterable<Key>
dependencies?: Array<any>
disabledBehavior?: DisabledBehavior = 'selection'
disabledKeys?: Iterable<Key>
disallowEmptySelection?: boolean
expandedKeys?: Iterable<Key>
id?: string
items?: Iterable<T>
onAction?: (Key) => void
onExpandedChange?: (Set<Key>) => any
onScroll?: (UIEvent<Element>) => void
onSelectionChange?: (Selection) => void
renderEmptyState?: (TreeRenderProps<TreeRenderProps, 'isEmpty'>) => ReactNode
selectedKeys?: 'all' | Iterable<Key>
selectionBehavior?: SelectionBehavior
selectionMode?: SelectionMode
slot?: string | null
style?: CSSProperties | ((TreeRenderProps & {
defaultStyle: CSSProperties
-})) => CSSProperties | undefined
+})) => CSSProperties
}/react-aria-components:UNSTABLE_TreeItem UNSTABLE_TreeItem <T extends {}> {
aria-label?: string
children: ReactNode
className?: string | ((TreeItemRenderProps & {
defaultClassName: string | undefined
})) => string
download?: boolean | string
href?: Href
hrefLang?: string
id?: Key
onHoverChange?: (boolean) => void
onHoverEnd?: (HoverEvent) => void
onHoverStart?: (HoverEvent) => void
ping?: string
referrerPolicy?: HTMLAttributeReferrerPolicy
rel?: string
routerOptions?: RouterOptions
style?: CSSProperties | ((TreeItemRenderProps & {
defaultStyle: CSSProperties
-})) => CSSProperties | undefined
+})) => CSSProperties
target?: HTMLAttributeAnchorTarget
textValue: string
value?: {}
}/react-aria-components:DropIndicator DropIndicator {
children?: ReactNode | ((DropIndicatorRenderProps & {
defaultChildren: ReactNode | undefined
})) => ReactNode
className?: string | ((DropIndicatorRenderProps & {
defaultClassName: string | undefined
})) => string
style?: CSSProperties | ((DropIndicatorRenderProps & {
defaultStyle: CSSProperties
-})) => CSSProperties | undefined
+})) => CSSProperties
target: DropTarget
}/react-aria-components:UNSTABLE_Virtualizer-UNSTABLE_Virtualizer <O> {
+UNSTABLE_Virtualizer {
children: ReactNode
- layout: ILayout<O>
- layoutOptions?: O
+ layout: ILayout<any>
}/react-aria-components:BreadcrumbProps BreadcrumbProps {
children?: ReactNode | ((BreadcrumbRenderProps & {
defaultChildren: ReactNode | undefined
})) => ReactNode
className?: string | ((BreadcrumbRenderProps & {
defaultClassName: string | undefined
})) => string
id?: Key
style?: CSSProperties | ((BreadcrumbRenderProps & {
defaultStyle: CSSProperties
-})) => CSSProperties | undefined
+})) => CSSProperties
}/react-aria-components:ButtonProps ButtonProps {
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?: 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
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
onPress?: (PressEvent) => void
onPressChange?: (boolean) => void
onPressEnd?: (PressEvent) => void
onPressStart?: (PressEvent) => void
onPressUp?: (PressEvent) => void
preventFocusOnPress?: boolean
slot?: string | null
style?: CSSProperties | ((ButtonRenderProps & {
defaultStyle: CSSProperties
-})) => CSSProperties | undefined
+})) => CSSProperties
type?: 'button' | 'submit' | 'reset' = 'button'
value?: string
}/react-aria-components:CalendarCellProps CalendarCellProps {
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?: CSSProperties | ((CalendarCellRenderProps & {
defaultStyle: CSSProperties
-})) => CSSProperties | undefined
+})) => CSSProperties
}/react-aria-components:CalendarProps CalendarProps <T extends DateValue> {
aria-describedby?: string
aria-details?: string
aria-label?: string
aria-labelledby?: string
autoFocus?: boolean = false
children?: ReactNode | ((CalendarRenderProps & {
defaultChildren: ReactNode | undefined
})) => ReactNode
className?: string | ((CalendarRenderProps & {
defaultClassName: string | undefined
})) => string
defaultFocusedValue?: DateValue
defaultValue?: DateValue | null
focusedValue?: DateValue
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?: CSSProperties | ((CalendarRenderProps & {
defaultStyle: CSSProperties
-})) => CSSProperties | undefined
+})) => CSSProperties
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?: ReactNode | ((RangeCalendarRenderProps & {
defaultChildren: ReactNode | undefined
})) => ReactNode
className?: string | ((RangeCalendarRenderProps & {
defaultClassName: string | undefined
})) => string
defaultFocusedValue?: DateValue
defaultValue?: RangeValue<DateValue> | null
focusedValue?: DateValue
id?: string
isDateUnavailable?: (DateValue) => boolean
isDisabled?: boolean = false
isInvalid?: boolean
isReadOnly?: boolean = false
maxValue?: DateValue | null
minValue?: DateValue | null
onChange?: (T) => void
onFocusChange?: (CalendarDate) => void
pageBehavior?: PageBehavior = visible
slot?: string | null
style?: CSSProperties | ((RangeCalendarRenderProps & {
defaultStyle: CSSProperties
-})) => CSSProperties | undefined
+})) => CSSProperties
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?: 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?: CSSProperties | ((CheckboxGroupRenderProps & {
defaultStyle: CSSProperties
-})) => CSSProperties | undefined
+})) => CSSProperties
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?: 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?: CSSProperties | ((CheckboxRenderProps & {
defaultStyle: CSSProperties
-})) => CSSProperties | undefined
+})) => CSSProperties
validate?: (T) => 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?: 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?: CSSProperties | ((ColorAreaRenderProps & {
defaultStyle: CSSProperties
-})) => CSSProperties | undefined
+})) => CSSProperties
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?: 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?: CSSProperties | ((ColorFieldRenderProps & {
defaultStyle: CSSProperties
-})) => CSSProperties | undefined
+})) => CSSProperties
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?: 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?: CSSProperties | ((ColorSliderRenderProps & {
defaultStyle: CSSProperties
-})) => CSSProperties | undefined
+})) => CSSProperties
value?: T
}/react-aria-components:ColorSwatchProps ColorSwatchProps {
aria-describedby?: string
aria-details?: string
aria-label?: string
aria-labelledby?: string
className?: string | ((ColorSwatchRenderProps & {
defaultClassName: string | undefined
})) => string
color?: string | Color
colorName?: string
id?: string
slot?: string | null
style?: CSSProperties | ((ColorSwatchRenderProps & {
defaultStyle: CSSProperties
-})) => CSSProperties | undefined
+})) => CSSProperties
}/react-aria-components:ColorSwatchPickerProps ColorSwatchPickerProps {
aria-describedby?: string
aria-details?: string
aria-label?: string
aria-labelledby?: string
children?: ReactNode
className?: string | ((ColorSwatchPickerRenderProps & {
defaultClassName: string | undefined
})) => string
defaultValue?: string | Color
layout?: 'grid' | 'stack' = 'grid'
onChange?: (Color) => void
style?: CSSProperties | ((ColorSwatchPickerRenderProps & {
defaultStyle: CSSProperties
-})) => CSSProperties | undefined
+})) => CSSProperties
value?: string | Color
}/react-aria-components:ColorSwatchPickerItemProps ColorSwatchPickerItemProps {
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?: CSSProperties | ((ColorSwatchPickerItemRenderProps & {
defaultStyle: CSSProperties
-})) => CSSProperties | undefined
+})) => CSSProperties
}/react-aria-components:ColorThumbProps ColorThumbProps {
children?: ReactNode | ((ColorThumbRenderProps & {
defaultChildren: ReactNode | undefined
})) => ReactNode
className?: string | ((ColorThumbRenderProps & {
defaultClassName: string | undefined
})) => string
onHoverChange?: (boolean) => void
onHoverEnd?: (HoverEvent) => void
onHoverStart?: (HoverEvent) => void
style?: CSSProperties | ((ColorThumbRenderProps & {
defaultStyle: CSSProperties
-})) => CSSProperties | undefined
+})) => CSSProperties
}/react-aria-components:ColorWheelProps ColorWheelProps {
aria-describedby?: string
aria-details?: string
aria-label?: string
aria-labelledby?: string
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?: CSSProperties | ((ColorWheelRenderProps & {
defaultStyle: CSSProperties
-})) => CSSProperties | undefined
+})) => CSSProperties
value?: T
}/react-aria-components:ColorWheelTrackProps ColorWheelTrackProps {
className?: string | ((ColorWheelTrackRenderProps & {
defaultClassName: string | undefined
})) => string
style?: CSSProperties | ((ColorWheelTrackRenderProps & {
defaultStyle: CSSProperties
-})) => CSSProperties | undefined
+})) => CSSProperties
}/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?: 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?: CSSProperties | ((ComboBoxRenderProps & {
defaultStyle: CSSProperties
-})) => CSSProperties | undefined
+})) => CSSProperties
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?: ReactNode | ((DateFieldRenderProps & {
defaultChildren: ReactNode | undefined
})) => ReactNode
className?: string | ((DateFieldRenderProps & {
defaultClassName: string | undefined
})) => string
defaultOpen?: boolean
defaultValue?: DateValue | null
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
minValue?: DateValue
name?: string
onBlur?: (FocusEvent<Target>) => void
onChange?: (MappedDateValue<DateValue>) => void
onFocus?: (FocusEvent<Target>) => void
onFocusChange?: (boolean) => void
onKeyDown?: (KeyboardEvent) => void
onKeyUp?: (KeyboardEvent) => void
onOpenChange?: (boolean) => void
placeholderValue?: DateValue
shouldForceLeadingZeros?: boolean
slot?: string | null
style?: CSSProperties | ((DateFieldRenderProps & {
defaultStyle: CSSProperties
-})) => CSSProperties | undefined
+})) => CSSProperties
validate?: (MappedDateValue<DateValue>) => ValidationError | boolean | null | undefined
validationBehavior?: 'native' | 'aria' = 'native'
value?: DateValue | null
}/react-aria-components:DateInputProps DateInputProps {
children: (DateSegment) => ReactElement
className?: string | ((DateInputRenderProps & {
defaultClassName: string | undefined
})) => string
slot?: string | null
style?: CSSProperties | ((DateInputRenderProps & {
defaultStyle: CSSProperties
-})) => CSSProperties | undefined
+})) => CSSProperties
}/react-aria-components:DateSegmentProps DateSegmentProps {
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?: CSSProperties | ((DateSegmentRenderProps & {
defaultStyle: CSSProperties
-})) => CSSProperties | undefined
+})) => CSSProperties
}/react-aria-components:TimeFieldProps TimeFieldProps <T extends TimeValue> {
aria-describedby?: string
aria-details?: string
aria-label?: string
aria-labelledby?: string
autoFocus?: boolean
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
minValue?: TimeValue
name?: string
onBlur?: (FocusEvent<Target>) => void
onChange?: (MappedTimeValue<TimeValue>) => void
onFocus?: (FocusEvent<Target>) => void
onFocusChange?: (boolean) => void
onKeyDown?: (KeyboardEvent) => void
onKeyUp?: (KeyboardEvent) => void
placeholderValue?: TimeValue
shouldForceLeadingZeros?: boolean
slot?: string | null
style?: CSSProperties | ((DateFieldRenderProps & {
defaultStyle: CSSProperties
-})) => CSSProperties | undefined
+})) => CSSProperties
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?: ReactNode | ((DatePickerRenderProps & {
defaultChildren: ReactNode | undefined
})) => ReactNode
className?: string | ((DatePickerRenderProps & {
defaultClassName: string | undefined
})) => string
defaultOpen?: boolean
defaultValue?: DateValue | null
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
minValue?: DateValue
name?: string
onBlur?: (FocusEvent<Target>) => void
onChange?: (MappedDateValue<DateValue>) => void
onFocus?: (FocusEvent<Target>) => void
onFocusChange?: (boolean) => void
onKeyDown?: (KeyboardEvent) => void
onKeyUp?: (KeyboardEvent) => void
onOpenChange?: (boolean) => void
pageBehavior?: PageBehavior = visible
placeholderValue?: DateValue
shouldCloseOnSelect?: boolean | () => boolean = true
shouldForceLeadingZeros?: boolean
slot?: string | null
style?: CSSProperties | ((DatePickerRenderProps & {
defaultStyle: CSSProperties
-})) => CSSProperties | undefined
+})) => CSSProperties
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?: ReactNode | ((DateRangePickerRenderProps & {
defaultChildren: ReactNode | undefined
})) => ReactNode
className?: string | ((DateRangePickerRenderProps & {
defaultClassName: string | undefined
})) => string
defaultOpen?: boolean
defaultValue?: RangeValue<DateValue> | null
endName?: string
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
minValue?: DateValue
onBlur?: (FocusEvent<Target>) => void
onChange?: (RangeValue<MappedDateValue<DateValue>>) => void
onFocus?: (FocusEvent<Target>) => void
onFocusChange?: (boolean) => void
onKeyDown?: (KeyboardEvent) => void
onKeyUp?: (KeyboardEvent) => void
onOpenChange?: (boolean) => void
pageBehavior?: PageBehavior = visible
placeholderValue?: DateValue
shouldCloseOnSelect?: boolean | () => boolean = true
shouldForceLeadingZeros?: boolean
slot?: string | null
startName?: string
style?: CSSProperties | ((DateRangePickerRenderProps & {
defaultStyle: CSSProperties
-})) => CSSProperties | undefined
+})) => CSSProperties
validate?: (RangeValue<MappedDateValue<DateValue>>) => ValidationError | boolean | null | undefined
validationBehavior?: 'native' | 'aria' = 'native'
value?: RangeValue<DateValue> | null
}/react-aria-components:DropZoneProps DropZoneProps {
aria-describedby?: string
aria-details?: string
aria-label?: string
aria-labelledby?: string
children?: ReactNode | ((DropZoneRenderProps & {
defaultChildren: ReactNode | undefined
})) => ReactNode
className?: string | ((DropZoneRenderProps & {
defaultClassName: string | undefined
})) => string
getDropOperation?: (DragTypes, Array<DropOperation>) => DropOperation
isDisabled?: boolean
onDrop?: (DropEvent) => void
onDropEnter?: (DropEnterEvent) => void
onDropExit?: (DropExitEvent) => void
onDropMove?: (DropMoveEvent) => void
onHoverChange?: (boolean) => void
onHoverEnd?: (HoverEvent) => void
onHoverStart?: (HoverEvent) => void
slot?: string | null
style?: CSSProperties | ((DropZoneRenderProps & {
defaultStyle: CSSProperties
-})) => CSSProperties | undefined
+})) => CSSProperties
}/react-aria-components:FieldErrorProps FieldErrorProps {
children?: ReactNode | ((FieldErrorRenderProps & {
defaultChildren: ReactNode | undefined
})) => ReactNode
className?: string | ((FieldErrorRenderProps & {
defaultClassName: string | undefined
})) => string
id?: string
style?: CSSProperties | ((FieldErrorRenderProps & {
defaultStyle: CSSProperties
-})) => CSSProperties | undefined
+})) => CSSProperties
}/react-aria-components:GridListProps GridListProps <T> {
aria-describedby?: string
aria-details?: string
aria-label?: string
aria-labelledby?: string
children?: ReactNode | (T) => ReactNode
className?: string | ((GridListRenderProps & {
defaultClassName: string | undefined
})) => string
defaultSelectedKeys?: 'all' | Iterable<Key>
dependencies?: Array<any>
disabledBehavior?: DisabledBehavior
disabledKeys?: Iterable<Key>
disallowEmptySelection?: boolean
dragAndDropHooks?: DragAndDropHooks
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
selectionMode?: SelectionMode
slot?: string | null
style?: CSSProperties | ((GridListRenderProps & {
defaultStyle: CSSProperties
-})) => CSSProperties | undefined
+})) => CSSProperties
}/react-aria-components:GridListItemProps GridListItemProps <T = {}> {
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?: CSSProperties | ((GridListItemRenderProps & {
defaultStyle: CSSProperties
-})) => CSSProperties | undefined
+})) => CSSProperties
target?: HTMLAttributeAnchorTarget
textValue?: string
value?: T
}/react-aria-components:GroupProps GroupProps {
aria-describedby?: string
aria-details?: string
aria-label?: string
aria-labelledby?: string
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?: CSSProperties | ((GroupRenderProps & {
defaultStyle: CSSProperties
-})) => CSSProperties | undefined
+})) => CSSProperties
}/react-aria-components:InputProps InputProps {
className?: string | ((InputRenderProps & {
defaultClassName: string | undefined
})) => string
onHoverChange?: (boolean) => void
onHoverEnd?: (HoverEvent) => void
onHoverStart?: (HoverEvent) => void
style?: CSSProperties | ((InputRenderProps & {
defaultStyle: CSSProperties
-})) => CSSProperties | undefined
+})) => CSSProperties
}/react-aria-components:LinkProps LinkProps {
aria-describedby?: string
aria-details?: string
aria-label?: string
aria-labelledby?: string
autoFocus?: boolean
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
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?: CSSProperties | ((LinkRenderProps & {
defaultStyle: CSSProperties
-})) => CSSProperties | undefined
+})) => CSSProperties
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?: string | ((ListBoxRenderProps & {
defaultClassName: string | undefined
})) => string
defaultSelectedKeys?: 'all' | Iterable<Key>
dependencies?: Array<any>
disabledKeys?: Iterable<Key>
disallowEmptySelection?: boolean
dragAndDropHooks?: DragAndDropHooks
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
selectionMode?: SelectionMode
shouldFocusWrap?: boolean
slot?: string | null
style?: CSSProperties | ((ListBoxRenderProps & {
defaultStyle: CSSProperties
-})) => CSSProperties | undefined
+})) => CSSProperties
}/react-aria-components:ListBoxItemProps ListBoxItemProps <T = {}> {
aria-label?: string
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?: CSSProperties | ((ListBoxItemRenderProps & {
defaultStyle: CSSProperties
-})) => CSSProperties | undefined
+})) => CSSProperties
target?: HTMLAttributeAnchorTarget
textValue?: string
value?: T
}/react-aria-components:MenuItemProps MenuItemProps <T = {}> {
aria-label?: string
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?: CSSProperties | ((MenuItemRenderProps & {
defaultStyle: CSSProperties
-})) => CSSProperties | undefined
+})) => CSSProperties
target?: HTMLAttributeAnchorTarget
textValue?: string
value?: T
}/react-aria-components:MeterProps MeterProps {
aria-describedby?: string
aria-details?: string
aria-label?: string
aria-labelledby?: string
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?: CSSProperties | ((MeterRenderProps & {
defaultStyle: CSSProperties
-})) => CSSProperties | undefined
+})) => CSSProperties
value?: number = 0
valueLabel?: ReactNode
}/react-aria-components:ModalOverlayProps ModalOverlayProps {
UNSTABLE_portalContainer?: Element = document.body
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?: CSSProperties | ((ModalRenderProps & {
defaultStyle: CSSProperties
-})) => CSSProperties | undefined
+})) => CSSProperties
}/react-aria-components:NumberFieldProps NumberFieldProps {
aria-describedby?: string
aria-details?: string
aria-label?: string
aria-labelledby?: string
autoFocus?: boolean
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?: CSSProperties | ((NumberFieldRenderProps & {
defaultStyle: CSSProperties
-})) => CSSProperties | undefined
+})) => CSSProperties
validate?: (number) => ValidationError | boolean | null | undefined
validationBehavior?: 'native' | 'aria' = 'native'
value?: number
}/react-aria-components:OverlayArrowProps OverlayArrowProps {
children?: ReactNode | ((OverlayArrowRenderProps & {
defaultChildren: ReactNode | undefined
})) => ReactNode
className?: string | ((OverlayArrowRenderProps & {
defaultClassName: string | undefined
})) => string
style?: CSSProperties | ((OverlayArrowRenderProps & {
defaultStyle: CSSProperties
-})) => CSSProperties | undefined
+})) => CSSProperties
}/react-aria-components:PopoverProps PopoverProps {
UNSTABLE_portalContainer?: Element = document.body
arrowBoundaryOffset?: number = 0
boundaryElement?: Element = document.body
children?: ReactNode | ((PopoverRenderProps & {
defaultChildren: ReactNode | undefined
})) => ReactNode
className?: string | ((PopoverRenderProps & {
defaultClassName: string | undefined
})) => string
containerPadding?: number = 12
crossOffset?: number = 0
defaultOpen?: boolean
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?: CSSProperties | ((PopoverRenderProps & {
defaultStyle: CSSProperties
-})) => CSSProperties | undefined
+})) => CSSProperties
trigger?: string
triggerRef?: RefObject<Element | null>
}/react-aria-components:ProgressBarProps ProgressBarProps {
aria-describedby?: string
aria-details?: string
aria-label?: string
aria-labelledby?: string
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?: CSSProperties | ((ProgressBarRenderProps & {
defaultStyle: CSSProperties
-})) => CSSProperties | undefined
+})) => CSSProperties
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?: 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?: CSSProperties | ((RadioGroupRenderProps & {
defaultStyle: CSSProperties
-})) => CSSProperties | undefined
+})) => CSSProperties
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?: 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?: CSSProperties | ((RadioRenderProps & {
defaultStyle: CSSProperties
-})) => CSSProperties | undefined
+})) => CSSProperties
value: string
}/react-aria-components:SearchFieldProps SearchFieldProps {
aria-activedescendant?: string
aria-autocomplete?: 'none' | 'inline' | 'list' | 'both'
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
autoFocus?: boolean
children?: ReactNode | ((SearchFieldRenderProps & {
defaultChildren: ReactNode | undefined
})) => ReactNode
className?: string | ((SearchFieldRenderProps & {
defaultClassName: string | undefined
})) => string
defaultValue?: string
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<Target>) => void
onChange?: (T) => void
onClear?: () => 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>
onSubmit?: (string) => void
pattern?: string
slot?: string | null
style?: CSSProperties | ((SearchFieldRenderProps & {
defaultStyle: CSSProperties
-})) => CSSProperties | undefined
+})) => CSSProperties
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?: 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) => void
placeholder?: string
selectedKey?: Key | null
slot?: string | null
style?: CSSProperties | ((SelectRenderProps & {
defaultStyle: CSSProperties
-})) => CSSProperties | undefined
+})) => CSSProperties
validate?: (Key) => ValidationError | boolean | null | undefined
validationBehavior?: 'native' | 'aria' = 'native'
}/react-aria-components:SelectValueProps SelectValueProps <T extends {}> {
children?: ReactNode | ((SelectValueRenderProps<{}> & {
defaultChildren: ReactNode | undefined
})) => ReactNode
className?: string | ((SelectValueRenderProps<{}> & {
defaultClassName: string | undefined
})) => string
style?: CSSProperties | ((SelectValueRenderProps<{}> & {
defaultStyle: CSSProperties
-})) => CSSProperties | undefined
+})) => CSSProperties
}/react-aria-components:SliderOutputProps SliderOutputProps {
children?: ReactNode | ((SliderRenderProps & {
defaultChildren: ReactNode | undefined
})) => ReactNode
className?: string | ((SliderRenderProps & {
defaultClassName: string | undefined
})) => string
style?: CSSProperties | ((SliderRenderProps & {
defaultStyle: CSSProperties
-})) => CSSProperties | undefined
+})) => CSSProperties
}/react-aria-components:SliderProps SliderProps <T = number | Array<number>> {
aria-describedby?: string
aria-details?: string
aria-label?: string
aria-labelledby?: string
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?: CSSProperties | ((SliderRenderProps & {
defaultStyle: CSSProperties
-})) => CSSProperties | undefined
+})) => CSSProperties
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?: 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?: CSSProperties | ((SliderThumbRenderProps & {
defaultStyle: CSSProperties
-})) => CSSProperties | undefined
+})) => CSSProperties
}/react-aria-components:SliderTrackProps SliderTrackProps {
children?: ReactNode | ((SliderTrackRenderProps & {
defaultChildren: ReactNode | undefined
})) => ReactNode
className?: string | ((SliderTrackRenderProps & {
defaultClassName: string | undefined
})) => string
onHoverChange?: (boolean) => void
onHoverEnd?: (HoverEvent) => void
onHoverStart?: (HoverEvent) => void
style?: CSSProperties | ((SliderTrackRenderProps & {
defaultStyle: CSSProperties
-})) => CSSProperties | undefined
+})) => CSSProperties
}/react-aria-components:SwitchProps SwitchProps {
aria-controls?: string
aria-describedby?: string
aria-details?: string
aria-label?: string
aria-labelledby?: string
autoFocus?: boolean
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?: CSSProperties | ((SwitchRenderProps & {
defaultStyle: CSSProperties
-})) => CSSProperties | undefined
+})) => CSSProperties
value?: string
}/react-aria-components:TableProps TableProps {
aria-describedby?: string
aria-details?: string
aria-label?: string
aria-labelledby?: string
children?: ReactNode
className?: string | ((TableRenderProps & {
defaultClassName: string | undefined
})) => string
defaultSelectedKeys?: 'all' | Iterable<Key>
disabledBehavior?: DisabledBehavior = "selection"
disabledKeys?: Iterable<Key>
disallowEmptySelection?: boolean
dragAndDropHooks?: DragAndDropHooks
onRowAction?: (Key) => void
onScroll?: (UIEvent<Element>) => void
onSelectionChange?: (Selection) => void
onSortChange?: (SortDescriptor) => any
selectedKeys?: 'all' | Iterable<Key>
selectionBehavior?: SelectionBehavior = "toggle"
selectionMode?: SelectionMode
slot?: string | null
sortDescriptor?: SortDescriptor
style?: CSSProperties | ((TableRenderProps & {
defaultStyle: CSSProperties
-})) => CSSProperties | undefined
+})) => CSSProperties
}/react-aria-components:TableHeaderProps TableHeaderProps <T> {
children?: ReactNode | (T) => ReactElement
className?: string | ((TableHeaderRenderProps & {
defaultClassName: string | undefined
})) => string
columns?: Array<T>
dependencies?: Array<any>
onHoverChange?: (boolean) => void
onHoverEnd?: (HoverEvent) => void
onHoverStart?: (HoverEvent) => void
style?: CSSProperties | ((TableHeaderRenderProps & {
defaultStyle: CSSProperties
-})) => CSSProperties | undefined
+})) => CSSProperties
}/react-aria-components:TableBodyProps TableBodyProps <T> {
children?: ReactNode | (T) => ReactNode
className?: string | ((TableBodyRenderProps & {
defaultClassName: string | undefined
})) => string
dependencies?: Array<any>
disabledKeys?: Iterable<Key>
items?: Iterable<T>
renderEmptyState?: (TableBodyRenderProps) => ReactNode
style?: CSSProperties | ((TableBodyRenderProps & {
defaultStyle: CSSProperties
-})) => CSSProperties | undefined
+})) => CSSProperties
}/react-aria-components:ColumnProps ColumnProps {
allowsSorting?: boolean
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?: CSSProperties | ((ColumnRenderProps & {
defaultStyle: CSSProperties
-})) => CSSProperties | undefined
+})) => CSSProperties
textValue?: string
width?: ColumnSize | null
}/react-aria-components:ColumnResizerProps ColumnResizerProps {
aria-label?: string
children?: ReactNode | ((ColumnResizerRenderProps & {
defaultChildren: ReactNode | undefined
})) => ReactNode
className?: string | ((ColumnResizerRenderProps & {
defaultClassName: string | undefined
})) => string
onHoverChange?: (boolean) => void
onHoverEnd?: (HoverEvent) => void
onHoverStart?: (HoverEvent) => void
style?: CSSProperties | ((ColumnResizerRenderProps & {
defaultStyle: CSSProperties
-})) => CSSProperties | undefined
+})) => CSSProperties
}/react-aria-components:RowProps RowProps <T> {
children?: ReactNode | (T) => ReactElement
className?: string | ((RowRenderProps & {
defaultClassName: string | undefined
})) => string
columns?: Iterable<T>
dependencies?: Array<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?: CSSProperties | ((RowRenderProps & {
defaultStyle: CSSProperties
-})) => CSSProperties | undefined
+})) => CSSProperties
target?: HTMLAttributeAnchorTarget
textValue?: string
value?: T
}/react-aria-components:CellProps CellProps {
children?: ReactNode | ((CellRenderProps & {
defaultChildren: ReactNode | undefined
})) => ReactNode
className?: string | ((CellRenderProps & {
defaultClassName: string | undefined
})) => string
id?: Key
style?: CSSProperties | ((CellRenderProps & {
defaultStyle: CSSProperties
-})) => CSSProperties | undefined
+})) => CSSProperties
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?: string | ((TabListRenderProps & {
defaultClassName: string | undefined
})) => string
dependencies?: Array<any>
items?: Iterable<T>
style?: CSSProperties | ((TabListRenderProps & {
defaultStyle: CSSProperties
-})) => CSSProperties | undefined
+})) => CSSProperties
}/react-aria-components:TabPanelProps TabPanelProps {
aria-describedby?: string
aria-details?: string
aria-label?: string
aria-labelledby?: string
children?: ReactNode | ((TabPanelRenderProps & {
defaultChildren: ReactNode | undefined
})) => ReactNode
className?: string | ((TabPanelRenderProps & {
defaultClassName: string | undefined
})) => string
id?: string
shouldForceMount?: boolean = false
style?: CSSProperties | ((TabPanelRenderProps & {
defaultStyle: CSSProperties
-})) => CSSProperties | undefined
+})) => CSSProperties
}/react-aria-components:TabProps TabProps {
aria-describedby?: string
aria-details?: string
aria-label?: string
aria-labelledby?: string
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?: CSSProperties | ((TabRenderProps & {
defaultStyle: CSSProperties
-})) => CSSProperties | undefined
+})) => CSSProperties
target?: HTMLAttributeAnchorTarget
}/react-aria-components:TabsProps TabsProps {
aria-describedby?: string
aria-details?: string
aria-label?: string
aria-labelledby?: string
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?: CSSProperties | ((TabsRenderProps & {
defaultStyle: CSSProperties
-})) => CSSProperties | undefined
+})) => CSSProperties
}/react-aria-components:TagListProps TagListProps <T> {
children?: ReactNode | (T) => ReactNode
className?: string | ((TagListRenderProps & {
defaultClassName: string | undefined
})) => string
dependencies?: Array<any>
items?: Iterable<T>
renderEmptyState?: (TagListRenderProps) => ReactNode
style?: CSSProperties | ((TagListRenderProps & {
defaultStyle: CSSProperties
-})) => CSSProperties | undefined
+})) => CSSProperties
}/react-aria-components:TagProps TagProps {
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?: CSSProperties | ((TagRenderProps & {
defaultStyle: CSSProperties
-})) => CSSProperties | undefined
+})) => CSSProperties
target?: HTMLAttributeAnchorTarget
textValue?: string
}/react-aria-components:TextAreaProps TextAreaProps {
className?: string | ((InputRenderProps & {
defaultClassName: string | undefined
})) => string
onHoverChange?: (boolean) => void
onHoverEnd?: (HoverEvent) => void
onHoverStart?: (HoverEvent) => void
style?: CSSProperties | ((InputRenderProps & {
defaultStyle: CSSProperties
-})) => CSSProperties | undefined
+})) => CSSProperties
}/react-aria-components:TextFieldProps TextFieldProps {
aria-activedescendant?: string
aria-autocomplete?: 'none' | 'inline' | 'list' | 'both'
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
autoFocus?: boolean
children?: ReactNode | ((TextFieldRenderProps & {
defaultChildren: ReactNode | undefined
})) => ReactNode
className?: string | ((TextFieldRenderProps & {
defaultClassName: string | undefined
})) => string
defaultValue?: string
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<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>
pattern?: string
slot?: string | null
style?: CSSProperties | ((TextFieldRenderProps & {
defaultStyle: CSSProperties
-})) => CSSProperties | undefined
+})) => CSSProperties
type?: 'text' | 'search' | 'url' | 'tel' | 'email' | 'password' | (string & {
})
validate?: (string) => ValidationError | boolean | null | undefined
value?: string
}/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?: ReactNode | ((ToggleButtonRenderProps & {
defaultChildren: ReactNode | undefined
})) => ReactNode
className?: string | ((ToggleButtonRenderProps & {
defaultClassName: string | undefined
})) => string
defaultSelected?: boolean
excludeFromTabOrder?: boolean
id?: string
isDisabled?: boolean
isSelected?: boolean
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
onPress?: (PressEvent) => void
onPressChange?: (boolean) => void
onPressEnd?: (PressEvent) => void
onPressStart?: (PressEvent) => void
onPressUp?: (PressEvent) => void
preventFocusOnPress?: boolean
slot?: string | null
style?: CSSProperties | ((ToggleButtonRenderProps & {
defaultStyle: CSSProperties
-})) => CSSProperties | undefined
+})) => CSSProperties
type?: 'button' | 'submit' | 'reset' = 'button'
}/react-aria-components:ToolbarProps ToolbarProps {
aria-describedby?: string
aria-details?: string
aria-label?: string
aria-labelledby?: string
children?: ReactNode | ((ToolbarRenderProps & {
defaultChildren: ReactNode | undefined
})) => ReactNode
className?: string | ((ToolbarRenderProps & {
defaultClassName: string | undefined
})) => string
orientation?: Orientation = 'horizontal'
slot?: string | null
style?: CSSProperties | ((ToolbarRenderProps & {
defaultStyle: CSSProperties
-})) => CSSProperties | undefined
+})) => CSSProperties
}/react-aria-components:TooltipProps TooltipProps {
UNSTABLE_portalContainer?: Element = document.body
aria-describedby?: string
aria-details?: string
aria-label?: string
aria-labelledby?: string
arrowBoundaryOffset?: number = 0
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?: CSSProperties | ((TooltipRenderProps & {
defaultStyle: CSSProperties
-})) => CSSProperties | undefined
+})) => CSSProperties
triggerRef?: RefObject<Element | null>
}/react-aria-components:TreeProps TreeProps <T> {
aria-describedby?: string
aria-details?: string
aria-label?: string
aria-labelledby?: string
children?: ReactNode | (T) => ReactNode
className?: string | ((TreeRenderProps & {
defaultClassName: string | undefined
})) => string
defaultExpandedKeys?: Iterable<Key>
defaultSelectedKeys?: 'all' | Iterable<Key>
dependencies?: Array<any>
disabledBehavior?: DisabledBehavior = 'selection'
disabledKeys?: Iterable<Key>
disallowEmptySelection?: boolean
expandedKeys?: Iterable<Key>
id?: string
items?: Iterable<T>
onAction?: (Key) => void
onExpandedChange?: (Set<Key>) => any
onScroll?: (UIEvent<Element>) => void
onSelectionChange?: (Selection) => void
renderEmptyState?: (TreeRenderProps<TreeRenderProps, 'isEmpty'>) => ReactNode
selectedKeys?: 'all' | Iterable<Key>
selectionBehavior?: SelectionBehavior
selectionMode?: SelectionMode
slot?: string | null
style?: CSSProperties | ((TreeRenderProps & {
defaultStyle: CSSProperties
-})) => CSSProperties | undefined
+})) => CSSProperties
}/react-aria-components:TreeItemProps TreeItemProps <T = {}> {
aria-label?: string
children: ReactNode
className?: string | ((TreeItemRenderProps & {
defaultClassName: string | undefined
})) => string
download?: boolean | string
href?: Href
hrefLang?: string
id?: Key
onHoverChange?: (boolean) => void
onHoverEnd?: (HoverEvent) => void
onHoverStart?: (HoverEvent) => void
ping?: string
referrerPolicy?: HTMLAttributeReferrerPolicy
rel?: string
routerOptions?: RouterOptions
style?: CSSProperties | ((TreeItemRenderProps & {
defaultStyle: CSSProperties
-})) => CSSProperties | undefined
+})) => CSSProperties
target?: HTMLAttributeAnchorTarget
textValue: string
value?: T
}/react-aria-components:DropIndicatorProps DropIndicatorProps {
children?: ReactNode | ((DropIndicatorRenderProps & {
defaultChildren: ReactNode | undefined
})) => ReactNode
className?: string | ((DropIndicatorRenderProps & {
defaultClassName: string | undefined
})) => string
style?: CSSProperties | ((DropIndicatorRenderProps & {
defaultStyle: CSSProperties
-})) => CSSProperties | undefined
+})) => CSSProperties
target: DropTarget
}/react-aria-components:VirtualizerProps-VirtualizerProps <O> {
+VirtualizerProps {
children: ReactNode
- layout: ILayout<O>
- layoutOptions?: O
+ layout: ILayout<any>
}@react-spectrum/s2/@react-spectrum/s2:ActionMenu ActionMenu <T extends {}> {
UNSAFE_className?: string
UNSAFE_style?: CSSProperties
align?: 'start' | 'end' = 'start'
aria-describedby?: string
aria-details?: string
aria-label?: string
aria-labelledby?: string
autoFocus?: boolean
children?: ReactNode | (T) => ReactNode
defaultOpen?: boolean
direction?: 'bottom' | 'top' | 'left' | 'right' | 'start' | 'end' = 'bottom'
disabledKeys?: Iterable<Key>
id?: string
isDisabled?: boolean
isOpen?: boolean
isQuiet?: boolean
items?: Iterable<T>
- menuSize?: 'S' | 'M' | 'L' | 'XL'
onAction?: (Key) => void
onOpenChange?: (boolean) => void
shouldFlip?: boolean = true
- size?: 'XS' | 'S' | 'M' | 'L' | 'XL' = 'M'
+ size?: 'S' | 'M' | 'L' | 'XL' = 'M'
styles?: StylesProp
}/@react-spectrum/s2:Card-Card {
- UNSAFE_className?: string
- UNSAFE_style?: CSSProperties
- children: ReactNode | (CardRenderProps) => ReactNode
- density?: 'compact' | 'regular' | 'spacious' = 'regular'
- download?: boolean | string
- href?: Href
- hrefLang?: string
- id?: Key
- isDisabled?: boolean
- onAction?: () => void
- onHoverChange?: (boolean) => void
- onHoverEnd?: (HoverEvent) => void
- onHoverStart?: (HoverEvent) => void
- ping?: string
- referrerPolicy?: HTMLAttributeReferrerPolicy
- rel?: string
- routerOptions?: RouterOptions
- size?: 'XS' | 'S' | 'M' | 'L' | 'XL' = 'M'
- styles?: StylesProp
- target?: HTMLAttributeAnchorTarget
- textValue?: string
- value?: T
- variant?: 'primary' | 'secondary' | 'tertiary' | 'quiet' = 'primary'
-}/@react-spectrum/s2:CardPreview-CardPreview {
- UNSAFE_className?: string
- UNSAFE_style?: CSSProperties
- children: ReactNode
- id?: string
-}/@react-spectrum/s2:CollectionCardPreview-CollectionCardPreview {
- UNSAFE_className?: string
- UNSAFE_style?: CSSProperties
- children: ReactNode
- id?: string
-}/@react-spectrum/s2:AssetCard-AssetCard {
- UNSAFE_className?: string
- UNSAFE_style?: CSSProperties
- children: ReactNode | (CardRenderProps) => ReactNode
- 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
- size?: 'XS' | 'S' | 'M' | 'L' | 'XL' = 'M'
- styles?: StylesProp
- target?: HTMLAttributeAnchorTarget
- textValue?: string
- value?: T
- variant?: 'primary' | 'secondary' | 'tertiary' | 'quiet' = 'primary'
-}/@react-spectrum/s2:UserCard-UserCard {
- UNSAFE_className?: string
- UNSAFE_style?: CSSProperties
- children: ReactNode | (CardRenderProps) => ReactNode
- density?: 'compact' | 'regular' | 'spacious' = 'regular'
- 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
- size?: 'XS' | 'S' | 'M' | 'L' | 'XL' = 'M'
- styles?: StylesProp
- target?: HTMLAttributeAnchorTarget
- textValue?: string
- value?: T
- variant?: 'primary' | 'secondary' | 'tertiary' | 'quiet' = 'primary'
-}/@react-spectrum/s2:ProductCard-ProductCard {
- UNSAFE_className?: string
- UNSAFE_style?: CSSProperties
- children: ReactNode | (CardRenderProps) => ReactNode
- 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
- size?: 'XS' | 'S' | 'M' | 'L' | 'XL' = 'M'
- styles?: StylesProp
- target?: HTMLAttributeAnchorTarget
- textValue?: string
- value?: T
- variant?: 'primary' | 'secondary' | 'tertiary'
-}/@react-spectrum/s2:CardContext-CardContext {
- UNTYPED
-}/@react-spectrum/s2:CardView-CardView <T extends {}> {
- UNSAFE_className?: string
- UNSAFE_style?: CSSProperties
- aria-describedby?: string
- aria-details?: string
- aria-label?: string
- aria-labelledby?: string
- children?: ReactNode | (T) => ReactNode
- defaultSelectedKeys?: 'all' | Iterable<Key>
- density?: 'compact' | 'regular' | 'spacious' = 'regular'
- dependencies?: Array<any>
- disabledBehavior?: DisabledBehavior
- disabledKeys?: Iterable<Key>
- disallowEmptySelection?: boolean
- 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
- renderEmptyState?: (GridListRenderProps) => ReactNode
- selectedKeys?: 'all' | Iterable<Key>
- selectionMode?: SelectionMode
- selectionStyle?: 'checkbox' | 'highlight' = 'checkbox'
- size?: 'XS' | 'S' | 'M' | 'L' | 'XL' = 'M'
- slot?: string | null
- styles?: StylesPropWithHeight
- variant?: 'primary' | 'secondary' | 'tertiary' | 'quiet' = 'primary'
-}/@react-spectrum/s2:Image Image {
- props: ImageProps
- domRef: ForwardedRef<HTMLDivElement>
- returnVal: undefined
+ UNTYPED
}/@react-spectrum/s2:ImageCoordinator-ImageCoordinator {
- children: ReactNode
- group?: ImageGroup
- timeout?: number = 5000
-}/@react-spectrum/s2:Skeleton-Skeleton {
- children: ReactNode
- isLoading: boolean
-}/@react-spectrum/s2:useIsSkeleton-useIsSkeleton {
- returnVal: undefined
-}/@react-spectrum/s2:SkeletonCollection-SkeletonCollection {
- props: SkeletonCollectionProps
- ref: any
- node: any
- returnVal: undefined
-}/@react-spectrum/s2:ActionMenuProps ActionMenuProps <T> {
UNSAFE_className?: string
UNSAFE_style?: CSSProperties
align?: 'start' | 'end' = 'start'
aria-describedby?: string
aria-details?: string
aria-label?: string
aria-labelledby?: string
autoFocus?: boolean
children?: ReactNode | (T) => ReactNode
defaultOpen?: boolean
direction?: 'bottom' | 'top' | 'left' | 'right' | 'start' | 'end' = 'bottom'
disabledKeys?: Iterable<Key>
id?: string
isDisabled?: boolean
isOpen?: boolean
isQuiet?: boolean
items?: Iterable<T>
- menuSize?: 'S' | 'M' | 'L' | 'XL'
onAction?: (Key) => void
onOpenChange?: (boolean) => void
shouldFlip?: boolean = true
- size?: 'XS' | 'S' | 'M' | 'L' | 'XL' = 'M'
+ size?: 'S' | 'M' | 'L' | 'XL' = 'M'
styles?: StylesProp
}/@react-spectrum/s2:CardProps-CardProps {
- UNSAFE_className?: string
- UNSAFE_style?: CSSProperties
- children: ReactNode | (CardRenderProps) => ReactNode
- density?: 'compact' | 'regular' | 'spacious' = 'regular'
- download?: boolean | string
- href?: Href
- hrefLang?: string
- id?: Key
- isDisabled?: boolean
- onAction?: () => void
- onHoverChange?: (boolean) => void
- onHoverEnd?: (HoverEvent) => void
- onHoverStart?: (HoverEvent) => void
- ping?: string
- referrerPolicy?: HTMLAttributeReferrerPolicy
- rel?: string
- routerOptions?: RouterOptions
- size?: 'XS' | 'S' | 'M' | 'L' | 'XL' = 'M'
- styles?: StylesProp
- target?: HTMLAttributeAnchorTarget
- textValue?: string
- value?: T
- variant?: 'primary' | 'secondary' | 'tertiary' | 'quiet' = 'primary'
-}/@react-spectrum/s2:CardPreviewProps-CardPreviewProps {
- UNSAFE_className?: string
- UNSAFE_style?: CSSProperties
- children: ReactNode
- id?: string
-}/@react-spectrum/s2:AssetCardProps-AssetCardProps {
- UNSAFE_className?: string
- UNSAFE_style?: CSSProperties
- children: ReactNode | (CardRenderProps) => ReactNode
- 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
- size?: 'XS' | 'S' | 'M' | 'L' | 'XL' = 'M'
- styles?: StylesProp
- target?: HTMLAttributeAnchorTarget
- textValue?: string
- value?: T
- variant?: 'primary' | 'secondary' | 'tertiary' | 'quiet' = 'primary'
-}/@react-spectrum/s2:ProductCardProps-ProductCardProps {
- UNSAFE_className?: string
- UNSAFE_style?: CSSProperties
- children: ReactNode | (CardRenderProps) => ReactNode
- 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
- size?: 'XS' | 'S' | 'M' | 'L' | 'XL' = 'M'
- styles?: StylesProp
- target?: HTMLAttributeAnchorTarget
- textValue?: string
- value?: T
- variant?: 'primary' | 'secondary' | 'tertiary'
-}/@react-spectrum/s2:UserCardProps-UserCardProps {
- UNSAFE_className?: string
- UNSAFE_style?: CSSProperties
- children: ReactNode | (CardRenderProps) => ReactNode
- 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
- size?: 'XS' | 'S' | 'M' | 'L' | 'XL' = 'M'
- styles?: StylesProp
- target?: HTMLAttributeAnchorTarget
- textValue?: string
- value?: T
- variant?: 'primary' | 'secondary' | 'tertiary'
-}/@react-spectrum/s2:CardViewProps-CardViewProps <T> {
- UNSAFE_className?: string
- UNSAFE_style?: CSSProperties
- aria-describedby?: string
- aria-details?: string
- aria-label?: string
- aria-labelledby?: string
- children?: ReactNode | (T) => ReactNode
- defaultSelectedKeys?: 'all' | Iterable<Key>
- density?: 'compact' | 'regular' | 'spacious' = 'regular'
- dependencies?: Array<any>
- disabledBehavior?: DisabledBehavior
- disabledKeys?: Iterable<Key>
- disallowEmptySelection?: boolean
- 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
- renderEmptyState?: (GridListRenderProps) => ReactNode
- selectedKeys?: 'all' | Iterable<Key>
- selectionMode?: SelectionMode
- selectionStyle?: 'checkbox' | 'highlight' = 'checkbox'
- size?: 'XS' | 'S' | 'M' | 'L' | 'XL' = 'M'
- slot?: string | null
- styles?: StylesPropWithHeight
- variant?: 'primary' | 'secondary' | 'tertiary' | 'quiet' = 'primary'
-}/@react-spectrum/s2:ImageProps-ImageProps {
- UNSAFE_className?: string
- UNSAFE_style?: CSSProperties
- alt?: string
- crossOrigin?: 'anonymous' | 'use-credentials'
- decoding?: 'async' | 'auto' | 'sync'
- group?: ImageGroup
- loading?: 'eager' | 'lazy'
- referrerPolicy?: HTMLAttributeReferrerPolicy
- renderError?: () => ReactNode
- slot?: string | null
- src?: string
- styles?: StyleString
-}/@react-spectrum/s2:ImageCoordinatorProps-ImageCoordinatorProps {
- children: ReactNode
- group?: ImageGroup
- timeout?: number = 5000
-}/@react-spectrum/s2:SkeletonProps-SkeletonProps {
- children: ReactNode
- isLoading: boolean
-}/@react-spectrum/s2:SkeletonCollectionProps-SkeletonCollectionProps {
- children: () => ReactNode
-}@react-stately/list/@react-stately/list:ListProps ListProps <T> {
allowDuplicateSelectionEvents?: boolean
collection?: Collection<Node<T>>
defaultSelectedKeys?: 'all' | Iterable<Key>
disabledBehavior?: DisabledBehavior
disabledKeys?: Iterable<Key>
disallowEmptySelection?: boolean
filter?: (Iterable<Node<T>>) => Iterable<Node<T>>
- layoutDelegate?: LayoutDelegate
onSelectionChange?: (Selection) => void
selectedKeys?: 'all' | Iterable<Key>
selectionBehavior?: SelectionBehavior
selectionMode?: SelectionMode@react-stately/virtualizer/@react-stately/virtualizer:LayoutInfo LayoutInfo {
allowOverflow: boolean = false
constructor: (string, Key, Rect) => void
- content: any | null
copy: () => LayoutInfo
estimatedSize: boolean
isSticky: boolean
key: Key
parentKey: Key | null
rect: Rect
transform: string | null
type: string
zIndex: number
} |
snowystinger
approved these changes
Sep 20, 2024
5 tasks
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:
RSP