chore: Store all macro data on the client#9771
Open
snowystinger wants to merge 5 commits intomainfrom
Open
Conversation
|
Build successful! 🎉 |
|
Build successful! 🎉 |
## API Changes
react-aria-components/react-aria-components:RangeCalendar RangeCalendar <T extends DateValue> {
allowsNonContiguousRanges?: boolean
aria-describedby?: string
aria-details?: string
aria-label?: string
aria-labelledby?: string
autoFocus?: boolean = false
children?: ChildrenOrFunction<RangeCalendarRenderProps>
className?: ClassNameOrFunction<RangeCalendarRenderProps> = 'react-aria-RangeCalendar'
createCalendar?: (CalendarIdentifier) => Calendar
defaultFocusedValue?: DateValue | null
defaultValue?: RangeValue<DateValue> | null
firstDayOfWeek?: 'sun' | 'mon' | 'tue' | 'wed' | 'thu' | 'fri' | 'sat'
focusedValue?: DateValue | null
id?: string
- interactOutsideBehavior?: 'clear' | 'reset' | 'select' = 'select'
isDateUnavailable?: (DateValue) => boolean
isDisabled?: boolean = false
isInvalid?: boolean
isReadOnly?: boolean = false
minValue?: DateValue | null
onChange?: (RangeValue<MappedDateValue<DateValue>>) => void
onFocusChange?: (CalendarDate) => void
pageBehavior?: PageBehavior = visible
render?: DOMRenderFunction<keyof React.JSX.IntrinsicElements, RangeCalendarRenderProps>
selectionAlignment?: 'start' | 'center' | 'end' = 'center'
slot?: string | null
style?: StyleOrFunction<RangeCalendarRenderProps>
value?: RangeValue<DateValue> | null
visibleDuration?: DateDuration = {months: 1}
}/react-aria-components:ComboBox ComboBox <M extends SelectionMode = 'single', T extends {}> {
allowsCustomValue?: boolean
allowsEmptyCollection?: boolean
aria-describedby?: string
aria-details?: string
aria-label?: string
aria-labelledby?: string
autoFocus?: boolean
children?: ChildrenOrFunction<ComboBoxRenderProps>
className?: ClassNameOrFunction<ComboBoxRenderProps> = 'react-aria-ComboBox'
defaultFilter?: (string, string) => boolean
defaultInputValue?: string
defaultItems?: Iterable<T>
defaultValue?: ValueType<SelectionMode>
disabledKeys?: Iterable<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
- onChange?: (ChangeValueType<SelectionMode>) => void
+ onChange?: (T) => void
onFocus?: (FocusEvent<HTMLInputElement>) => void
onFocusChange?: (boolean) => void
onInputChange?: (string) => void
onKeyDown?: (KeyboardEvent) => void
onKeyUp?: (KeyboardEvent) => void
onOpenChange?: (boolean, MenuTriggerAction) => void
render?: DOMRenderFunction<keyof React.JSX.IntrinsicElements, ComboBoxRenderProps>
selectionMode?: SelectionMode = 'single'
shouldFocusWrap?: boolean
slot?: string | null
style?: StyleOrFunction<ComboBoxRenderProps>
- validate?: (ComboBoxValidationValue<SelectionMode>) => ValidationError | boolean | null | undefined
+ validate?: (ComboBoxValidationValue) => ValidationError | boolean | null | undefined
validationBehavior?: 'native' | 'aria' = 'native'
value?: ValueType<SelectionMode>
}/react-aria-components:FieldError FieldError {
children?: ChildrenOrFunction<FieldErrorRenderProps>
className?: ClassNameOrFunction<FieldErrorRenderProps> = 'react-aria-FieldError'
- elementType?: string = 'span'
id?: string
render?: DOMRenderFunction<keyof React.JSX.IntrinsicElements, FieldErrorRenderProps>
style?: StyleOrFunction<FieldErrorRenderProps>
}/react-aria-components:GridList GridList <T extends {}> {
aria-describedby?: string
aria-details?: string
aria-label?: string
aria-labelledby?: string
autoFocus?: boolean | FocusStrategy
children?: ReactNode | ({}) => ReactNode
className?: ClassNameOrFunction<GridListRenderProps> = 'react-aria-GridList'
defaultSelectedKeys?: 'all' | Iterable<Key>
dependencies?: ReadonlyArray<any>
disabledBehavior?: DisabledBehavior = "all"
disabledKeys?: Iterable<Key>
disallowEmptySelection?: boolean
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
- orientation?: 'horizontal' | 'vertical' = 'vertical'
render?: DOMRenderFunction<keyof React.JSX.IntrinsicElements, GridListRenderProps>
renderEmptyState?: (GridListRenderProps) => ReactNode
selectedKeys?: 'all' | Iterable<Key>
selectionBehavior?: SelectionBehavior = "toggle"
shouldSelectOnPressUp?: boolean
slot?: string | null
style?: StyleOrFunction<GridListRenderProps>
}/react-aria-components:Select Select <M extends SelectionMode = 'single', T extends {} = {
}> {
allowsEmptyCollection?: boolean
aria-describedby?: string
aria-details?: string
aria-label?: string
aria-labelledby?: string
autoComplete?: string
autoFocus?: boolean
children?: ChildrenOrFunction<SelectRenderProps>
className?: ClassNameOrFunction<SelectRenderProps> = 'react-aria-Select'
defaultOpen?: boolean
defaultValue?: ValueType<SelectionMode>
disabledKeys?: Iterable<Key>
excludeFromTabOrder?: boolean
form?: string
id?: string
isDisabled?: boolean
isInvalid?: boolean
isOpen?: boolean
isRequired?: boolean
name?: string
onBlur?: (FocusEvent<Target>) => void
onChange?: (ChangeValueType<SelectionMode>) => void
onFocus?: (FocusEvent<Target>) => void
onFocusChange?: (boolean) => void
onKeyDown?: (KeyboardEvent) => void
onKeyUp?: (KeyboardEvent) => void
onOpenChange?: (boolean) => void
placeholder?: string = 'Select an item' (localized)
render?: DOMRenderFunction<keyof React.JSX.IntrinsicElements, SelectRenderProps>
selectionMode?: SelectionMode = 'single'
- shouldCloseOnSelect?: boolean
slot?: string | null
style?: StyleOrFunction<SelectRenderProps>
validate?: (ValidationType<SelectionMode>) => ValidationError | boolean | null | undefined
validationBehavior?: 'native' | 'aria' = 'native'
}/react-aria-components:RangeCalendarProps RangeCalendarProps <T extends DateValue> {
allowsNonContiguousRanges?: boolean
aria-describedby?: string
aria-details?: string
aria-label?: string
aria-labelledby?: string
autoFocus?: boolean = false
children?: ChildrenOrFunction<RangeCalendarRenderProps>
className?: ClassNameOrFunction<RangeCalendarRenderProps> = 'react-aria-RangeCalendar'
createCalendar?: (CalendarIdentifier) => Calendar
defaultFocusedValue?: DateValue | null
defaultValue?: RangeValue<DateValue> | null
firstDayOfWeek?: 'sun' | 'mon' | 'tue' | 'wed' | 'thu' | 'fri' | 'sat'
focusedValue?: DateValue | null
id?: string
- interactOutsideBehavior?: 'clear' | 'reset' | 'select' = 'select'
isDateUnavailable?: (DateValue) => boolean
isDisabled?: boolean = false
isInvalid?: boolean
isReadOnly?: boolean = false
minValue?: DateValue | null
onChange?: (RangeValue<MappedDateValue<DateValue>>) => void
onFocusChange?: (CalendarDate) => void
pageBehavior?: PageBehavior = visible
render?: DOMRenderFunction<keyof React.JSX.IntrinsicElements, RangeCalendarRenderProps>
selectionAlignment?: 'start' | 'center' | 'end' = 'center'
slot?: string | null
style?: StyleOrFunction<RangeCalendarRenderProps>
value?: RangeValue<DateValue> | null
visibleDuration?: DateDuration = {months: 1}
}/react-aria-components:ComboBoxProps ComboBoxProps <M extends SelectionMode = 'single', T extends {}> {
allowsCustomValue?: boolean
allowsEmptyCollection?: boolean
aria-describedby?: string
aria-details?: string
aria-label?: string
aria-labelledby?: string
autoFocus?: boolean
children?: ChildrenOrFunction<ComboBoxRenderProps>
className?: ClassNameOrFunction<ComboBoxRenderProps> = 'react-aria-ComboBox'
defaultFilter?: (string, string) => boolean
defaultInputValue?: string
defaultItems?: Iterable<T>
defaultValue?: ValueType<SelectionMode>
disabledKeys?: Iterable<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
- onChange?: (ChangeValueType<SelectionMode>) => void
+ onChange?: (T) => void
onFocus?: (FocusEvent<HTMLInputElement>) => void
onFocusChange?: (boolean) => void
onInputChange?: (string) => void
onKeyDown?: (KeyboardEvent) => void
onKeyUp?: (KeyboardEvent) => void
onOpenChange?: (boolean, MenuTriggerAction) => void
render?: DOMRenderFunction<keyof React.JSX.IntrinsicElements, ComboBoxRenderProps>
selectionMode?: SelectionMode = 'single'
shouldFocusWrap?: boolean
slot?: string | null
style?: StyleOrFunction<ComboBoxRenderProps>
- validate?: (ComboBoxValidationValue<SelectionMode>) => ValidationError | boolean | null | undefined
+ validate?: (ComboBoxValidationValue) => ValidationError | boolean | null | undefined
validationBehavior?: 'native' | 'aria' = 'native'
value?: ValueType<SelectionMode>
}/react-aria-components:FieldErrorProps FieldErrorProps {
children?: ChildrenOrFunction<FieldErrorRenderProps>
className?: ClassNameOrFunction<FieldErrorRenderProps> = 'react-aria-FieldError'
- elementType?: string = 'span'
id?: string
render?: DOMRenderFunction<keyof React.JSX.IntrinsicElements, FieldErrorRenderProps>
style?: StyleOrFunction<FieldErrorRenderProps>
}/react-aria-components:GridListProps GridListProps <T> {
aria-describedby?: string
aria-details?: string
aria-label?: string
aria-labelledby?: string
autoFocus?: boolean | FocusStrategy
children?: ReactNode | (T) => ReactNode
className?: ClassNameOrFunction<GridListRenderProps> = 'react-aria-GridList'
defaultSelectedKeys?: 'all' | Iterable<Key>
dependencies?: ReadonlyArray<any>
disabledBehavior?: DisabledBehavior = "all"
disabledKeys?: Iterable<Key>
disallowEmptySelection?: boolean
disallowTypeAhead?: boolean = false
dragAndDropHooks?: DragAndDropHooks<NoInfer<T>>
escapeKeyBehavior?: 'clearSelection' | 'none' = 'clearSelection'
id?: string
items?: Iterable<T>
keyboardNavigationBehavior?: 'arrow' | 'tab' = 'arrow'
layout?: 'stack' | 'grid' = 'stack'
onAction?: (Key) => void
onSelectionChange?: (Selection) => void
- orientation?: 'horizontal' | 'vertical' = 'vertical'
render?: DOMRenderFunction<keyof React.JSX.IntrinsicElements, GridListRenderProps>
renderEmptyState?: (GridListRenderProps) => ReactNode
selectedKeys?: 'all' | Iterable<Key>
selectionBehavior?: SelectionBehavior = "toggle"
shouldSelectOnPressUp?: boolean
slot?: string | null
style?: StyleOrFunction<GridListRenderProps>
}/react-aria-components:SelectProps SelectProps <M extends SelectionMode = 'single', T extends {} = {
}> {
allowsEmptyCollection?: boolean
aria-describedby?: string
aria-details?: string
aria-label?: string
aria-labelledby?: string
autoComplete?: string
autoFocus?: boolean
children?: ChildrenOrFunction<SelectRenderProps>
className?: ClassNameOrFunction<SelectRenderProps> = 'react-aria-Select'
defaultOpen?: boolean
defaultValue?: ValueType<SelectionMode>
disabledKeys?: Iterable<Key>
excludeFromTabOrder?: boolean
form?: string
id?: string
isDisabled?: boolean
isInvalid?: boolean
isOpen?: boolean
isRequired?: boolean
name?: string
onBlur?: (FocusEvent<Target>) => void
onChange?: (ChangeValueType<SelectionMode>) => void
onFocus?: (FocusEvent<Target>) => void
onFocusChange?: (boolean) => void
onKeyDown?: (KeyboardEvent) => void
onKeyUp?: (KeyboardEvent) => void
onOpenChange?: (boolean) => void
placeholder?: string = 'Select an item' (localized)
render?: DOMRenderFunction<keyof React.JSX.IntrinsicElements, SelectRenderProps>
selectionMode?: SelectionMode = 'single'
- shouldCloseOnSelect?: boolean
slot?: string | null
style?: StyleOrFunction<SelectRenderProps>
validate?: (ValidationType<SelectionMode>) => ValidationError | boolean | null | undefined
validationBehavior?: 'native' | 'aria' = 'native'
}/react-aria-components:TreeEmptyStateRenderProps-TreeEmptyStateRenderProps {
- allowsDragging: boolean
- isFocusVisible: boolean
- isFocused: boolean
- selectionMode: SelectionMode
- state: TreeState<unknown>
-}/react-aria-components:RangeCalendarState RangeCalendarState <T extends DateValue = DateValue> {
anchorDate: CalendarDate | null
- clearSelection: () => void
focusNextDay: () => void
focusNextPage: () => void
focusNextRow: () => void
focusNextSection: (boolean) => void
focusPreviousPage: () => void
focusPreviousRow: () => void
focusPreviousSection: (boolean) => void
focusSectionEnd: () => void
focusSectionStart: () => void
focusedDate: CalendarDate
getDatesInWeek: (number, CalendarDate) => Array<CalendarDate | null>
highlightDate: (CalendarDate) => void
highlightedRange: RangeValue<CalendarDate> | null
isCellDisabled: (CalendarDate) => boolean
isCellFocused: (CalendarDate) => boolean
isCellUnavailable: (CalendarDate) => boolean
isDisabled: boolean
isDragging: boolean
isFocused: boolean
isInvalid: (CalendarDate) => boolean
isNextVisibleRangeInvalid: () => boolean
isPreviousVisibleRangeInvalid: () => boolean
isReadOnly: boolean
isSelected: (CalendarDate) => boolean
isValueInvalid: boolean
maxValue?: DateValue | null
minValue?: DateValue | null
selectDate: (CalendarDate) => void
selectFocusedDate: () => void
setAnchorDate: (CalendarDate | null) => void
setDragging: (boolean) => void
setFocused: (boolean) => void
setFocusedDate: (CalendarDate) => void
setValue: (RangeValue<DateValue> | null) => void
timeZone: string
value: RangeValue<DateValue> | null
visibleRange: RangeValue<CalendarDate>
}@react-aria/calendar/@react-aria/calendar:AriaRangeCalendarProps AriaRangeCalendarProps <T extends DateValue> {
allowsNonContiguousRanges?: boolean
aria-describedby?: string
aria-details?: string
aria-label?: string
aria-labelledby?: string
autoFocus?: boolean = false
defaultFocusedValue?: DateValue | null
defaultValue?: RangeValue<DateValue> | null
errorMessage?: ReactNode
firstDayOfWeek?: 'sun' | 'mon' | 'tue' | 'wed' | 'thu' | 'fri' | 'sat'
focusedValue?: DateValue | null
id?: string
- interactOutsideBehavior?: 'clear' | 'reset' | 'select' = 'select'
isDateUnavailable?: (DateValue) => boolean
isDisabled?: boolean = false
isInvalid?: boolean
isReadOnly?: boolean = false
minValue?: DateValue | null
onChange?: (RangeValue<MappedDateValue<DateValue>>) => void
onFocusChange?: (CalendarDate) => void
pageBehavior?: PageBehavior = visible
selectionAlignment?: 'start' | 'center' | 'end' = 'center'
value?: RangeValue<DateValue> | null
}@react-aria/combobox/@react-aria/combobox:AriaComboBoxOptions AriaComboBoxOptions <M extends SelectionMode = 'single', T> {
allowsCustomValue?: boolean
aria-describedby?: string
aria-details?: string
aria-label?: string
aria-labelledby?: string
autoFocus?: boolean
buttonRef?: RefObject<Element | null>
defaultInputValue?: string
defaultItems?: Iterable<T>
defaultValue?: ValueType<SelectionMode>
description?: ReactNode
disabledKeys?: Iterable<Key>
errorMessage?: ReactNode | (ValidationResult) => ReactNode
form?: string
id?: string
inputRef: RefObject<HTMLInputElement | null>
inputValue?: string
isDisabled?: boolean
isInvalid?: boolean
isReadOnly?: boolean
isRequired?: boolean
items?: Iterable<T>
keyboardDelegate?: KeyboardDelegate
label?: ReactNode
layoutDelegate?: LayoutDelegate
listBoxRef: RefObject<HTMLElement | null>
menuTrigger?: MenuTriggerAction = 'input'
name?: string
onBlur?: (FocusEvent<HTMLInputElement>) => void
- onChange?: (ChangeValueType<SelectionMode>) => void
+ onChange?: (T) => void
onFocus?: (FocusEvent<HTMLInputElement>) => void
onFocusChange?: (boolean) => void
onInputChange?: (string) => void
onKeyDown?: (KeyboardEvent) => void
onKeyUp?: (KeyboardEvent) => void
onOpenChange?: (boolean, MenuTriggerAction) => void
placeholder?: string
popoverRef: RefObject<Element | null>
selectionMode?: SelectionMode = 'single'
shouldFocusWrap?: boolean
- validate?: (ComboBoxValidationValue<SelectionMode>) => ValidationError | boolean | null | undefined
+ validate?: (ComboBoxValidationValue) => ValidationError | boolean | null | undefined
validationBehavior?: 'aria' | 'native' = 'aria'
value?: ValueType<SelectionMode>
}/@react-aria/combobox:AriaComboBoxProps AriaComboBoxProps <M extends SelectionMode = 'single', T> {
allowsCustomValue?: boolean
aria-describedby?: string
aria-details?: string
aria-label?: string
aria-labelledby?: string
autoFocus?: boolean
children: CollectionChildren<T>
defaultInputValue?: string
defaultItems?: Iterable<T>
defaultValue?: ValueType<SelectionMode>
description?: ReactNode
disabledKeys?: Iterable<Key>
errorMessage?: ReactNode | (ValidationResult) => ReactNode
form?: string
id?: string
inputValue?: string
isDisabled?: boolean
isInvalid?: boolean
isReadOnly?: boolean
isRequired?: boolean
items?: Iterable<T>
label?: ReactNode
menuTrigger?: MenuTriggerAction = 'input'
name?: string
onBlur?: (FocusEvent<HTMLInputElement>) => void
- onChange?: (ChangeValueType<SelectionMode>) => void
+ onChange?: (T) => void
onFocus?: (FocusEvent<HTMLInputElement>) => void
onFocusChange?: (boolean) => void
onInputChange?: (string) => void
onKeyDown?: (KeyboardEvent) => void
onKeyUp?: (KeyboardEvent) => void
onOpenChange?: (boolean, MenuTriggerAction) => void
placeholder?: string
selectionMode?: SelectionMode = 'single'
shouldFocusWrap?: boolean
- validate?: (ComboBoxValidationValue<SelectionMode>) => ValidationError | boolean | null | undefined
+ validate?: (ComboBoxValidationValue) => ValidationError | boolean | null | undefined
validationBehavior?: 'aria' | 'native' = 'aria'
value?: ValueType<SelectionMode>
}@react-aria/select/@react-aria/select:AriaSelectOptions AriaSelectOptions <M extends SelectionMode = 'single', T> {
allowsEmptyCollection?: boolean
aria-describedby?: string
aria-details?: string
aria-label?: string
aria-labelledby?: string
autoComplete?: string
autoFocus?: boolean
defaultOpen?: boolean
defaultValue?: ValueType<SelectionMode>
description?: ReactNode
disabledKeys?: Iterable<Key>
errorMessage?: ReactNode | (ValidationResult) => ReactNode
excludeFromTabOrder?: boolean
form?: string
id?: string
isDisabled?: boolean
isInvalid?: boolean
isOpen?: boolean
isRequired?: boolean
items?: Iterable<T>
keyboardDelegate?: KeyboardDelegate
label?: ReactNode
name?: string
onBlur?: (FocusEvent<Target>) => void
onChange?: (ChangeValueType<SelectionMode>) => void
onFocus?: (FocusEvent<Target>) => void
onFocusChange?: (boolean) => void
onKeyDown?: (KeyboardEvent) => void
onKeyUp?: (KeyboardEvent) => void
onOpenChange?: (boolean) => void
placeholder?: string
selectionMode?: SelectionMode = 'single'
- shouldCloseOnSelect?: boolean
validate?: (ValidationType<SelectionMode>) => ValidationError | boolean | null | undefined
validationBehavior?: 'aria' | 'native' = 'aria'
value?: ValueType<SelectionMode>
}/@react-aria/select:AriaSelectProps AriaSelectProps <M extends SelectionMode = 'single', T> {
allowsEmptyCollection?: boolean
aria-describedby?: string
aria-details?: string
aria-label?: string
aria-labelledby?: string
autoComplete?: string
autoFocus?: boolean
children: CollectionChildren<T>
defaultOpen?: boolean
defaultValue?: ValueType<SelectionMode>
description?: ReactNode
disabledKeys?: Iterable<Key>
errorMessage?: ReactNode | (ValidationResult) => ReactNode
excludeFromTabOrder?: boolean
form?: string
id?: string
isDisabled?: boolean
isInvalid?: boolean
isOpen?: boolean
isRequired?: boolean
items?: Iterable<T>
label?: ReactNode
name?: string
onBlur?: (FocusEvent<Target>) => void
onChange?: (ChangeValueType<SelectionMode>) => void
onFocus?: (FocusEvent<Target>) => void
onFocusChange?: (boolean) => void
onKeyDown?: (KeyboardEvent) => void
onKeyUp?: (KeyboardEvent) => void
onOpenChange?: (boolean) => void
placeholder?: string
selectionMode?: SelectionMode = 'single'
- shouldCloseOnSelect?: boolean
validate?: (ValidationType<SelectionMode>) => ValidationError | boolean | null | undefined
validationBehavior?: 'aria' | 'native' = 'aria'
value?: ValueType<SelectionMode>
}@react-aria/utils/@react-aria/utils:getNonce-getNonce {
- doc?: Document
- returnVal: undefined
-}@react-spectrum/calendar/@react-spectrum/calendar:RangeCalendar RangeCalendar <T extends DateValue> {
UNSAFE_className?: string
UNSAFE_style?: CSSProperties
alignSelf?: Responsive<'auto' | 'normal' | 'start' | 'end' | 'center' | 'flex-start' | 'flex-end' | 'self-start' | 'self-end' | 'stretch'>
allowsNonContiguousRanges?: boolean
aria-describedby?: string
aria-details?: string
aria-label?: string
aria-labelledby?: string
autoFocus?: boolean = false
bottom?: Responsive<DimensionValue>
createCalendar?: (CalendarIdentifier) => Calendar
defaultFocusedValue?: DateValue | null
defaultValue?: RangeValue<DateValue> | null
end?: Responsive<DimensionValue>
errorMessage?: ReactNode
firstDayOfWeek?: 'sun' | 'mon' | 'tue' | 'wed' | 'thu' | 'fri' | 'sat'
flex?: Responsive<string | number | boolean>
flexBasis?: Responsive<number | string>
flexGrow?: Responsive<number>
flexShrink?: Responsive<number>
focusedValue?: DateValue | null
gridArea?: Responsive<string>
gridColumn?: Responsive<string>
gridColumnEnd?: Responsive<string>
gridColumnStart?: Responsive<string>
gridRow?: Responsive<string>
gridRowEnd?: Responsive<string>
gridRowStart?: Responsive<string>
height?: Responsive<DimensionValue>
id?: string
- interactOutsideBehavior?: 'clear' | 'reset' | 'select' = 'select'
isDateUnavailable?: (DateValue) => boolean
isDisabled?: boolean = false
isHidden?: Responsive<boolean>
isInvalid?: boolean
justifySelf?: Responsive<'auto' | 'normal' | 'start' | 'end' | 'flex-start' | 'flex-end' | 'self-start' | 'self-end' | 'center' | 'left' | 'right' | 'stretch'>
left?: Responsive<DimensionValue>
margin?: Responsive<DimensionValue>
marginBottom?: Responsive<DimensionValue>
marginEnd?: Responsive<DimensionValue>
marginStart?: Responsive<DimensionValue>
marginTop?: Responsive<DimensionValue>
marginX?: Responsive<DimensionValue>
marginY?: Responsive<DimensionValue>
maxHeight?: Responsive<DimensionValue>
maxValue?: DateValue | null
maxWidth?: Responsive<DimensionValue>
minHeight?: Responsive<DimensionValue>
minValue?: DateValue | null
minWidth?: Responsive<DimensionValue>
onChange?: (RangeValue<MappedDateValue<DateValue>>) => void
onFocusChange?: (CalendarDate) => void
order?: Responsive<number>
pageBehavior?: PageBehavior = visible
position?: Responsive<'static' | 'relative' | 'absolute' | 'fixed' | 'sticky'>
right?: Responsive<DimensionValue>
selectionAlignment?: 'start' | 'center' | 'end' = 'center'
start?: Responsive<DimensionValue>
top?: Responsive<DimensionValue>
value?: RangeValue<DateValue> | null
visibleMonths?: number = 1
width?: Responsive<DimensionValue>
zIndex?: Responsive<number>
}/@react-spectrum/calendar:SpectrumRangeCalendarProps SpectrumRangeCalendarProps <T extends DateValue> {
UNSAFE_className?: string
UNSAFE_style?: CSSProperties
alignSelf?: Responsive<'auto' | 'normal' | 'start' | 'end' | 'center' | 'flex-start' | 'flex-end' | 'self-start' | 'self-end' | 'stretch'>
allowsNonContiguousRanges?: boolean
aria-describedby?: string
aria-details?: string
aria-label?: string
aria-labelledby?: string
autoFocus?: boolean = false
bottom?: Responsive<DimensionValue>
createCalendar?: (CalendarIdentifier) => Calendar
defaultFocusedValue?: DateValue | null
defaultValue?: RangeValue<DateValue> | null
end?: Responsive<DimensionValue>
errorMessage?: ReactNode
firstDayOfWeek?: 'sun' | 'mon' | 'tue' | 'wed' | 'thu' | 'fri' | 'sat'
flex?: Responsive<string | number | boolean>
flexBasis?: Responsive<number | string>
flexGrow?: Responsive<number>
flexShrink?: Responsive<number>
focusedValue?: DateValue | null
gridArea?: Responsive<string>
gridColumn?: Responsive<string>
gridColumnEnd?: Responsive<string>
gridColumnStart?: Responsive<string>
gridRow?: Responsive<string>
gridRowEnd?: Responsive<string>
gridRowStart?: Responsive<string>
height?: Responsive<DimensionValue>
id?: string
- interactOutsideBehavior?: 'clear' | 'reset' | 'select' = 'select'
isDateUnavailable?: (DateValue) => boolean
isDisabled?: boolean = false
isHidden?: Responsive<boolean>
isInvalid?: boolean
justifySelf?: Responsive<'auto' | 'normal' | 'start' | 'end' | 'flex-start' | 'flex-end' | 'self-start' | 'self-end' | 'center' | 'left' | 'right' | 'stretch'>
left?: Responsive<DimensionValue>
margin?: Responsive<DimensionValue>
marginBottom?: Responsive<DimensionValue>
marginEnd?: Responsive<DimensionValue>
marginStart?: Responsive<DimensionValue>
marginTop?: Responsive<DimensionValue>
marginX?: Responsive<DimensionValue>
marginY?: Responsive<DimensionValue>
maxHeight?: Responsive<DimensionValue>
maxValue?: DateValue | null
maxWidth?: Responsive<DimensionValue>
minHeight?: Responsive<DimensionValue>
minValue?: DateValue | null
minWidth?: Responsive<DimensionValue>
onChange?: (RangeValue<MappedDateValue<DateValue>>) => void
onFocusChange?: (CalendarDate) => void
order?: Responsive<number>
pageBehavior?: PageBehavior = visible
position?: Responsive<'static' | 'relative' | 'absolute' | 'fixed' | 'sticky'>
right?: Responsive<DimensionValue>
selectionAlignment?: 'start' | 'center' | 'end' = 'center'
start?: Responsive<DimensionValue>
top?: Responsive<DimensionValue>
value?: RangeValue<DateValue> | null
visibleMonths?: number = 1
width?: Responsive<DimensionValue>
zIndex?: Responsive<number>
}@react-spectrum/combobox/@react-spectrum/combobox:ComboBox ComboBox <T extends {}> {
UNSAFE_className?: string
UNSAFE_style?: CSSProperties
align?: 'start' | 'end' = 'start'
alignSelf?: Responsive<'auto' | 'normal' | 'start' | 'end' | 'center' | 'flex-start' | 'flex-end' | 'self-start' | 'self-end' | 'stretch'>
allowsCustomValue?: boolean
aria-describedby?: string
aria-details?: string
aria-label?: string
aria-labelledby?: string
autoFocus?: boolean
bottom?: Responsive<DimensionValue>
children: CollectionChildren<{}>
contextualHelp?: ReactNode
defaultInputValue?: string
defaultItems?: Iterable<{}>
defaultSelectedKey?: Key | null
description?: ReactNode
direction?: 'bottom' | 'top' = 'bottom'
disabledKeys?: Iterable<Key>
end?: Responsive<DimensionValue>
errorMessage?: ReactNode | (ValidationResult) => ReactNode
flex?: Responsive<string | number | boolean>
flexBasis?: Responsive<number | string>
flexGrow?: Responsive<number>
flexShrink?: Responsive<number>
form?: string
formValue?: 'text' | 'key' = 'text'
gridArea?: Responsive<string>
gridColumn?: Responsive<string>
gridColumnEnd?: Responsive<string>
gridColumnStart?: Responsive<string>
gridRow?: Responsive<string>
gridRowEnd?: Responsive<string>
gridRowStart?: Responsive<string>
height?: Responsive<DimensionValue>
id?: string
inputValue?: string
isDisabled?: boolean
isHidden?: Responsive<boolean>
isQuiet?: boolean
isReadOnly?: boolean
isRequired?: boolean
items?: Iterable<{}>
justifySelf?: Responsive<'auto' | 'normal' | 'start' | 'end' | 'flex-start' | 'flex-end' | 'self-start' | 'self-end' | 'center' | 'left' | 'right' | 'stretch'>
label?: ReactNode
labelAlign?: Alignment = 'start'
labelPosition?: LabelPosition = 'top'
left?: Responsive<DimensionValue>
loadingState?: LoadingState
margin?: Responsive<DimensionValue>
marginBottom?: Responsive<DimensionValue>
marginEnd?: Responsive<DimensionValue>
marginStart?: Responsive<DimensionValue>
marginTop?: Responsive<DimensionValue>
marginX?: Responsive<DimensionValue>
marginY?: Responsive<DimensionValue>
maxHeight?: Responsive<DimensionValue>
maxWidth?: Responsive<DimensionValue>
menuTrigger?: MenuTriggerAction = 'input'
menuWidth?: DimensionValue
minHeight?: Responsive<DimensionValue>
minWidth?: Responsive<DimensionValue>
name?: string
necessityIndicator?: NecessityIndicator = 'icon'
onBlur?: (FocusEvent<HTMLInputElement>) => void
onFocus?: (FocusEvent<HTMLInputElement>) => void
onFocusChange?: (boolean) => void
onInputChange?: (string) => void
onKeyDown?: (KeyboardEvent) => void
onKeyUp?: (KeyboardEvent) => void
onLoadMore?: () => any
onOpenChange?: (boolean, MenuTriggerAction) => void
onSelectionChange?: (Key | null) => void
order?: Responsive<number>
position?: Responsive<'static' | 'relative' | 'absolute' | 'fixed' | 'sticky'>
right?: Responsive<DimensionValue>
selectedKey?: Key | null
shouldFlip?: boolean = true
shouldFocusWrap?: boolean
start?: Responsive<DimensionValue>
top?: Responsive<DimensionValue>
- validate?: (ComboBoxValidationValue<SelectionMode>) => ValidationError | boolean | null | undefined
+ validate?: (ComboBoxValidationValue) => ValidationError | boolean | null | undefined
validationBehavior?: 'aria' | 'native' = 'aria'
validationState?: ValidationState
width?: Responsive<DimensionValue>
zIndex?: Responsive<number>/@react-spectrum/combobox:SpectrumComboBoxProps SpectrumComboBoxProps <T> {
UNSAFE_className?: string
UNSAFE_style?: CSSProperties
align?: 'start' | 'end' = 'start'
alignSelf?: Responsive<'auto' | 'normal' | 'start' | 'end' | 'center' | 'flex-start' | 'flex-end' | 'self-start' | 'self-end' | 'stretch'>
allowsCustomValue?: boolean
aria-describedby?: string
aria-details?: string
aria-label?: string
aria-labelledby?: string
autoFocus?: boolean
bottom?: Responsive<DimensionValue>
children: CollectionChildren<T>
contextualHelp?: ReactNode
defaultInputValue?: string
defaultItems?: Iterable<T>
defaultSelectedKey?: Key | null
description?: ReactNode
direction?: 'bottom' | 'top' = 'bottom'
disabledKeys?: Iterable<Key>
end?: Responsive<DimensionValue>
errorMessage?: ReactNode | (ValidationResult) => ReactNode
flex?: Responsive<string | number | boolean>
flexBasis?: Responsive<number | string>
flexGrow?: Responsive<number>
flexShrink?: Responsive<number>
form?: string
formValue?: 'text' | 'key' = 'text'
gridArea?: Responsive<string>
gridColumn?: Responsive<string>
gridColumnEnd?: Responsive<string>
gridColumnStart?: Responsive<string>
gridRow?: Responsive<string>
gridRowEnd?: Responsive<string>
gridRowStart?: Responsive<string>
height?: Responsive<DimensionValue>
id?: string
inputValue?: string
isDisabled?: boolean
isHidden?: Responsive<boolean>
isQuiet?: boolean
isReadOnly?: boolean
isRequired?: boolean
items?: Iterable<T>
justifySelf?: Responsive<'auto' | 'normal' | 'start' | 'end' | 'flex-start' | 'flex-end' | 'self-start' | 'self-end' | 'center' | 'left' | 'right' | 'stretch'>
label?: ReactNode
labelAlign?: Alignment = 'start'
labelPosition?: LabelPosition = 'top'
left?: Responsive<DimensionValue>
loadingState?: LoadingState
margin?: Responsive<DimensionValue>
marginBottom?: Responsive<DimensionValue>
marginEnd?: Responsive<DimensionValue>
marginStart?: Responsive<DimensionValue>
marginTop?: Responsive<DimensionValue>
marginX?: Responsive<DimensionValue>
marginY?: Responsive<DimensionValue>
maxHeight?: Responsive<DimensionValue>
maxWidth?: Responsive<DimensionValue>
menuTrigger?: MenuTriggerAction = 'input'
menuWidth?: DimensionValue
minHeight?: Responsive<DimensionValue>
minWidth?: Responsive<DimensionValue>
name?: string
necessityIndicator?: NecessityIndicator = 'icon'
onBlur?: (FocusEvent<HTMLInputElement>) => void
onFocus?: (FocusEvent<HTMLInputElement>) => void
onFocusChange?: (boolean) => void
onInputChange?: (string) => void
onKeyDown?: (KeyboardEvent) => void
onKeyUp?: (KeyboardEvent) => void
onLoadMore?: () => any
onOpenChange?: (boolean, MenuTriggerAction) => void
onSelectionChange?: (Key | null) => void
order?: Responsive<number>
position?: Responsive<'static' | 'relative' | 'absolute' | 'fixed' | 'sticky'>
right?: Responsive<DimensionValue>
selectedKey?: Key | null
shouldFlip?: boolean = true
shouldFocusWrap?: boolean
start?: Responsive<DimensionValue>
top?: Responsive<DimensionValue>
- validate?: (ComboBoxValidationValue<SelectionMode>) => ValidationError | boolean | null | undefined
+ validate?: (ComboBoxValidationValue) => ValidationError | boolean | null | undefined
validationBehavior?: 'aria' | 'native' = 'aria'
validationState?: ValidationState
width?: Responsive<DimensionValue>
zIndex?: Responsive<number>@react-spectrum/picker/@react-spectrum/picker:Picker Picker <T extends {}> {
UNSAFE_className?: string
UNSAFE_style?: CSSProperties
align?: Alignment = 'start'
alignSelf?: Responsive<'auto' | 'normal' | 'start' | 'end' | 'center' | 'flex-start' | 'flex-end' | 'self-start' | 'self-end' | 'stretch'>
aria-describedby?: string
aria-details?: string
aria-label?: string
aria-labelledby?: string
autoComplete?: string
autoFocus?: boolean
bottom?: Responsive<DimensionValue>
children: CollectionChildren<{}>
contextualHelp?: ReactNode
defaultOpen?: boolean
defaultSelectedKey?: Key | null
description?: ReactNode
direction?: 'bottom' | 'top' = 'bottom'
disabledKeys?: Iterable<Key>
end?: Responsive<DimensionValue>
errorMessage?: ReactNode | (ValidationResult) => ReactNode
excludeFromTabOrder?: boolean
flex?: Responsive<string | number | boolean>
flexBasis?: Responsive<number | string>
flexGrow?: Responsive<number>
flexShrink?: Responsive<number>
form?: string
gridArea?: Responsive<string>
gridColumn?: Responsive<string>
gridColumnEnd?: Responsive<string>
gridColumnStart?: Responsive<string>
gridRow?: Responsive<string>
gridRowEnd?: Responsive<string>
gridRowStart?: Responsive<string>
height?: Responsive<DimensionValue>
id?: string
isDisabled?: boolean
isHidden?: Responsive<boolean>
isInvalid?: boolean
isLoading?: boolean
isOpen?: boolean
isQuiet?: boolean
isRequired?: boolean
items?: Iterable<{}>
justifySelf?: Responsive<'auto' | 'normal' | 'start' | 'end' | 'flex-start' | 'flex-end' | 'self-start' | 'self-end' | 'center' | 'left' | 'right' | 'stretch'>
label?: ReactNode
labelAlign?: Alignment = 'start'
labelPosition?: LabelPosition = 'top'
left?: Responsive<DimensionValue>
margin?: Responsive<DimensionValue>
marginBottom?: Responsive<DimensionValue>
marginEnd?: Responsive<DimensionValue>
marginStart?: Responsive<DimensionValue>
marginTop?: Responsive<DimensionValue>
marginX?: Responsive<DimensionValue>
marginY?: Responsive<DimensionValue>
maxHeight?: Responsive<DimensionValue>
maxWidth?: Responsive<DimensionValue>
menuWidth?: DimensionValue
minHeight?: Responsive<DimensionValue>
minWidth?: Responsive<DimensionValue>
name?: string
necessityIndicator?: NecessityIndicator = 'icon'
onBlur?: (FocusEvent<Target>) => void
onFocus?: (FocusEvent<Target>) => void
onFocusChange?: (boolean) => void
onKeyDown?: (KeyboardEvent) => void
onKeyUp?: (KeyboardEvent) => void
onLoadMore?: () => any
onOpenChange?: (boolean) => void
onSelectionChange?: (Key | null) => void
order?: Responsive<number>
placeholder?: string
position?: Responsive<'static' | 'relative' | 'absolute' | 'fixed' | 'sticky'>
right?: Responsive<DimensionValue>
selectedKey?: Key | null
- shouldCloseOnSelect?: boolean
shouldFlip?: boolean = true
start?: Responsive<DimensionValue>
top?: Responsive<DimensionValue>
validate?: (ValidationType<SelectionMode>) => ValidationError | boolean | null | undefined
width?: Responsive<DimensionValue>
zIndex?: Responsive<number>
}/@react-spectrum/picker:SpectrumPickerProps SpectrumPickerProps <T> {
UNSAFE_className?: string
UNSAFE_style?: CSSProperties
align?: Alignment = 'start'
alignSelf?: Responsive<'auto' | 'normal' | 'start' | 'end' | 'center' | 'flex-start' | 'flex-end' | 'self-start' | 'self-end' | 'stretch'>
aria-describedby?: string
aria-details?: string
aria-label?: string
aria-labelledby?: string
autoComplete?: string
autoFocus?: boolean
bottom?: Responsive<DimensionValue>
children: CollectionChildren<T>
contextualHelp?: ReactNode
defaultOpen?: boolean
defaultSelectedKey?: Key | null
description?: ReactNode
direction?: 'bottom' | 'top' = 'bottom'
disabledKeys?: Iterable<Key>
end?: Responsive<DimensionValue>
errorMessage?: ReactNode | (ValidationResult) => ReactNode
excludeFromTabOrder?: boolean
flex?: Responsive<string | number | boolean>
flexBasis?: Responsive<number | string>
flexGrow?: Responsive<number>
flexShrink?: Responsive<number>
form?: string
gridArea?: Responsive<string>
gridColumn?: Responsive<string>
gridColumnEnd?: Responsive<string>
gridColumnStart?: Responsive<string>
gridRow?: Responsive<string>
gridRowEnd?: Responsive<string>
gridRowStart?: Responsive<string>
height?: Responsive<DimensionValue>
id?: string
isDisabled?: boolean
isHidden?: Responsive<boolean>
isInvalid?: boolean
isLoading?: boolean
isOpen?: boolean
isQuiet?: boolean
isRequired?: boolean
items?: Iterable<T>
justifySelf?: Responsive<'auto' | 'normal' | 'start' | 'end' | 'flex-start' | 'flex-end' | 'self-start' | 'self-end' | 'center' | 'left' | 'right' | 'stretch'>
label?: ReactNode
labelAlign?: Alignment = 'start'
labelPosition?: LabelPosition = 'top'
left?: Responsive<DimensionValue>
margin?: Responsive<DimensionValue>
marginBottom?: Responsive<DimensionValue>
marginEnd?: Responsive<DimensionValue>
marginStart?: Responsive<DimensionValue>
marginTop?: Responsive<DimensionValue>
marginX?: Responsive<DimensionValue>
marginY?: Responsive<DimensionValue>
maxHeight?: Responsive<DimensionValue>
maxWidth?: Responsive<DimensionValue>
menuWidth?: DimensionValue
minHeight?: Responsive<DimensionValue>
minWidth?: Responsive<DimensionValue>
name?: string
necessityIndicator?: NecessityIndicator = 'icon'
onBlur?: (FocusEvent<Target>) => void
onFocus?: (FocusEvent<Target>) => void
onFocusChange?: (boolean) => void
onKeyDown?: (KeyboardEvent) => void
onKeyUp?: (KeyboardEvent) => void
onLoadMore?: () => any
onOpenChange?: (boolean) => void
onSelectionChange?: (Key | null) => void
order?: Responsive<number>
placeholder?: string
position?: Responsive<'static' | 'relative' | 'absolute' | 'fixed' | 'sticky'>
right?: Responsive<DimensionValue>
selectedKey?: Key | null
- shouldCloseOnSelect?: boolean
shouldFlip?: boolean = true
start?: Responsive<DimensionValue>
top?: Responsive<DimensionValue>
validate?: (ValidationType<SelectionMode>) => ValidationError | boolean | null | undefined
width?: Responsive<DimensionValue>
zIndex?: Responsive<number>
}@react-spectrum/s2/@react-spectrum/s2:CardView CardView <T extends {}> {
UNSAFE_className?: UnsafeClassName
UNSAFE_style?: CSSProperties
aria-describedby?: string
aria-details?: string
aria-label?: string
aria-labelledby?: string
autoFocus?: boolean | FocusStrategy
children?: ReactNode | (T) => ReactNode
defaultSelectedKeys?: 'all' | Iterable<Key>
density?: 'compact' | 'regular' | 'spacious' = 'regular'
dependencies?: ReadonlyArray<any>
disabledBehavior?: DisabledBehavior = "all"
disabledKeys?: Iterable<Key>
disallowEmptySelection?: boolean
disallowTypeAhead?: boolean = false
dragAndDropHooks?: DragAndDropHooks<NoInfer<T>>
escapeKeyBehavior?: 'clearSelection' | 'none' = 'clearSelection'
id?: string
items?: Iterable<T>
layout?: 'grid' | 'waterfall' = 'grid'
loadingState?: LoadingState
onAction?: (Key) => void
onLoadMore?: () => void
onSelectionChange?: (Selection) => void
- orientation?: 'horizontal' | 'vertical' = 'vertical'
renderActionBar?: ('all' | Set<Key>) => ReactElement
renderEmptyState?: (GridListRenderProps) => ReactNode
selectedKeys?: 'all' | Iterable<Key>
selectionMode?: SelectionMode
shouldSelectOnPressUp?: boolean
size?: 'XS' | 'S' | 'M' | 'L' | 'XL' = 'M'
slot?: string | null
styles?: StylesPropWithHeight
variant?: 'primary' | 'secondary' | 'tertiary' | 'quiet' = 'primary'
}/@react-spectrum/s2:ComboBox ComboBox <T extends {}> {
UNSAFE_className?: UnsafeClassName
UNSAFE_style?: CSSProperties
align?: 'start' | 'end' = 'start'
allowsCustomValue?: boolean
aria-describedby?: string
aria-details?: string
aria-label?: string
aria-labelledby?: string
autoFocus?: boolean
children: ReactNode | ({}) => ReactNode
contextualHelp?: ReactNode
defaultInputValue?: string
defaultItems?: Iterable<T>
defaultSelectedKey?: Key | null
dependencies?: ReadonlyArray<any>
description?: ReactNode
direction?: 'bottom' | 'top' = 'bottom'
disabledKeys?: Iterable<Key>
errorMessage?: ReactNode | (ValidationResult) => ReactNode
form?: string
formValue?: 'text' | 'key' = 'key'
id?: string
inputValue?: string
isDisabled?: boolean
isInvalid?: boolean
isReadOnly?: boolean
isRequired?: boolean
items?: Iterable<T>
label?: ReactNode
labelAlign?: Alignment = 'start'
labelPosition?: LabelPosition = 'top'
loadingState?: LoadingState
menuTrigger?: MenuTriggerAction = 'input'
menuWidth?: number
name?: string
necessityIndicator?: NecessityIndicator = 'icon'
onBlur?: (FocusEvent<HTMLInputElement>) => void
onFocus?: (FocusEvent<HTMLInputElement>) => void
onFocusChange?: (boolean) => void
onInputChange?: (string) => void
onKeyDown?: (KeyboardEvent) => void
onKeyUp?: (KeyboardEvent) => void
onLoadMore?: () => any
onOpenChange?: (boolean, MenuTriggerAction) => void
onSelectionChange?: (Key | null) => void
placeholder?: string
selectedKey?: Key | null
shouldFlip?: boolean = true
shouldFocusWrap?: boolean
size?: 'S' | 'M' | 'L' | 'XL' = 'M'
slot?: string | null
styles?: StylesProp
- validate?: (ComboBoxValidationValue<SelectionMode>) => ValidationError | boolean | null | undefined
+ validate?: (ComboBoxValidationValue) => ValidationError | boolean | null | undefined
validationBehavior?: 'native' | 'aria' = 'native'
}/@react-spectrum/s2:ListView ListView <T extends {}> {
UNSAFE_className?: UnsafeClassName
UNSAFE_style?: CSSProperties
aria-describedby?: string
aria-details?: string
aria-label?: string
aria-labelledby?: string
autoFocus?: boolean | FocusStrategy
children: ReactNode | ({}) => ReactNode
defaultSelectedKeys?: 'all' | Iterable<Key>
dependencies?: ReadonlyArray<any>
disabledBehavior?: DisabledBehavior = "all"
disabledKeys?: Iterable<Key>
disallowEmptySelection?: boolean
disallowTypeAhead?: boolean = false
escapeKeyBehavior?: 'clearSelection' | 'none' = 'clearSelection'
hideLinkOutIcon?: boolean
id?: string
isQuiet?: boolean
items?: Iterable<T>
loadingState?: LoadingState
onAction?: (Key) => void
onLoadMore?: () => void
onSelectionChange?: (Selection) => void
- orientation?: 'horizontal' | 'vertical' = 'vertical'
overflowMode?: 'wrap' | 'truncate' = 'truncate'
renderActionBar?: ('all' | Set<Key>) => ReactElement
renderEmptyState?: (GridListRenderProps) => ReactNode
selectedKeys?: 'all' | Iterable<Key>
selectionStyle?: 'highlight' | 'checkbox' = 'checkbox'
shouldSelectOnPressUp?: boolean
slot?: string | null
styles?: StylesPropWithHeight
}/@react-spectrum/s2:Picker Picker <M extends SelectionMode = 'single', T extends {}> {
UNSAFE_className?: UnsafeClassName
UNSAFE_style?: CSSProperties
align?: 'start' | 'end' = 'start'
aria-describedby?: string
aria-details?: string
aria-label?: string
aria-labelledby?: string
autoComplete?: string
autoFocus?: boolean
children: ReactNode | ({}) => ReactNode
contextualHelp?: ReactNode
defaultOpen?: boolean
defaultValue?: ValueType<SelectionMode>
dependencies?: ReadonlyArray<any>
description?: ReactNode
direction?: 'bottom' | 'top' = 'bottom'
disabledKeys?: Iterable<Key>
errorMessage?: ReactNode | (ValidationResult) => ReactNode
excludeFromTabOrder?: boolean
form?: string
id?: string
isDisabled?: boolean
isInvalid?: boolean
isOpen?: boolean
isQuiet?: boolean
isRequired?: boolean
items?: Iterable<T>
label?: ReactNode
labelAlign?: Alignment = 'start'
labelPosition?: LabelPosition = 'top'
loadingState?: LoadingState
menuWidth?: number
name?: string
necessityIndicator?: NecessityIndicator = 'icon'
onBlur?: (FocusEvent<Target>) => void
onChange?: (ChangeValueType<SelectionMode>) => void
onFocus?: (FocusEvent<Target>) => void
onFocusChange?: (boolean) => void
onKeyDown?: (KeyboardEvent) => void
onKeyUp?: (KeyboardEvent) => void
onLoadMore?: () => any
onOpenChange?: (boolean) => void
placeholder?: string = 'Select an item' (localized)
renderValue?: (Array<{}>) => ReactNode
selectionMode?: SelectionMode = 'single'
- shouldCloseOnSelect?: boolean
shouldFlip?: boolean = true
size?: 'S' | 'M' | 'L' | 'XL' = 'M'
slot?: string | null
styles?: StylesProp
validationBehavior?: 'native' | 'aria' = 'native'
value?: ValueType<SelectionMode>
}/@react-spectrum/s2:RangeCalendar RangeCalendar <T extends DateValue> {
UNSAFE_className?: UnsafeClassName
UNSAFE_style?: CSSProperties
allowsNonContiguousRanges?: boolean
aria-describedby?: string
aria-details?: string
aria-label?: string
aria-labelledby?: string
autoFocus?: boolean = false
createCalendar?: (CalendarIdentifier) => Calendar
defaultFocusedValue?: DateValue | null
defaultValue?: RangeValue<DateValue> | null
errorMessage?: ReactNode
firstDayOfWeek?: 'sun' | 'mon' | 'tue' | 'wed' | 'thu' | 'fri' | 'sat'
focusedValue?: DateValue | null
id?: string
- interactOutsideBehavior?: 'clear' | 'reset' | 'select' = 'select'
isDateUnavailable?: (DateValue) => boolean
isDisabled?: boolean = false
isInvalid?: boolean
isReadOnly?: boolean = false
minValue?: DateValue | null
onChange?: (RangeValue<MappedDateValue<DateValue>>) => void
onFocusChange?: (CalendarDate) => void
pageBehavior?: PageBehavior = visible
selectionAlignment?: 'start' | 'center' | 'end' = 'center'
slot?: string | null
styles?: StylesProp
value?: RangeValue<DateValue> | null
visibleMonths?: number = 1
}/@react-spectrum/s2:TreeView TreeView <T extends {}> {
UNSAFE_className?: UnsafeClassName
UNSAFE_style?: CSSProperties
aria-describedby?: string
aria-details?: string
aria-label?: string
aria-labelledby?: string
autoFocus?: boolean | FocusStrategy
children?: ReactNode | (T) => ReactNode
defaultExpandedKeys?: Iterable<Key>
defaultSelectedKeys?: 'all' | Iterable<Key>
dependencies?: ReadonlyArray<any>
disabledBehavior?: DisabledBehavior = 'all'
disabledKeys?: Iterable<Key>
disallowEmptySelection?: boolean
escapeKeyBehavior?: 'clearSelection' | 'none' = 'clearSelection'
expandedKeys?: Iterable<Key>
id?: string
items?: Iterable<T>
onAction?: (Key) => void
onExpandedChange?: (Set<Key>) => any
onSelectionChange?: (Selection) => void
renderActionBar?: ('all' | Set<Key>) => ReactElement
renderEmptyState?: (TreeEmptyStateRenderProps) => ReactNode
selectedKeys?: 'all' | Iterable<Key>
selectionMode?: SelectionMode
- selectionStyle?: 'highlight' | 'checkbox' = 'checkbox'
shouldSelectOnPressUp?: boolean
slot?: string | null
styles?: StylesPropWithHeight
}/@react-spectrum/s2:CardViewProps CardViewProps <T> {
UNSAFE_className?: UnsafeClassName
UNSAFE_style?: CSSProperties
aria-describedby?: string
aria-details?: string
aria-label?: string
aria-labelledby?: string
autoFocus?: boolean | FocusStrategy
children?: ReactNode | (T) => ReactNode
defaultSelectedKeys?: 'all' | Iterable<Key>
density?: 'compact' | 'regular' | 'spacious' = 'regular'
dependencies?: ReadonlyArray<any>
disabledBehavior?: DisabledBehavior = "all"
disabledKeys?: Iterable<Key>
disallowEmptySelection?: boolean
disallowTypeAhead?: boolean = false
dragAndDropHooks?: DragAndDropHooks<NoInfer<T>>
escapeKeyBehavior?: 'clearSelection' | 'none' = 'clearSelection'
id?: string
items?: Iterable<T>
layout?: 'grid' | 'waterfall' = 'grid'
loadingState?: LoadingState
onAction?: (Key) => void
onLoadMore?: () => void
onSelectionChange?: (Selection) => void
- orientation?: 'horizontal' | 'vertical' = 'vertical'
renderActionBar?: ('all' | Set<Key>) => ReactElement
renderEmptyState?: (GridListRenderProps) => ReactNode
selectedKeys?: 'all' | Iterable<Key>
selectionMode?: SelectionMode
shouldSelectOnPressUp?: boolean
size?: 'XS' | 'S' | 'M' | 'L' | 'XL' = 'M'
slot?: string | null
styles?: StylesPropWithHeight
variant?: 'primary' | 'secondary' | 'tertiary' | 'quiet' = 'primary'
}/@react-spectrum/s2:ComboBoxProps ComboBoxProps <T extends {}> {
UNSAFE_className?: UnsafeClassName
UNSAFE_style?: CSSProperties
align?: 'start' | 'end' = 'start'
allowsCustomValue?: boolean
aria-describedby?: string
aria-details?: string
aria-label?: string
aria-labelledby?: string
autoFocus?: boolean
children: ReactNode | ({}) => ReactNode
contextualHelp?: ReactNode
defaultInputValue?: string
defaultItems?: Iterable<T>
defaultSelectedKey?: Key | null
dependencies?: ReadonlyArray<any>
description?: ReactNode
direction?: 'bottom' | 'top' = 'bottom'
disabledKeys?: Iterable<Key>
errorMessage?: ReactNode | (ValidationResult) => ReactNode
form?: string
formValue?: 'text' | 'key' = 'key'
id?: string
inputValue?: string
isDisabled?: boolean
isInvalid?: boolean
isReadOnly?: boolean
isRequired?: boolean
items?: Iterable<T>
label?: ReactNode
labelAlign?: Alignment = 'start'
labelPosition?: LabelPosition = 'top'
loadingState?: LoadingState
menuTrigger?: MenuTriggerAction = 'input'
menuWidth?: number
name?: string
necessityIndicator?: NecessityIndicator = 'icon'
onBlur?: (FocusEvent<HTMLInputElement>) => void
onFocus?: (FocusEvent<HTMLInputElement>) => void
onFocusChange?: (boolean) => void
onInputChange?: (string) => void
onKeyDown?: (KeyboardEvent) => void
onKeyUp?: (KeyboardEvent) => void
onLoadMore?: () => any
onOpenChange?: (boolean, MenuTriggerAction) => void
onSelectionChange?: (Key | null) => void
placeholder?: string
selectedKey?: Key | null
shouldFlip?: boolean = true
shouldFocusWrap?: boolean
size?: 'S' | 'M' | 'L' | 'XL' = 'M'
slot?: string | null
styles?: StylesProp
- validate?: (ComboBoxValidationValue<SelectionMode>) => ValidationError | boolean | null | undefined
+ validate?: (ComboBoxValidationValue) => ValidationError | boolean | null | undefined
validationBehavior?: 'native' | 'aria' = 'native'
}/@react-spectrum/s2:ListViewProps ListViewProps <T> {
UNSAFE_className?: UnsafeClassName
UNSAFE_style?: CSSProperties
aria-describedby?: string
aria-details?: string
aria-label?: string
aria-labelledby?: string
autoFocus?: boolean | FocusStrategy
children: ReactNode | (T) => ReactNode
defaultSelectedKeys?: 'all' | Iterable<Key>
dependencies?: ReadonlyArray<any>
disabledBehavior?: DisabledBehavior = "all"
disabledKeys?: Iterable<Key>
disallowEmptySelection?: boolean
disallowTypeAhead?: boolean = false
escapeKeyBehavior?: 'clearSelection' | 'none' = 'clearSelection'
hideLinkOutIcon?: boolean
id?: string
isQuiet?: boolean
items?: Iterable<T>
loadingState?: LoadingState
onAction?: (Key) => void
onLoadMore?: () => void
onSelectionChange?: (Selection) => void
- orientation?: 'horizontal' | 'vertical' = 'vertical'
overflowMode?: 'wrap' | 'truncate' = 'truncate'
renderActionBar?: ('all' | Set<Key>) => ReactElement
renderEmptyState?: (GridListRenderProps) => ReactNode
selectedKeys?: 'all' | Iterable<Key>
selectionStyle?: 'highlight' | 'checkbox' = 'checkbox'
shouldSelectOnPressUp?: boolean
slot?: string | null
styles?: StylesPropWithHeight
}/@react-spectrum/s2:PickerProps PickerProps <M extends SelectionMode = 'single', T extends {}> {
UNSAFE_className?: UnsafeClassName
UNSAFE_style?: CSSProperties
align?: 'start' | 'end' = 'start'
aria-describedby?: string
aria-details?: string
aria-label?: string
aria-labelledby?: string
autoComplete?: string
autoFocus?: boolean
children: ReactNode | ({}) => ReactNode
contextualHelp?: ReactNode
defaultOpen?: boolean
defaultValue?: ValueType<SelectionMode>
dependencies?: ReadonlyArray<any>
description?: ReactNode
direction?: 'bottom' | 'top' = 'bottom'
disabledKeys?: Iterable<Key>
errorMessage?: ReactNode | (ValidationResult) => ReactNode
excludeFromTabOrder?: boolean
form?: string
id?: string
isDisabled?: boolean
isInvalid?: boolean
isOpen?: boolean
isQuiet?: boolean
isRequired?: boolean
items?: Iterable<T>
label?: ReactNode
labelAlign?: Alignment = 'start'
labelPosition?: LabelPosition = 'top'
loadingState?: LoadingState
menuWidth?: number
name?: string
necessityIndicator?: NecessityIndicator = 'icon'
onBlur?: (FocusEvent<Target>) => void
onChange?: (ChangeValueType<SelectionMode>) => void
onFocus?: (FocusEvent<Target>) => void
onFocusChange?: (boolean) => void
onKeyDown?: (KeyboardEvent) => void
onKeyUp?: (KeyboardEvent) => void
onLoadMore?: () => any
onOpenChange?: (boolean) => void
placeholder?: string = 'Select an item' (localized)
renderValue?: (Array<{}>) => ReactNode
selectionMode?: SelectionMode = 'single'
- shouldCloseOnSelect?: boolean
shouldFlip?: boolean = true
size?: 'S' | 'M' | 'L' | 'XL' = 'M'
slot?: string | null
styles?: StylesProp
validationBehavior?: 'native' | 'aria' = 'native'
value?: ValueType<SelectionMode>
}/@react-spectrum/s2:RangeCalendarProps RangeCalendarProps <T extends DateValue> {
UNSAFE_className?: UnsafeClassName
UNSAFE_style?: CSSProperties
allowsNonContiguousRanges?: boolean
aria-describedby?: string
aria-details?: string
aria-label?: string
aria-labelledby?: string
autoFocus?: boolean = false
createCalendar?: (CalendarIdentifier) => Calendar
defaultFocusedValue?: DateValue | null
defaultValue?: RangeValue<DateValue> | null
errorMessage?: ReactNode
firstDayOfWeek?: 'sun' | 'mon' | 'tue' | 'wed' | 'thu' | 'fri' | 'sat'
focusedValue?: DateValue | null
id?: string
- interactOutsideBehavior?: 'clear' | 'reset' | 'select' = 'select'
isDateUnavailable?: (DateValue) => boolean
isDisabled?: boolean = false
isInvalid?: boolean
isReadOnly?: boolean = false
minValue?: DateValue | null
onChange?: (RangeValue<MappedDateValue<DateValue>>) => void
onFocusChange?: (CalendarDate) => void
pageBehavior?: PageBehavior = visible
selectionAlignment?: 'start' | 'center' | 'end' = 'center'
slot?: string | null
styles?: StylesProp
value?: RangeValue<DateValue> | null
visibleMonths?: number = 1
}/@react-spectrum/s2:TreeViewProps TreeViewProps <T> {
UNSAFE_className?: UnsafeClassName
UNSAFE_style?: CSSProperties
aria-describedby?: string
aria-details?: string
aria-label?: string
aria-labelledby?: string
autoFocus?: boolean | FocusStrategy
children?: ReactNode | (T) => ReactNode
defaultExpandedKeys?: Iterable<Key>
defaultSelectedKeys?: 'all' | Iterable<Key>
dependencies?: ReadonlyArray<any>
disabledBehavior?: DisabledBehavior = 'all'
disabledKeys?: Iterable<Key>
disallowEmptySelection?: boolean
escapeKeyBehavior?: 'clearSelection' | 'none' = 'clearSelection'
expandedKeys?: Iterable<Key>
id?: string
items?: Iterable<T>
onAction?: (Key) => void
onExpandedChange?: (Set<Key>) => any
onSelectionChange?: (Selection) => void
renderActionBar?: ('all' | Set<Key>) => ReactElement
renderEmptyState?: (TreeEmptyStateRenderProps) => ReactNode
selectedKeys?: 'all' | Iterable<Key>
selectionMode?: SelectionMode
- selectionStyle?: 'highlight' | 'checkbox' = 'checkbox'
shouldSelectOnPressUp?: boolean
slot?: string | null
styles?: StylesPropWithHeight
}@react-stately/calendar/@react-stately/calendar:RangeCalendarState RangeCalendarState <T extends DateValue = DateValue> {
anchorDate: CalendarDate | null
- clearSelection: () => void
focusNextDay: () => void
focusNextPage: () => void
focusNextRow: () => void
focusNextSection: (boolean) => void
focusPreviousPage: () => void
focusPreviousRow: () => void
focusPreviousSection: (boolean) => void
focusSectionEnd: () => void
focusSectionStart: () => void
focusedDate: CalendarDate
getDatesInWeek: (number, CalendarDate) => Array<CalendarDate | null>
highlightDate: (CalendarDate) => void
highlightedRange: RangeValue<CalendarDate> | null
isCellDisabled: (CalendarDate) => boolean
isCellFocused: (CalendarDate) => boolean
isCellUnavailable: (CalendarDate) => boolean
isDisabled: boolean
isDragging: boolean
isFocused: boolean
isInvalid: (CalendarDate) => boolean
isNextVisibleRangeInvalid: () => boolean
isPreviousVisibleRangeInvalid: () => boolean
isReadOnly: boolean
isSelected: (CalendarDate) => boolean
isValueInvalid: boolean
maxValue?: DateValue | null
minValue?: DateValue | null
selectDate: (CalendarDate) => void
selectFocusedDate: () => void
setAnchorDate: (CalendarDate | null) => void
setDragging: (boolean) => void
setFocused: (boolean) => void
setFocusedDate: (CalendarDate) => void
setValue: (RangeValue<DateValue> | null) => void
timeZone: string
value: RangeValue<DateValue> | null
visibleRange: RangeValue<CalendarDate>
}@react-stately/combobox/@react-stately/combobox:ComboBoxStateOptions ComboBoxStateOptions <M extends SelectionMode = 'single', T> {
allowsCustomValue?: boolean
allowsEmptyCollection?: boolean
autoFocus?: boolean
collection?: Collection<Node<T>>
defaultFilter?: FilterFn
defaultInputValue?: string
defaultItems?: Iterable<T>
defaultValue?: ValueType<SelectionMode>
description?: ReactNode
disabledKeys?: Iterable<Key>
errorMessage?: ReactNode | (ValidationResult) => ReactNode
inputValue?: string
isDisabled?: boolean
isInvalid?: boolean
isReadOnly?: boolean
isRequired?: boolean
items?: Iterable<T>
label?: ReactNode
menuTrigger?: MenuTriggerAction = 'input'
onBlur?: (FocusEvent<HTMLInputElement>) => void
- onChange?: (ChangeValueType<SelectionMode>) => void
+ onChange?: (T) => void
onFocus?: (FocusEvent<HTMLInputElement>) => void
onFocusChange?: (boolean) => void
onInputChange?: (string) => void
onKeyDown?: (KeyboardEvent) => void
onKeyUp?: (KeyboardEvent) => void
onOpenChange?: (boolean, MenuTriggerAction) => void
placeholder?: string
selectionMode?: SelectionMode = 'single'
shouldCloseOnBlur?: boolean
- validate?: (ComboBoxValidationValue<SelectionMode>) => ValidationError | boolean | null | undefined
+ validate?: (ComboBoxValidationValue) => ValidationError | boolean | null | undefined
validationBehavior?: 'aria' | 'native' = 'aria'
value?: ValueType<SelectionMode>
}@react-stately/select/@react-stately/select:SelectProps SelectProps <M extends SelectionMode = 'single', T> {
allowsEmptyCollection?: boolean
autoFocus?: boolean
children: CollectionChildren<T>
defaultOpen?: boolean
defaultValue?: ValueType<SelectionMode>
description?: ReactNode
disabledKeys?: Iterable<Key>
errorMessage?: ReactNode | (ValidationResult) => ReactNode
isDisabled?: boolean
isInvalid?: boolean
isOpen?: boolean
isRequired?: boolean
items?: Iterable<T>
label?: ReactNode
onBlur?: (FocusEvent<Target>) => void
onChange?: (ChangeValueType<SelectionMode>) => void
onFocus?: (FocusEvent<Target>) => void
onFocusChange?: (boolean) => void
onKeyDown?: (KeyboardEvent) => void
onKeyUp?: (KeyboardEvent) => void
onOpenChange?: (boolean) => void
placeholder?: string
selectionMode?: SelectionMode = 'single'
- shouldCloseOnSelect?: boolean
validate?: (ValidationType<SelectionMode>) => ValidationError | boolean | null | undefined
validationBehavior?: 'aria' | 'native' = 'aria'
value?: ValueType<SelectionMode>
}/@react-stately/select:SelectStateOptions SelectStateOptions <M extends SelectionMode = 'single', T> {
allowsEmptyCollection?: boolean
autoFocus?: boolean
collection?: Collection<Node<T>>
defaultOpen?: boolean
defaultValue?: ValueType<SelectionMode>
description?: ReactNode
disabledKeys?: Iterable<Key>
errorMessage?: ReactNode | (ValidationResult) => ReactNode
isDisabled?: boolean
isInvalid?: boolean
isOpen?: boolean
isRequired?: boolean
items?: Iterable<T>
label?: ReactNode
onBlur?: (FocusEvent<Target>) => void
onChange?: (ChangeValueType<SelectionMode>) => void
onFocus?: (FocusEvent<Target>) => void
onFocusChange?: (boolean) => void
onKeyDown?: (KeyboardEvent) => void
onKeyUp?: (KeyboardEvent) => void
onOpenChange?: (boolean) => void
placeholder?: string
selectionMode?: SelectionMode = 'single'
- shouldCloseOnSelect?: boolean
validate?: (ValidationType<SelectionMode>) => ValidationError | boolean | null | undefined
validationBehavior?: 'aria' | 'native' = 'aria'
value?: ValueType<SelectionMode>
} |
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
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Closes
Sometimes the Dev tool doesn't display any properties. It may do it for one component but not its sibling. I'm not really sure why this is the case, but I suspect that it's due to messages either being dropped, or the receiving end not being ready, or a conflict.
Instead of sending data to the extension for storage, we keep it on the client and just query it from the extension. This should make it more dependable, it can't send information that isn't heard. In addition, it simplifies the communication we have to coordinate.
✅ Pull Request Checklist:
📝 Test Instructions:
🧢 Your Project: