react-spectrum
react-spectrum copied to clipboard
Published
20 hours ago •
adobe
adobe
Fix ts differ
Closes
New build doesn't include the Node code in @internationalized, so updating this to mirror that. There's also an unknown case that causes a property to be null that wasn't before. If anyone has any thoughts on that, it'd be very helpful, otherwise I'm worried it's going to break our docs.
✅ Pull Request Checklist:
- [ ] Included link to corresponding React Spectrum GitHub Issue.
- [ ] Added/updated unit tests and storybook for this change (for new code or code which already has tests).
- [ ] Filled out test instructions.
- [ ] Updated documentation (if it already exists for this component).
- [ ] Looked at the Accessibility Practices for this feature - Aria Practices
📝 Test Instructions:
🧢 Your Project:
Build successful! 🎉
Build successful! 🎉
Build successful! 🎉
Build successful! 🎉
Build successful! 🎉
Build successful! 🎉
Build successful! 🎉
API Changes
CheckboxGroupState {
addValue: (string) => void
isDisabled: boolean
isReadOnly: boolean
isSelected: (string) => boolean
removeValue: (string) => void
setValue: (Array<string>) => void
toggleValue: (string) => void
validationState: ValidationState
- value: readonly Array<string>
+ value: Array<string>
}
Build successful! 🎉
Build successful! 🎉
Build successful! 🎉
Build successful! 🎉
Build successful! 🎉
Build successful! 🎉
Build successful! 🎉
Build successful! 🎉
API Changes
@react-aria/autocomplete
useSearchAutocomplete
changed by downstream interfaces: AriaButtonProps
SearchAutocompleteAria
changed by downstream interfaces: AriaButtonProps
@react-aria/button
useButton
changed by downstream interfaces: AriaButtonProps,ButtonAria
useToggleButton
changed by downstream interfaces: ButtonAria
ButtonAria
ButtonAria<T> {
buttonProps: T
isPressed: boolean
+ truly?: boolean
}
AriaButtonProps
AriaButtonProps<T extends ElementType = 'button'> {
aria-controls?: string
aria-describedby?: string
aria-details?: string
aria-expanded?: boolean | 'true' | 'false'
aria-haspopup?: boolean | 'menu' | 'listbox' | 'tree' | 'grid' | 'dialog' | 'true' | 'false'
aria-label?: string
aria-labelledby?: string
aria-pressed?: boolean | 'true' | 'false' | 'mixed'
autoFocus?: boolean
children?: ReactNode
elementType?: ElementType | JSXElementConstructor<any> = 'button'
excludeFromTabOrder?: boolean
+ foibles?: boolean
href?: string
id?: string
isDisabled?: boolean
onBlur?: (FocusEvent) => void
onFocusChange?: (boolean) => void
onKeyDown?: (KeyboardEvent) => void
onKeyUp?: (KeyboardEvent) => void
onPress?: (PressEvent) => void
onPressChange?: (boolean) => void
onPressEnd?: (PressEvent) => void
onPressStart?: (PressEvent) => void
onPressUp?: (PressEvent) => void
rel?: string
target?: string
type?: 'button' | 'submit' | 'reset' = 'button'
}
@react-aria/calendar
useCalendar
changed by downstream interfaces: AriaButtonProps
useRangeCalendar
changed by downstream interfaces: AriaButtonProps
CalendarAria
changed by downstream interfaces: AriaButtonProps
@react-aria/combobox
useComboBox
changed by downstream interfaces: AriaButtonProps
ComboBoxAria
changed by downstream interfaces: AriaButtonProps
@react-aria/datepicker
useDatePicker
changed by downstream interfaces: AriaButtonProps
useDateRangePicker
changed by downstream interfaces: AriaButtonProps
DatePickerAria
changed by downstream interfaces: AriaButtonProps
DateRangePickerAria
changed by downstream interfaces: AriaButtonProps
@react-aria/dnd
DraggableItemResult
changed by downstream interfaces: AriaButtonProps
DragResult
changed by downstream interfaces: AriaButtonProps
useDrag
changed by downstream interfaces: AriaButtonProps
useDraggableItem
changed by downstream interfaces: AriaButtonProps
@react-aria/menu
useMenuTrigger
changed by downstream interfaces: AriaButtonProps
MenuTriggerAria
changed by downstream interfaces: AriaButtonProps
@react-aria/numberfield
useNumberField
changed by downstream interfaces: AriaButtonProps
NumberFieldAria
changed by downstream interfaces: AriaButtonProps
@react-aria/overlays
useOverlayTrigger
changed by downstream interfaces: AriaButtonProps
OverlayTriggerAria
changed by downstream interfaces: AriaButtonProps
@react-aria/searchfield
useSearchField
changed by downstream interfaces: AriaButtonProps
SearchFieldAria
changed by downstream interfaces: AriaButtonProps
@react-aria/select
useSelect
changed by downstream interfaces: AriaButtonProps
SelectAria
changed by downstream interfaces: AriaButtonProps
@react-aria/spinbutton
SpinbuttonAria
changed by downstream interfaces: AriaButtonProps
useSpinButton
changed by downstream interfaces: AriaButtonProps
Build successful! 🎉
Build successful! 🎉
API Changes
@react-aria/breadcrumbs
AriaBreadcrumbItemProps
AriaBreadcrumbItemProps {
aria-current?: 'page' | 'step' | 'location' | 'date' | 'time' | boolean | 'true' | 'false' = 'page'
aria-describedby?: string
aria-details?: string
aria-label?: string
aria-labelledby?: string
autoFocus?: boolean
children: ReactNode
elementType?: string = 'a'
id?: string
isCurrent?: boolean
isDisabled?: boolean
onBlur?: (FocusEvent) => void
onFocus?: (FocusEvent) => void
onFocusChange?: (boolean) => void
onKeyDown?: (KeyboardEvent) => void
onKeyUp?: (KeyboardEvent) => void
onPress?: (PressEvent) => void
onPressChange?: (boolean) => void
+ onPressDepress?: (PressEvent) => void
onPressEnd?: (PressEvent) => void
onPressStart?: (PressEvent) => void
onPressUp?: (PressEvent) => void
}
it changed:
- useBreadcrumbItem
@react-aria/button
ButtonAria
ButtonAria<T> {
buttonProps: T
isPressed: boolean
+ truly?: boolean
}
it changed:
- useButton
- useToggleButton
AriaButtonProps
AriaButtonProps<T extends ElementType = 'button'> {
aria-controls?: string
aria-describedby?: string
aria-details?: string
aria-expanded?: boolean | 'true' | 'false'
aria-haspopup?: boolean | 'menu' | 'listbox' | 'tree' | 'grid' | 'dialog' | 'true' | 'false'
aria-label?: string
aria-labelledby?: string
aria-pressed?: boolean | 'true' | 'false' | 'mixed'
autoFocus?: boolean
children?: ReactNode
elementType?: ElementType | JSXElementConstructor<any> = 'button'
excludeFromTabOrder?: boolean
+ foibles?: boolean
href?: string
id?: string
isDisabled?: boolean
onBlur?: (FocusEvent) => void
onFocus?: (FocusEvent) => void
onFocusChange?: (boolean) => void
onKeyDown?: (KeyboardEvent) => void
onKeyUp?: (KeyboardEvent) => void
onPress?: (PressEvent) => void
onPressChange?: (boolean) => void
+ onPressDepress?: (PressEvent) => void
onPressEnd?: (PressEvent) => void
onPressStart?: (PressEvent) => void
onPressUp?: (PressEvent) => void
rel?: string
type?: 'button' | 'submit' | 'reset' = 'button'
}
it changed:
- SearchAutocompleteAria
- useSearchAutocomplete
- useButton
- CalendarAria
- useCalendar
- useRangeCalendar
- ComboBoxAria
- useComboBox
- DatePickerAria
- useDatePicker
- DateRangePickerAria
- useDateRangePicker
- DraggableItemResult
- useDraggableItem
- DragResult
- useDrag
- MenuTriggerAria
- useMenuTrigger
- NumberFieldAria
- useNumberField
- OverlayTriggerAria
- useOverlayTrigger
- SearchFieldAria
- useSearchField
- SelectAria
- useSelect
- SpinbuttonAria
- useSpinButton
AriaToggleButtonProps
AriaToggleButtonProps<T extends ElementType = 'button'> {
aria-controls?: string
aria-describedby?: string
aria-details?: string
aria-expanded?: boolean | 'true' | 'false'
aria-haspopup?: boolean | 'menu' | 'listbox' | 'tree' | 'grid' | 'dialog' | 'true' | 'false'
aria-label?: string
aria-labelledby?: string
aria-pressed?: boolean | 'true' | 'false' | 'mixed'
autoFocus?: boolean
children?: ReactNode
defaultSelected?: boolean
elementType?: ElementType | JSXElementConstructor<any> = 'button'
excludeFromTabOrder?: boolean
id?: string
isDisabled?: boolean
isSelected?: boolean
onBlur?: (FocusEvent) => void
onChange?: (boolean) => void
onFocus?: (FocusEvent) => void
onFocusChange?: (boolean) => void
onKeyDown?: (KeyboardEvent) => void
onKeyUp?: (KeyboardEvent) => void
onPress?: (PressEvent) => void
onPressChange?: (boolean) => void
+ onPressDepress?: (PressEvent) => void
onPressEnd?: (PressEvent) => void
onPressStart?: (PressEvent) => void
onPressUp?: (PressEvent) => void
type?: 'button' | 'submit' | 'reset' = 'button'
it changed:
- useToggleButton
@react-aria/interactions
PressProps
PressProps {
allowTextSelectionOnPress?: boolean
isDisabled?: boolean
isPressed?: boolean
onPress?: (PressEvent) => void
onPressChange?: (boolean) => void
+ onPressDepress?: (PressEvent) => void
onPressEnd?: (PressEvent) => void
onPressStart?: (PressEvent) => void
onPressUp?: (PressEvent) => void
preventFocusOnPress?: boolean
}
it changed:
- ActionGroupItemAria
- useActionGroupItem
- TooltipTriggerAria
- useTooltipTrigger
PressHookProps
PressHookProps {
allowTextSelectionOnPress?: boolean
isDisabled?: boolean
isPressed?: boolean
onPress?: (PressEvent) => void
onPressChange?: (boolean) => void
+ onPressDepress?: (PressEvent) => void
onPressEnd?: (PressEvent) => void
onPressStart?: (PressEvent) => void
onPressUp?: (PressEvent) => void
preventFocusOnPress?: boolean
shouldCancelOnPointerExit?: boolean
}
it changed:
- usePress
PressResult
PressResult {
isPressed: boolean
pressProps: DOMAttributes
+ wasPressed?: boolean
}
it changed:
- usePress
@react-aria/link
AriaLinkOptions
AriaLinkOptions {
aria-describedby?: string
aria-details?: string
aria-label?: string
aria-labelledby?: string
autoFocus?: boolean
elementType?: string = 'a'
isDisabled?: boolean
onBlur?: (FocusEvent) => void
onFocus?: (FocusEvent) => void
onFocusChange?: (boolean) => void
onKeyDown?: (KeyboardEvent) => void
onKeyUp?: (KeyboardEvent) => void
onPress?: (PressEvent) => void
onPressChange?: (boolean) => void
+ onPressDepress?: (PressEvent) => void
onPressEnd?: (PressEvent) => void
onPressStart?: (PressEvent) => void
onPressUp?: (PressEvent) => void
}
it changed:
- useLink
@react-spectrum/button
Button
Button<T extends {} = 'button'> {
UNSAFE_className?: string
UNSAFE_style?: CSSProperties
alignSelf?: Responsive<'auto' | 'normal' | 'start' | 'end' | 'center' | 'flex-start' | 'flex-end' | 'self-start' | 'self-end' | 'stretch'>
aria-controls?: string
aria-describedby?: string
aria-details?: string
aria-expanded?: boolean | 'true' | 'false'
aria-haspopup?: boolean | 'menu' | 'listbox' | 'tree' | 'grid' | 'dialog' | 'true' | 'false'
aria-label?: string
aria-labelledby?: string
aria-pressed?: boolean | 'true' | 'false' | 'mixed'
autoFocus?: boolean
bottom?: Responsive<DimensionValue>
children?: ReactNode
elementType?: ElementType | JSXElementConstructor<any> = 'button'
end?: Responsive<DimensionValue>
excludeFromTabOrder?: boolean
flex?: Responsive<string | number | boolean>
flexBasis?: Responsive<number | string>
flexGrow?: Responsive<number>
flexShrink?: Responsive<number>
gridArea?: Responsive<string>
gridColumn?: Responsive<string>
gridColumnEnd?: Responsive<string>
gridColumnStart?: Responsive<string>
gridRow?: Responsive<string>
gridRowEnd?: Responsive<string>
gridRowStart?: Responsive<string>
height?: Responsive<DimensionValue>
href?: string
id?: string
isDisabled?: boolean
isHidden?: Responsive<boolean>
isQuiet?: 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>
maxWidth?: Responsive<DimensionValue>
minHeight?: Responsive<DimensionValue>
minWidth?: Responsive<DimensionValue>
onBlur?: (FocusEvent) => void
onFocus?: (FocusEvent) => void
onFocusChange?: (boolean) => void
onKeyDown?: (KeyboardEvent) => void
onKeyUp?: (KeyboardEvent) => void
onPress?: (PressEvent) => void
onPressChange?: (boolean) => void
+ onPressDepress?: (PressEvent) => void
onPressEnd?: (PressEvent) => void
onPressStart?: (PressEvent) => void
onPressUp?: (PressEvent) => void
order?: Responsive<number>
rel?: string
right?: Responsive<DimensionValue>
start?: Responsive<DimensionValue>
target?: string
top?: Responsive<DimensionValue>
type?: 'button' | 'submit' | 'reset' = 'button'
variant: 'cta' | 'overBackground' | 'primary' | 'secondary' | 'negative'
width?: Responsive<DimensionValue>
zIndex?: Responsive<number>
}
ActionButton
ActionButton {
UNSAFE_className?: string
UNSAFE_style?: CSSProperties
alignSelf?: Responsive<'auto' | 'normal' | 'start' | 'end' | 'center' | 'flex-start' | 'flex-end' | 'self-start' | 'self-end' | 'stretch'>
aria-controls?: string
aria-describedby?: string
aria-details?: string
aria-expanded?: boolean | 'true' | 'false'
aria-haspopup?: boolean | 'menu' | 'listbox' | 'tree' | 'grid' | 'dialog' | 'true' | 'false'
aria-label?: string
aria-labelledby?: string
aria-pressed?: boolean | 'true' | 'false' | 'mixed'
autoFocus?: boolean
bottom?: Responsive<DimensionValue>
children?: ReactNode
end?: Responsive<DimensionValue>
excludeFromTabOrder?: boolean
flex?: Responsive<string | number | boolean>
flexBasis?: Responsive<number | string>
flexGrow?: Responsive<number>
flexShrink?: Responsive<number>
gridArea?: Responsive<string>
gridColumn?: Responsive<string>
gridColumnEnd?: Responsive<string>
gridColumnStart?: Responsive<string>
gridRow?: Responsive<string>
gridRowEnd?: Responsive<string>
gridRowStart?: Responsive<string>
height?: Responsive<DimensionValue>
id?: string
isDisabled?: boolean
isHidden?: Responsive<boolean>
isQuiet?: 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>
maxWidth?: Responsive<DimensionValue>
minHeight?: Responsive<DimensionValue>
minWidth?: Responsive<DimensionValue>
onBlur?: (FocusEvent) => void
onFocus?: (FocusEvent) => void
onFocusChange?: (boolean) => void
onKeyDown?: (KeyboardEvent) => void
onKeyUp?: (KeyboardEvent) => void
onPress?: (PressEvent) => void
onPressChange?: (boolean) => void
+ onPressDepress?: (PressEvent) => void
onPressEnd?: (PressEvent) => void
onPressStart?: (PressEvent) => void
onPressUp?: (PressEvent) => void
order?: Responsive<number>
right?: Responsive<DimensionValue>
start?: Responsive<DimensionValue>
staticColor?: 'white' | 'black'
top?: Responsive<DimensionValue>
type?: 'button' | 'submit' | 'reset' = 'button'
width?: Responsive<DimensionValue>
zIndex?: Responsive<number>
}
LogicButton
LogicButton {
UNSAFE_className?: string
UNSAFE_style?: CSSProperties
alignSelf?: Responsive<'auto' | 'normal' | 'start' | 'end' | 'center' | 'flex-start' | 'flex-end' | 'self-start' | 'self-end' | 'stretch'>
aria-controls?: string
aria-describedby?: string
aria-details?: string
aria-expanded?: boolean | 'true' | 'false'
aria-haspopup?: boolean | 'menu' | 'listbox' | 'tree' | 'grid' | 'dialog' | 'true' | 'false'
aria-label?: string
aria-labelledby?: string
aria-pressed?: boolean | 'true' | 'false' | 'mixed'
autoFocus?: boolean
bottom?: Responsive<DimensionValue>
children?: ReactNode
end?: Responsive<DimensionValue>
excludeFromTabOrder?: boolean
flex?: Responsive<string | number | boolean>
flexBasis?: Responsive<number | string>
flexGrow?: Responsive<number>
flexShrink?: Responsive<number>
gridArea?: Responsive<string>
gridColumn?: Responsive<string>
gridColumnEnd?: Responsive<string>
gridColumnStart?: Responsive<string>
gridRow?: Responsive<string>
gridRowEnd?: Responsive<string>
gridRowStart?: Responsive<string>
height?: Responsive<DimensionValue>
id?: string
isDisabled?: boolean
isHidden?: Responsive<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>
maxWidth?: Responsive<DimensionValue>
minHeight?: Responsive<DimensionValue>
minWidth?: Responsive<DimensionValue>
onBlur?: (FocusEvent) => void
onFocus?: (FocusEvent) => void
onFocusChange?: (boolean) => void
onKeyDown?: (KeyboardEvent) => void
onKeyUp?: (KeyboardEvent) => void
onPress?: (PressEvent) => void
onPressChange?: (boolean) => void
+ onPressDepress?: (PressEvent) => void
onPressEnd?: (PressEvent) => void
onPressStart?: (PressEvent) => void
onPressUp?: (PressEvent) => void
order?: Responsive<number>
right?: Responsive<DimensionValue>
start?: Responsive<DimensionValue>
top?: Responsive<DimensionValue>
type?: 'button' | 'submit' | 'reset' = 'button'
variant: 'and' | 'or'
width?: Responsive<DimensionValue>
zIndex?: Responsive<number>
}
ToggleButton
ToggleButton {
UNSAFE_className?: string
UNSAFE_style?: CSSProperties
alignSelf?: Responsive<'auto' | 'normal' | 'start' | 'end' | 'center' | 'flex-start' | 'flex-end' | 'self-start' | 'self-end' | 'stretch'>
aria-controls?: string
aria-describedby?: string
aria-details?: string
aria-expanded?: boolean | 'true' | 'false'
aria-haspopup?: boolean | 'menu' | 'listbox' | 'tree' | 'grid' | 'dialog' | 'true' | 'false'
aria-label?: string
aria-labelledby?: string
aria-pressed?: boolean | 'true' | 'false' | 'mixed'
autoFocus?: boolean
bottom?: Responsive<DimensionValue>
children?: ReactNode
defaultSelected?: boolean
end?: Responsive<DimensionValue>
excludeFromTabOrder?: boolean
flex?: Responsive<string | number | boolean>
flexBasis?: Responsive<number | string>
flexGrow?: Responsive<number>
flexShrink?: Responsive<number>
gridArea?: Responsive<string>
gridColumn?: Responsive<string>
gridColumnEnd?: Responsive<string>
gridColumnStart?: Responsive<string>
gridRow?: Responsive<string>
gridRowEnd?: Responsive<string>
gridRowStart?: Responsive<string>
height?: Responsive<DimensionValue>
id?: string
isDisabled?: boolean
isEmphasized?: boolean
isHidden?: Responsive<boolean>
isQuiet?: boolean
isSelected?: 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>
maxWidth?: Responsive<DimensionValue>
minHeight?: Responsive<DimensionValue>
minWidth?: Responsive<DimensionValue>
onBlur?: (FocusEvent) => void
onChange?: (boolean) => void
onFocus?: (FocusEvent) => void
onFocusChange?: (boolean) => void
onKeyDown?: (KeyboardEvent) => void
onKeyUp?: (KeyboardEvent) => void
onPress?: (PressEvent) => void
onPressChange?: (boolean) => void
+ onPressDepress?: (PressEvent) => void
onPressEnd?: (PressEvent) => void
onPressStart?: (PressEvent) => void
onPressUp?: (PressEvent) => void
order?: Responsive<number>
right?: Responsive<DimensionValue>
start?: Responsive<DimensionValue>
staticColor?: 'white' | 'black'
top?: Responsive<DimensionValue>
type?: 'button' | 'submit' | 'reset' = 'button'
width?: Responsive<DimensionValue>
zIndex?: Responsive<number>
}
SpectrumActionButtonProps
SpectrumActionButtonProps {
UNSAFE_className?: string
UNSAFE_style?: CSSProperties
alignSelf?: Responsive<'auto' | 'normal' | 'start' | 'end' | 'center' | 'flex-start' | 'flex-end' | 'self-start' | 'self-end' | 'stretch'>
aria-controls?: string
aria-describedby?: string
aria-details?: string
aria-expanded?: boolean | 'true' | 'false'
aria-haspopup?: boolean | 'menu' | 'listbox' | 'tree' | 'grid' | 'dialog' | 'true' | 'false'
aria-label?: string
aria-labelledby?: string
aria-pressed?: boolean | 'true' | 'false' | 'mixed'
autoFocus?: boolean
bottom?: Responsive<DimensionValue>
children?: ReactNode
end?: Responsive<DimensionValue>
excludeFromTabOrder?: boolean
flex?: Responsive<string | number | boolean>
flexBasis?: Responsive<number | string>
flexGrow?: Responsive<number>
flexShrink?: Responsive<number>
gridArea?: Responsive<string>
gridColumn?: Responsive<string>
gridColumnEnd?: Responsive<string>
gridColumnStart?: Responsive<string>
gridRow?: Responsive<string>
gridRowEnd?: Responsive<string>
gridRowStart?: Responsive<string>
height?: Responsive<DimensionValue>
id?: string
isDisabled?: boolean
isHidden?: Responsive<boolean>
isQuiet?: 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>
maxWidth?: Responsive<DimensionValue>
minHeight?: Responsive<DimensionValue>
minWidth?: Responsive<DimensionValue>
onBlur?: (FocusEvent) => void
onFocus?: (FocusEvent) => void
onFocusChange?: (boolean) => void
onKeyDown?: (KeyboardEvent) => void
onKeyUp?: (KeyboardEvent) => void
onPress?: (PressEvent) => void
onPressChange?: (boolean) => void
+ onPressDepress?: (PressEvent) => void
onPressEnd?: (PressEvent) => void
onPressStart?: (PressEvent) => void
onPressUp?: (PressEvent) => void
order?: Responsive<number>
right?: Responsive<DimensionValue>
start?: Responsive<DimensionValue>
staticColor?: 'white' | 'black'
top?: Responsive<DimensionValue>
type?: 'button' | 'submit' | 'reset' = 'button'
width?: Responsive<DimensionValue>
zIndex?: Responsive<number>
}
SpectrumButtonProps
SpectrumButtonProps<T extends ElementType = 'button'> {
UNSAFE_className?: string
UNSAFE_style?: CSSProperties
alignSelf?: Responsive<'auto' | 'normal' | 'start' | 'end' | 'center' | 'flex-start' | 'flex-end' | 'self-start' | 'self-end' | 'stretch'>
aria-controls?: string
aria-describedby?: string
aria-details?: string
aria-expanded?: boolean | 'true' | 'false'
aria-haspopup?: boolean | 'menu' | 'listbox' | 'tree' | 'grid' | 'dialog' | 'true' | 'false'
aria-label?: string
aria-labelledby?: string
aria-pressed?: boolean | 'true' | 'false' | 'mixed'
autoFocus?: boolean
bottom?: Responsive<DimensionValue>
children?: ReactNode
elementType?: ElementType | JSXElementConstructor<any> = 'button'
end?: Responsive<DimensionValue>
excludeFromTabOrder?: boolean
flex?: Responsive<string | number | boolean>
flexBasis?: Responsive<number | string>
flexGrow?: Responsive<number>
flexShrink?: Responsive<number>
gridArea?: Responsive<string>
gridColumn?: Responsive<string>
gridColumnEnd?: Responsive<string>
gridColumnStart?: Responsive<string>
gridRow?: Responsive<string>
gridRowEnd?: Responsive<string>
gridRowStart?: Responsive<string>
height?: Responsive<DimensionValue>
href?: string
id?: string
isDisabled?: boolean
isHidden?: Responsive<boolean>
isQuiet?: 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>
maxWidth?: Responsive<DimensionValue>
minHeight?: Responsive<DimensionValue>
minWidth?: Responsive<DimensionValue>
onBlur?: (FocusEvent) => void
onFocus?: (FocusEvent) => void
onFocusChange?: (boolean) => void
onKeyDown?: (KeyboardEvent) => void
onKeyUp?: (KeyboardEvent) => void
onPress?: (PressEvent) => void
onPressChange?: (boolean) => void
+ onPressDepress?: (PressEvent) => void
onPressEnd?: (PressEvent) => void
onPressStart?: (PressEvent) => void
onPressUp?: (PressEvent) => void
order?: Responsive<number>
rel?: string
right?: Responsive<DimensionValue>
start?: Responsive<DimensionValue>
target?: string
top?: Responsive<DimensionValue>
type?: 'button' | 'submit' | 'reset' = 'button'
variant: 'cta' | 'overBackground' | 'primary' | 'secondary' | 'negative'
width?: Responsive<DimensionValue>
zIndex?: Responsive<number>
}
SpectrumLogicButtonProps
SpectrumLogicButtonProps {
UNSAFE_className?: string
UNSAFE_style?: CSSProperties
alignSelf?: Responsive<'auto' | 'normal' | 'start' | 'end' | 'center' | 'flex-start' | 'flex-end' | 'self-start' | 'self-end' | 'stretch'>
aria-controls?: string
aria-describedby?: string
aria-details?: string
aria-expanded?: boolean | 'true' | 'false'
aria-haspopup?: boolean | 'menu' | 'listbox' | 'tree' | 'grid' | 'dialog' | 'true' | 'false'
aria-label?: string
aria-labelledby?: string
aria-pressed?: boolean | 'true' | 'false' | 'mixed'
autoFocus?: boolean
bottom?: Responsive<DimensionValue>
children?: ReactNode
end?: Responsive<DimensionValue>
excludeFromTabOrder?: boolean
flex?: Responsive<string | number | boolean>
flexBasis?: Responsive<number | string>
flexGrow?: Responsive<number>
flexShrink?: Responsive<number>
gridArea?: Responsive<string>
gridColumn?: Responsive<string>
gridColumnEnd?: Responsive<string>
gridColumnStart?: Responsive<string>
gridRow?: Responsive<string>
gridRowEnd?: Responsive<string>
gridRowStart?: Responsive<string>
height?: Responsive<DimensionValue>
id?: string
isDisabled?: boolean
isHidden?: Responsive<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>
maxWidth?: Responsive<DimensionValue>
minHeight?: Responsive<DimensionValue>
minWidth?: Responsive<DimensionValue>
onBlur?: (FocusEvent) => void
onFocus?: (FocusEvent) => void
onFocusChange?: (boolean) => void
onKeyDown?: (KeyboardEvent) => void
onKeyUp?: (KeyboardEvent) => void
onPress?: (PressEvent) => void
onPressChange?: (boolean) => void
+ onPressDepress?: (PressEvent) => void
onPressEnd?: (PressEvent) => void
onPressStart?: (PressEvent) => void
onPressUp?: (PressEvent) => void
order?: Responsive<number>
right?: Responsive<DimensionValue>
start?: Responsive<DimensionValue>
top?: Responsive<DimensionValue>
type?: 'button' | 'submit' | 'reset' = 'button'
variant: 'and' | 'or'
width?: Responsive<DimensionValue>
zIndex?: Responsive<number>
}
SpectrumToggleButtonProps
SpectrumToggleButtonProps {
UNSAFE_className?: string
UNSAFE_style?: CSSProperties
alignSelf?: Responsive<'auto' | 'normal' | 'start' | 'end' | 'center' | 'flex-start' | 'flex-end' | 'self-start' | 'self-end' | 'stretch'>
aria-controls?: string
aria-describedby?: string
aria-details?: string
aria-expanded?: boolean | 'true' | 'false'
aria-haspopup?: boolean | 'menu' | 'listbox' | 'tree' | 'grid' | 'dialog' | 'true' | 'false'
aria-label?: string
aria-labelledby?: string
aria-pressed?: boolean | 'true' | 'false' | 'mixed'
autoFocus?: boolean
bottom?: Responsive<DimensionValue>
children?: ReactNode
defaultSelected?: boolean
end?: Responsive<DimensionValue>
excludeFromTabOrder?: boolean
flex?: Responsive<string | number | boolean>
flexBasis?: Responsive<number | string>
flexGrow?: Responsive<number>
flexShrink?: Responsive<number>
gridArea?: Responsive<string>
gridColumn?: Responsive<string>
gridColumnEnd?: Responsive<string>
gridColumnStart?: Responsive<string>
gridRow?: Responsive<string>
gridRowEnd?: Responsive<string>
gridRowStart?: Responsive<string>
height?: Responsive<DimensionValue>
id?: string
isDisabled?: boolean
isEmphasized?: boolean
isHidden?: Responsive<boolean>
isQuiet?: boolean
isSelected?: 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>
maxWidth?: Responsive<DimensionValue>
minHeight?: Responsive<DimensionValue>
minWidth?: Responsive<DimensionValue>
onBlur?: (FocusEvent) => void
onChange?: (boolean) => void
onFocus?: (FocusEvent) => void
onFocusChange?: (boolean) => void
onKeyDown?: (KeyboardEvent) => void
onKeyUp?: (KeyboardEvent) => void
onPress?: (PressEvent) => void
onPressChange?: (boolean) => void
+ onPressDepress?: (PressEvent) => void
onPressEnd?: (PressEvent) => void
onPressStart?: (PressEvent) => void
onPressUp?: (PressEvent) => void
order?: Responsive<number>
right?: Responsive<DimensionValue>
start?: Responsive<DimensionValue>
staticColor?: 'white' | 'black'
top?: Responsive<DimensionValue>
type?: 'button' | 'submit' | 'reset' = 'button'
width?: Responsive<DimensionValue>
zIndex?: Responsive<number>
}
@react-spectrum/link
Link
Link {
UNSAFE_className?: string
UNSAFE_style?: CSSProperties
alignSelf?: Responsive<'auto' | 'normal' | 'start' | 'end' | 'center' | 'flex-start' | 'flex-end' | 'self-start' | 'self-end' | 'stretch'>
aria-describedby?: string
aria-details?: string
aria-label?: string
aria-labelledby?: string
autoFocus?: boolean
bottom?: Responsive<DimensionValue>
children: ReactNode
end?: Responsive<DimensionValue>
flex?: Responsive<string | number | boolean>
flexBasis?: Responsive<number | string>
flexGrow?: Responsive<number>
flexShrink?: Responsive<number>
gridArea?: Responsive<string>
gridColumn?: Responsive<string>
gridColumnEnd?: Responsive<string>
gridColumnStart?: Responsive<string>
gridRow?: Responsive<string>
gridRowEnd?: Responsive<string>
gridRowStart?: Responsive<string>
height?: Responsive<DimensionValue>
isHidden?: Responsive<boolean>
isQuiet?: 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>
maxWidth?: Responsive<DimensionValue>
minHeight?: Responsive<DimensionValue>
minWidth?: Responsive<DimensionValue>
onBlur?: (FocusEvent) => void
onFocus?: (FocusEvent) => void
onFocusChange?: (boolean) => void
onKeyDown?: (KeyboardEvent) => void
onKeyUp?: (KeyboardEvent) => void
onPress?: (PressEvent) => void
onPressChange?: (boolean) => void
+ onPressDepress?: (PressEvent) => void
onPressEnd?: (PressEvent) => void
onPressStart?: (PressEvent) => void
onPressUp?: (PressEvent) => void
order?: Responsive<number>
right?: Responsive<DimensionValue>
start?: Responsive<DimensionValue>
top?: Responsive<DimensionValue>
variant?: 'primary' | 'secondary' | 'overBackground' = 'primary'
width?: Responsive<DimensionValue>
zIndex?: Responsive<number>
}
SpectrumLinkProps
SpectrumLinkProps {
UNSAFE_className?: string
UNSAFE_style?: CSSProperties
alignSelf?: Responsive<'auto' | 'normal' | 'start' | 'end' | 'center' | 'flex-start' | 'flex-end' | 'self-start' | 'self-end' | 'stretch'>
aria-describedby?: string
aria-details?: string
aria-label?: string
aria-labelledby?: string
autoFocus?: boolean
bottom?: Responsive<DimensionValue>
children: ReactNode
end?: Responsive<DimensionValue>
flex?: Responsive<string | number | boolean>
flexBasis?: Responsive<number | string>
flexGrow?: Responsive<number>
flexShrink?: Responsive<number>
gridArea?: Responsive<string>
gridColumn?: Responsive<string>
gridColumnEnd?: Responsive<string>
gridColumnStart?: Responsive<string>
gridRow?: Responsive<string>
gridRowEnd?: Responsive<string>
gridRowStart?: Responsive<string>
height?: Responsive<DimensionValue>
isHidden?: Responsive<boolean>
isQuiet?: 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>
maxWidth?: Responsive<DimensionValue>
minHeight?: Responsive<DimensionValue>
minWidth?: Responsive<DimensionValue>
onBlur?: (FocusEvent) => void
onFocus?: (FocusEvent) => void
onFocusChange?: (boolean) => void
onKeyDown?: (KeyboardEvent) => void
onKeyUp?: (KeyboardEvent) => void
onPress?: (PressEvent) => void
onPressChange?: (boolean) => void
+ onPressDepress?: (PressEvent) => void
onPressEnd?: (PressEvent) => void
onPressStart?: (PressEvent) => void
onPressUp?: (PressEvent) => void
order?: Responsive<number>
right?: Responsive<DimensionValue>
start?: Responsive<DimensionValue>
top?: Responsive<DimensionValue>
variant?: 'primary' | 'secondary' | 'overBackground' = 'primary'
width?: Responsive<DimensionValue>
zIndex?: Responsive<number>
}
@react-spectrum/textfield
TextFieldBase
TextFieldBase {
UNSAFE_className?: string
UNSAFE_style?: CSSProperties
alignSelf?: Responsive<'auto' | 'normal' | 'start' | 'end' | 'center' | 'flex-start' | 'flex-end' | 'self-start' | 'self-end' | 'stretch'>
aria-activedescendant?: string
aria-autocomplete?: 'none' | 'inline' | 'list' | 'both'
aria-describedby?: string
aria-details?: string
aria-errormessage?: string
aria-haspopup?: boolean | 'false' | 'true' | 'menu' | 'listbox' | 'tree' | 'grid' | 'dialog'
aria-label?: string
aria-labelledby?: string
autoComplete?: string
autoFocus?: boolean
bottom?: Responsive<DimensionValue>
contextualHelp?: ReactNode
defaultValue?: string
description?: ReactNode
descriptionProps?: HTMLAttributes<HTMLElement>
end?: Responsive<DimensionValue>
errorMessage?: ReactNode
errorMessageProps?: HTMLAttributes<HTMLElement>
excludeFromTabOrder?: boolean
flex?: Responsive<string | number | boolean>
flexBasis?: Responsive<number | string>
flexGrow?: Responsive<number>
flexShrink?: Responsive<number>
gridArea?: Responsive<string>
gridColumn?: Responsive<string>
gridColumnEnd?: Responsive<string>
gridColumnStart?: Responsive<string>
gridRow?: Responsive<string>
gridRowEnd?: Responsive<string>
gridRowStart?: Responsive<string>
height?: Responsive<DimensionValue>
icon?: ReactElement
id?: string
inputClassName?: string
inputMode?: 'none' | 'text' | 'tel' | 'url' | 'email' | 'numeric' | 'decimal' | 'search'
inputProps: InputHTMLAttributes<HTMLInputElement> | TextareaHTMLAttributes<HTMLTextAreaElement>
inputRef?: RefObject<HTMLInputElement | HTMLTextAreaElement>
isDisabled?: boolean
isHidden?: Responsive<boolean>
isLoading?: boolean
isQuiet?: boolean
isReadOnly?: boolean
isRequired?: boolean
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'
labelProps?: LabelHTMLAttributes<HTMLLabelElement>
left?: Responsive<DimensionValue>
loadingIndicator?: ReactElement
margin?: Responsive<DimensionValue>
marginBottom?: Responsive<DimensionValue>
marginEnd?: Responsive<DimensionValue>
marginStart?: Responsive<DimensionValue>
marginTop?: Responsive<DimensionValue>
marginX?: Responsive<DimensionValue>
marginY?: Responsive<DimensionValue>
maxHeight?: Responsive<DimensionValue>
maxLength?: number
maxWidth?: Responsive<DimensionValue>
minHeight?: Responsive<DimensionValue>
minLength?: number
minWidth?: Responsive<DimensionValue>
multiLine?: boolean
name?: string
necessityIndicator?: NecessityIndicator = 'icon'
onBeforeInput?: FormEventHandler<HTMLInputElement>
onBlur?: (FocusEvent) => void
onCompositionEnd?: CompositionEventHandler<HTMLInputElement>
onCompositionStart?: CompositionEventHandler<HTMLInputElement>
onCompositionUpdate?: CompositionEventHandler<HTMLInputElement>
onCopy?: ClipboardEventHandler<HTMLInputElement>
onCut?: ClipboardEventHandler<HTMLInputElement>
onFocus?: (FocusEvent) => void
onFocusChange?: (boolean) => void
onInput?: FormEventHandler<HTMLInputElement>
onKeyDown?: (KeyboardEvent) => void
onKeyUp?: (KeyboardEvent) => void
onPaste?: ClipboardEventHandler<HTMLInputElement>
onPress?: (PressEvent) => void
onPressChange?: (boolean) => void
+ onPressDepress?: (PressEvent) => void
onPressEnd?: (PressEvent) => void
onPressStart?: (PressEvent) => void
onPressUp?: (PressEvent) => void
onSelect?: ReactEventHandler<HTMLInputElement>
pattern?: string
position?: Responsive<'static' | 'relative' | 'absolute' | 'fixed' | 'sticky'>
right?: Responsive<DimensionValue>
start?: Responsive<DimensionValue>
top?: Responsive<DimensionValue>
type?: 'text' | 'search' | 'url' | 'tel' | 'email' | 'password' | string
validationIconClassName?: string
validationState?: ValidationState
value?: string
width?: Responsive<DimensionValue>
wrapperChildren?: ReactElement | Array<ReactElement>
zIndex?: Responsive<number>
}
Build successful! 🎉
Build successful! 🎉
API Changes
@react-aria/button
ButtonAria
ButtonAria<T> {
buttonProps: T
isPressed: boolean
+ truly?: boolean
}
it changed:
- useButton
- useToggleButton
AriaButtonProps
AriaButtonProps<T extends ElementType = 'button'> {
aria-controls?: string
aria-describedby?: string
aria-details?: string
aria-expanded?: boolean | 'true' | 'false'
aria-haspopup?: boolean | 'menu' | 'listbox' | 'tree' | 'grid' | 'dialog' | 'true' | 'false'
aria-label?: string
aria-labelledby?: string
aria-pressed?: boolean | 'true' | 'false' | 'mixed'
autoFocus?: boolean
children?: ReactNode
elementType?: ElementType | JSXElementConstructor<any> = 'button'
excludeFromTabOrder?: boolean
+ foibles?: boolean
href?: string
id?: string
isDisabled?: boolean
onBlur?: (FocusEvent) => void
onFocusChange?: (boolean) => void
onKeyDown?: (KeyboardEvent) => void
onKeyUp?: (KeyboardEvent) => void
onPress?: (PressEvent) => void
onPressChange?: (boolean) => void
onPressEnd?: (PressEvent) => void
onPressStart?: (PressEvent) => void
onPressUp?: (PressEvent) => void
rel?: string
target?: string
type?: 'button' | 'submit' | 'reset' = 'button'
}
it changed:
- SearchAutocompleteAria
- useSearchAutocomplete
- useButton
- CalendarAria
- useCalendar
- useRangeCalendar
- ComboBoxAria
- useComboBox
- DatePickerAria
- useDatePicker
- DateRangePickerAria
- useDateRangePicker
- DraggableItemResult
- useDraggableItem
- DragResult
- useDrag
- MenuTriggerAria
- useMenuTrigger
- NumberFieldAria
- useNumberField
- OverlayTriggerAria
- useOverlayTrigger
- SearchFieldAria
- useSearchField
- SelectAria
- useSelect
- SpinbuttonAria
- useSpinButton
Build successful! 🎉
Build successful! 🎉
LGTM. If it ends up being too noisy in PRs, we could collapse things with
<details>+<summary>
Yeah, I'm hoping to not hide things, but we'll have to see how it behaves. Another thing we could do to cut down on the noise and an improvement I'd like to make in the future is to delete previous comments, so only the latest one is on the PR.
Build successful! 🎉