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