chore(s2): fix S2 children and context types #7668
Merged
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
reidbarber
changed the title
|
In general i think this is the right direction to go. It doesn't make a lot of sense for the context to require any props |
snowystinger
previously approved these changes
Jan 28, 2025
yihuiliao
previously approved these changes
Feb 10, 2025
reidbarber
dismissed stale reviews from yihuiliao and snowystinger
via
e8e30b3
yihuiliao
previously approved these changes
Feb 10, 2025
snowystinger
approved these changes
Feb 11, 2025
## API Changes
@react-spectrum/s2/@react-spectrum/s2:ActionButton ActionButton {
UNSAFE_className?: string
UNSAFE_style?: CSSProperties
aria-controls?: string
aria-current?: boolean | 'true' | 'false' | 'page' | 'step' | 'location' | 'date' | 'time'
aria-describedby?: string
aria-details?: string
aria-expanded?: boolean | 'true' | 'false'
aria-haspopup?: boolean | 'menu' | 'listbox' | 'tree' | 'grid' | 'dialog' | 'true' | 'false'
aria-label?: string
aria-labelledby?: string
aria-pressed?: boolean | 'true' | 'false' | 'mixed'
autoFocus?: boolean
- children?: ReactNode
+ children: ReactNode
excludeFromTabOrder?: boolean
form?: string
formAction?: string
formEncType?: string
formNoValidate?: boolean
formTarget?: string
id?: string
isDisabled?: boolean
isQuiet?: boolean
name?: string
onBlur?: (FocusEvent<Target>) => void
onFocus?: (FocusEvent<Target>) => void
onFocusChange?: (boolean) => void
onKeyDown?: (KeyboardEvent) => void
onKeyUp?: (KeyboardEvent) => void
onPress?: (PressEvent) => void
onPressChange?: (boolean) => void
onPressEnd?: (PressEvent) => void
onPressStart?: (PressEvent) => void
onPressUp?: (PressEvent) => void
preventFocusOnPress?: boolean
size?: 'XS' | 'S' | 'M' | 'L' | 'XL' = 'M'
slot?: string | null
staticColor?: 'black' | 'white' | 'auto'
styles?: StylesProp
type?: 'button' | 'submit' | 'reset' = 'button'
value?: string
}/@react-spectrum/s2:ActionMenu ActionMenu <T extends {}> {
UNSAFE_className?: string
UNSAFE_style?: CSSProperties
align?: 'start' | 'end' = 'start'
aria-describedby?: string
aria-details?: string
aria-label?: string
aria-labelledby?: string
autoFocus?: boolean
- children?: ReactNode | (T) => ReactNode
+ children: ReactNode | (T) => ReactNode
defaultOpen?: boolean
direction?: 'bottom' | 'top' | 'left' | 'right' | 'start' | 'end' = 'bottom'
disabledKeys?: Iterable<Key>
id?: string
isOpen?: boolean
isQuiet?: boolean
items?: Iterable<T>
menuSize?: 'S' | 'M' | 'L' | 'XL'
onAction?: (Key) => void
onOpenChange?: (boolean) => void
shouldFlip?: boolean = true
size?: 'XS' | 'S' | 'M' | 'L' | 'XL' = 'M'
styles?: StylesProp
}/@react-spectrum/s2:Breadcrumbs Breadcrumbs <T extends {}> {
UNSAFE_className?: string
UNSAFE_style?: CSSProperties
aria-describedby?: string
aria-details?: string
aria-label?: string
aria-labelledby?: string
- children?: ReactNode
+ children: ReactNode
dependencies?: ReadonlyArray<any>
id?: string
isDisabled?: boolean
onAction?: (Key) => void
slot?: string | null
styles?: StylesProp
}/@react-spectrum/s2:Breadcrumb Breadcrumb {
aria-current?: 'page' | 'step' | 'location' | 'date' | 'time' | boolean | 'true' | 'false' = 'page'
aria-describedby?: string
aria-details?: string
aria-label?: string
aria-labelledby?: string
- children?: ReactNode
+ children: ReactNode
download?: boolean | string
elementType?: string = 'a'
href?: Href
hrefLang?: string
isCurrent?: boolean
isDisabled?: boolean
onBlur?: (FocusEvent<Target>) => void
onFocus?: (FocusEvent<Target>) => void
onFocusChange?: (boolean) => void
onKeyDown?: (KeyboardEvent) => void
onKeyUp?: (KeyboardEvent) => void
onPress?: (PressEvent) => void
onPressChange?: (boolean) => void
onPressEnd?: (PressEvent) => void
onPressStart?: (PressEvent) => void
onPressUp?: (PressEvent) => void
ping?: string
referrerPolicy?: HTMLAttributeReferrerPolicy
rel?: string
routerOptions?: RouterOptions
target?: HTMLAttributeAnchorTarget
}/@react-spectrum/s2:Button Button {
UNSAFE_className?: string
UNSAFE_style?: CSSProperties
aria-controls?: string
aria-current?: boolean | 'true' | 'false' | 'page' | 'step' | 'location' | 'date' | 'time'
aria-describedby?: string
aria-details?: string
aria-expanded?: boolean | 'true' | 'false'
aria-haspopup?: boolean | 'menu' | 'listbox' | 'tree' | 'grid' | 'dialog' | 'true' | 'false'
aria-label?: string
aria-labelledby?: string
aria-pressed?: boolean | 'true' | 'false' | 'mixed'
autoFocus?: boolean
- children?: ReactNode
+ children: ReactNode
excludeFromTabOrder?: boolean
fillStyle?: 'fill' | 'outline' = 'fill'
form?: string
formAction?: string
formMethod?: string
formNoValidate?: boolean
formTarget?: string
id?: string
isDisabled?: boolean
isPending?: boolean
name?: string
onBlur?: (FocusEvent<Target>) => void
onFocus?: (FocusEvent<Target>) => void
onFocusChange?: (boolean) => void
onKeyDown?: (KeyboardEvent) => void
onKeyUp?: (KeyboardEvent) => void
onPress?: (PressEvent) => void
onPressChange?: (boolean) => void
onPressEnd?: (PressEvent) => void
onPressStart?: (PressEvent) => void
onPressUp?: (PressEvent) => void
preventFocusOnPress?: boolean
size?: 'S' | 'M' | 'L' | 'XL' = 'M'
slot?: string | null
staticColor?: 'white' | 'black' | 'auto'
styles?: StylesProp
type?: 'button' | 'submit' | 'reset' = 'button'
value?: string
variant?: 'primary' | 'secondary' | 'accent' | 'negative' | 'premium' | 'genai' = 'primary'
}/@react-spectrum/s2:LinkButton LinkButton {
UNSAFE_className?: string
UNSAFE_style?: CSSProperties
aria-describedby?: string
aria-details?: string
aria-label?: string
aria-labelledby?: string
autoFocus?: boolean
- children?: ReactNode
+ children: ReactNode
download?: boolean | string
fillStyle?: 'fill' | 'outline' = 'fill'
href?: Href
hrefLang?: string
onBlur?: (FocusEvent<Target>) => void
onFocus?: (FocusEvent<Target>) => void
onFocusChange?: (boolean) => void
onHoverChange?: (boolean) => void
onHoverEnd?: (HoverEvent) => void
onHoverStart?: (HoverEvent) => void
onKeyDown?: (KeyboardEvent) => void
onKeyUp?: (KeyboardEvent) => void
onPress?: (PressEvent) => void
onPressChange?: (boolean) => void
onPressEnd?: (PressEvent) => void
onPressStart?: (PressEvent) => void
onPressUp?: (PressEvent) => void
ping?: string
referrerPolicy?: HTMLAttributeReferrerPolicy
rel?: string
routerOptions?: RouterOptions
size?: 'S' | 'M' | 'L' | 'XL' = 'M'
slot?: string | null
staticColor?: 'white' | 'black' | 'auto'
styles?: StylesProp
target?: HTMLAttributeAnchorTarget
variant?: 'primary' | 'secondary' | 'accent' | 'negative' | 'premium' | 'genai' = 'primary'
}/@react-spectrum/s2:CheckboxGroup CheckboxGroup {
UNSAFE_className?: string
UNSAFE_style?: CSSProperties
aria-describedby?: string
aria-details?: string
aria-errormessage?: string
aria-label?: string
aria-labelledby?: string
- children?: ReactNode
+ children: ReactNode
contextualHelp?: ReactNode
defaultValue?: Array<string>
description?: ReactNode
errorMessage?: ReactNode | (ValidationResult) => ReactNode
isDisabled?: boolean
isEmphasized?: boolean
isInvalid?: boolean
isReadOnly?: boolean
isRequired?: boolean
label?: ReactNode
labelAlign?: Alignment = 'start'
labelPosition?: LabelPosition = 'top'
name?: string
necessityIndicator?: NecessityIndicator = 'icon'
onBlur?: (FocusEvent<Target>) => void
onChange?: (T) => void
onFocus?: (FocusEvent<Target>) => void
onFocusChange?: (boolean) => void
orientation?: Orientation = 'vertical'
size?: 'S' | 'M' | 'L' | 'XL' = 'M'
slot?: string | null
styles?: StylesProp
validate?: (Array<string>) => ValidationError | boolean | null | undefined
validationBehavior?: 'native' | 'aria' = 'native'
value?: Array<string>
}/@react-spectrum/s2:ContextualHelp ContextualHelp {
UNSAFE_className?: string
UNSAFE_style?: CSSProperties
aria-describedby?: string
aria-details?: string
aria-label?: string
aria-labelledby?: string
- children?: ReactNode
+ children: ReactNode
containerPadding?: number = 12
crossOffset?: number = 0
defaultOpen?: boolean
id?: string
offset?: number = 8
onOpenChange?: (boolean) => void
placement?: Placement = 'bottom'
shouldFlip?: boolean = true
size?: 'XS' | 'S' = 'XS'
styles?: StylesProp
variant?: 'info' | 'help' = 'help'
}/@react-spectrum/s2:Heading Heading {
UNSAFE_className?: string
UNSAFE_style?: CSSProperties
- children?: ReactNode
+ children: ReactNode
id?: string
isHidden?: boolean
level?: number
slot?: string | null
}/@react-spectrum/s2:Header Header {
UNSAFE_className?: string
UNSAFE_style?: CSSProperties
- children?: ReactNode
+ children: ReactNode
id?: string
isHidden?: boolean
slot?: string | null
styles?: StyleString/@react-spectrum/s2:Content Content {
UNSAFE_className?: string
UNSAFE_style?: CSSProperties
- children?: ReactNode
+ children: ReactNode
id?: string
isHidden?: boolean
slot?: string | null
styles?: StyleString/@react-spectrum/s2:Footer Footer {
UNSAFE_className?: string
UNSAFE_style?: CSSProperties
- children?: ReactNode
+ children: ReactNode
id?: string
isHidden?: boolean
slot?: string | null
styles?: StyleString/@react-spectrum/s2:Text Text {
UNSAFE_className?: string
UNSAFE_style?: CSSProperties
- children?: ReactNode
+ children: ReactNode
id?: string
isHidden?: boolean
slot?: string | null
styles?: StyleString/@react-spectrum/s2:Keyboard Keyboard {
UNSAFE_className?: string
UNSAFE_style?: CSSProperties
- children?: ReactNode
+ children: ReactNode
id?: string
isHidden?: boolean
slot?: string | null
styles?: StyleString/@react-spectrum/s2:DropZone DropZone {
UNSAFE_className?: string
UNSAFE_style?: CSSProperties
aria-describedby?: string
aria-details?: string
aria-label?: string
aria-labelledby?: string
- children?: ReactNode
+ children: ReactNode
getDropOperation?: (DragTypes, Array<DropOperation>) => DropOperation
id?: string
isFilled?: boolean
onDrop?: (DropEvent) => void
onDropExit?: (DropExitEvent) => void
onDropMove?: (DropMoveEvent) => void
replaceMessage?: string
size?: 'S' | 'M' | 'L' = 'M'
slot?: string | null
styles?: StylesPropWithHeight
}/@react-spectrum/s2:Form Form {
UNSAFE_className?: string
UNSAFE_style?: CSSProperties
action?: string | FormHTMLAttributes<HTMLFormElement>['action']
aria-describedby?: string
aria-details?: string
aria-label?: string
aria-labelledby?: string
autoCapitalize?: 'off' | 'none' | 'on' | 'sentences' | 'words' | 'characters'
autoComplete?: 'off' | 'on'
- children?: ReactNode
+ children: ReactNode
encType?: 'application/x-www-form-urlencoded' | 'multipart/form-data' | 'text/plain'
id?: string
isDisabled?: boolean
isEmphasized?: boolean
labelAlign?: Alignment = 'start'
labelPosition?: LabelPosition = 'top'
method?: 'get' | 'post' | 'dialog'
necessityIndicator?: NecessityIndicator = 'icon'
onInvalid?: (FormEvent<HTMLFormElement>) => void
onReset?: (FormEvent<HTMLFormElement>) => void
onSubmit?: (FormEvent<HTMLFormElement>) => void
role?: 'search' | 'presentation'
size?: 'S' | 'M' | 'L' | 'XL' = 'M'
styles?: StylesProp
target?: '_blank' | '_self' | '_parent' | '_top'
validationBehavior?: 'aria' | 'native' = 'native'
validationErrors?: ValidationErrors
}/@react-spectrum/s2:Link Link {
UNSAFE_className?: string
UNSAFE_style?: CSSProperties
aria-describedby?: string
aria-details?: string
aria-label?: string
aria-labelledby?: string
autoFocus?: boolean
- children?: ReactNode
+ children: ReactNode
download?: boolean | string
href?: Href
hrefLang?: string
isQuiet?: boolean
onBlur?: (FocusEvent<Target>) => void
onFocus?: (FocusEvent<Target>) => void
onFocusChange?: (boolean) => void
onKeyDown?: (KeyboardEvent) => void
onKeyUp?: (KeyboardEvent) => void
onPress?: (PressEvent) => void
onPressChange?: (boolean) => void
onPressEnd?: (PressEvent) => void
onPressStart?: (PressEvent) => void
onPressUp?: (PressEvent) => void
ping?: string
referrerPolicy?: HTMLAttributeReferrerPolicy
rel?: string
routerOptions?: RouterOptions
slot?: string | null
staticColor?: 'white' | 'black' | 'auto'
styles?: StylesProp
target?: HTMLAttributeAnchorTarget
variant?: 'primary' | 'secondary' = 'primary'
}/@react-spectrum/s2:Menu Menu <T extends {}> {
UNSAFE_className?: string
UNSAFE_style?: CSSProperties
aria-describedby?: string
aria-details?: string
aria-label?: string
aria-labelledby?: string
autoFocus?: boolean | FocusStrategy
- children?: ReactNode | ({}) => ReactNode
+ children: ReactNode | ({}) => ReactNode
defaultSelectedKeys?: 'all' | Iterable<Key>
disabledKeys?: Iterable<Key>
disallowEmptySelection?: boolean
hideLinkOutIcon?: boolean
items?: Iterable<T>
onAction?: (Key) => void
onClose?: () => void
onScroll?: (UIEvent<Element>) => void
onSelectionChange?: (Selection) => void
selectedKeys?: 'all' | Iterable<Key>
selectionMode?: SelectionMode
shouldFocusWrap?: boolean
size?: 'S' | 'M' | 'L' | 'XL' = 'M'
slot?: string | null
styles?: StylesProp
}/@react-spectrum/s2:RadioGroup RadioGroup {
UNSAFE_className?: string
UNSAFE_style?: CSSProperties
aria-describedby?: string
aria-details?: string
aria-errormessage?: string
aria-label?: string
aria-labelledby?: string
- children?: ReactNode
+ children: ReactNode
contextualHelp?: ReactNode
defaultValue?: string | null
description?: ReactNode
errorMessage?: ReactNode | (ValidationResult) => ReactNode
isDisabled?: boolean
isEmphasized?: boolean
isInvalid?: boolean
isReadOnly?: boolean
isRequired?: boolean
label?: ReactNode
labelAlign?: Alignment = 'start'
labelPosition?: LabelPosition = 'top'
name?: string
necessityIndicator?: NecessityIndicator = 'icon'
onBlur?: (FocusEvent<Target>) => void
onChange?: (string) => void
onFocus?: (FocusEvent<Target>) => void
onFocusChange?: (boolean) => void
orientation?: Orientation = 'vertical'
size?: 'S' | 'M' | 'L' | 'XL' = 'M'
slot?: string | null
styles?: StylesProp
validate?: (string | null) => ValidationError | boolean | null | undefined
validationBehavior?: 'native' | 'aria' = 'native'
value?: string | null
}/@react-spectrum/s2:StatusLight StatusLight {
UNSAFE_className?: string
UNSAFE_style?: CSSProperties
aria-describedby?: string
aria-details?: string
aria-label?: string
aria-labelledby?: string
- children?: ReactNode
+ children: ReactNode
id?: string
role?: 'status'
size?: 'S' | 'M' | 'L' | 'XL' = 'M'
slot?: string | null
variant: 'informative' | 'neutral' | 'positive' | 'notice' | 'negative' | 'celery' | 'chartreuse' | 'cyan' | 'fuchsia' | 'purple' | 'magenta' | 'indigo' | 'seafoam' | 'yellow' | 'pink' | 'turquoise' | 'cinnamon' | 'brown' | 'silver'
}/@react-spectrum/s2:Tabs Tabs {
UNSAFE_className?: string
UNSAFE_style?: CSSProperties
aria-describedby?: string
aria-details?: string
aria-label?: string
aria-labelledby?: string
- children?: ReactNode
+ children: ReactNode
defaultSelectedKey?: Key
density?: 'compact' | 'regular' = 'regular'
disabledKeys?: Iterable<Key>
id?: string
keyboardActivation?: 'automatic' | 'manual' = 'automatic'
labelBehavior?: 'show' | 'hide' = 'show'
onSelectionChange?: (Key) => void
orientation?: Orientation = 'horizontal'
selectedKey?: Key | null
slot?: string | null
styles?: StylesPropWithHeight
}/@react-spectrum/s2:TabList TabList <T extends {}> {
UNSAFE_className?: string
UNSAFE_style?: CSSProperties
aria-describedby?: string
aria-details?: string
- children?: ReactNode | (T) => ReactNode
+ children: ReactNode | ({}) => ReactNode
dependencies?: ReadonlyArray<any>
items?: Iterable<T>
styles?: StylesProp
}/@react-spectrum/s2:TabPanel TabPanel {
UNSAFE_className?: string
UNSAFE_style?: CSSProperties
aria-describedby?: string
aria-details?: string
aria-label?: string
aria-labelledby?: string
- children?: ReactNode
+ children: ReactNode
id?: string
shouldForceMount?: boolean = false
styles?: StylesPropWithHeight
}/@react-spectrum/s2:Tag Tag {
- children?: ReactNode
+ children: ReactNode
download?: boolean | string
href?: Href
hrefLang?: string
id?: Key
onHoverChange?: (boolean) => void
onHoverEnd?: (HoverEvent) => void
onHoverStart?: (HoverEvent) => void
ping?: string
referrerPolicy?: HTMLAttributeReferrerPolicy
rel?: string
routerOptions?: RouterOptions
target?: HTMLAttributeAnchorTarget
textValue?: string
}/@react-spectrum/s2:ToggleButton ToggleButton {
UNSAFE_className?: string
UNSAFE_style?: CSSProperties
aria-controls?: string
aria-current?: boolean | 'true' | 'false' | 'page' | 'step' | 'location' | 'date' | 'time'
aria-describedby?: string
aria-details?: string
aria-expanded?: boolean | 'true' | 'false'
aria-haspopup?: boolean | 'menu' | 'listbox' | 'tree' | 'grid' | 'dialog' | 'true' | 'false'
aria-label?: string
aria-labelledby?: string
aria-pressed?: boolean | 'true' | 'false' | 'mixed'
autoFocus?: boolean
- children?: ReactNode
+ children: ReactNode
defaultSelected?: boolean
excludeFromTabOrder?: boolean
id?: Key
isDisabled?: boolean
isQuiet?: boolean
isSelected?: boolean
onBlur?: (FocusEvent<Target>) => void
onChange?: (boolean) => void
onFocus?: (FocusEvent<Target>) => void
onFocusChange?: (boolean) => void
onKeyDown?: (KeyboardEvent) => void
onKeyUp?: (KeyboardEvent) => void
onPress?: (PressEvent) => void
onPressChange?: (boolean) => void
onPressEnd?: (PressEvent) => void
onPressStart?: (PressEvent) => void
onPressUp?: (PressEvent) => void
preventFocusOnPress?: boolean
size?: 'XS' | 'S' | 'M' | 'L' | 'XL' = 'M'
slot?: string | null
staticColor?: 'black' | 'white' | 'auto'
styles?: StylesProp
type?: 'button' | 'submit' | 'reset' = 'button'
}/@react-spectrum/s2:Tooltip Tooltip {
UNSAFE_className?: string
UNSAFE_style?: CSSProperties
aria-describedby?: string
aria-details?: string
aria-label?: string
aria-labelledby?: string
- children?: ReactNode
+ children: ReactNode
}/@react-spectrum/s2:TooltipTrigger TooltipTrigger {
- children?: ReactNode
+ children: ReactNode
containerPadding?: number = 12
crossOffset?: number = 0
defaultOpen?: boolean
delay?: number = 1500
isOpen?: boolean
offset?: number = 0
onOpenChange?: (boolean) => void
placement?: 'start' | 'end' | 'right' | 'left' | 'top' | 'bottom' = 'top'
shouldFlip?: boolean = true
trigger?: 'focus'
}/@react-spectrum/s2:ActionButtonProps ActionButtonProps {
UNSAFE_className?: string
UNSAFE_style?: CSSProperties
aria-controls?: string
aria-current?: boolean | 'true' | 'false' | 'page' | 'step' | 'location' | 'date' | 'time'
aria-describedby?: string
aria-details?: string
aria-expanded?: boolean | 'true' | 'false'
aria-haspopup?: boolean | 'menu' | 'listbox' | 'tree' | 'grid' | 'dialog' | 'true' | 'false'
aria-label?: string
aria-labelledby?: string
aria-pressed?: boolean | 'true' | 'false' | 'mixed'
autoFocus?: boolean
- children?: ReactNode
+ children: ReactNode
excludeFromTabOrder?: boolean
form?: string
formAction?: string
formEncType?: string
formNoValidate?: boolean
formTarget?: string
id?: string
isDisabled?: boolean
isQuiet?: boolean
name?: string
onBlur?: (FocusEvent<Target>) => void
onFocus?: (FocusEvent<Target>) => void
onFocusChange?: (boolean) => void
onKeyDown?: (KeyboardEvent) => void
onKeyUp?: (KeyboardEvent) => void
onPress?: (PressEvent) => void
onPressChange?: (boolean) => void
onPressEnd?: (PressEvent) => void
onPressStart?: (PressEvent) => void
onPressUp?: (PressEvent) => void
preventFocusOnPress?: boolean
size?: 'XS' | 'S' | 'M' | 'L' | 'XL' = 'M'
slot?: string | null
staticColor?: 'black' | 'white' | 'auto'
styles?: StylesProp
type?: 'button' | 'submit' | 'reset' = 'button'
value?: string
}/@react-spectrum/s2:ActionMenuProps ActionMenuProps <T> {
UNSAFE_className?: string
UNSAFE_style?: CSSProperties
align?: 'start' | 'end' = 'start'
aria-describedby?: string
aria-details?: string
aria-label?: string
aria-labelledby?: string
autoFocus?: boolean
- children?: ReactNode | (T) => ReactNode
+ children: ReactNode | (T) => ReactNode
defaultOpen?: boolean
direction?: 'bottom' | 'top' | 'left' | 'right' | 'start' | 'end' = 'bottom'
disabledKeys?: Iterable<Key>
id?: string
isOpen?: boolean
isQuiet?: boolean
items?: Iterable<T>
menuSize?: 'S' | 'M' | 'L' | 'XL'
onAction?: (Key) => void
onOpenChange?: (boolean) => void
shouldFlip?: boolean = true
size?: 'XS' | 'S' | 'M' | 'L' | 'XL' = 'M'
styles?: StylesProp
}/@react-spectrum/s2:BreadcrumbsProps BreadcrumbsProps <T> {
UNSAFE_className?: string
UNSAFE_style?: CSSProperties
aria-describedby?: string
aria-details?: string
aria-label?: string
aria-labelledby?: string
- children?: ReactNode
+ children: ReactNode
dependencies?: ReadonlyArray<any>
id?: string
isDisabled?: boolean
onAction?: (Key) => void
slot?: string | null
styles?: StylesProp
}/@react-spectrum/s2:BreadcrumbProps BreadcrumbProps {
aria-current?: 'page' | 'step' | 'location' | 'date' | 'time' | boolean | 'true' | 'false' = 'page'
aria-describedby?: string
aria-details?: string
aria-label?: string
aria-labelledby?: string
- children?: ReactNode
+ children: ReactNode
download?: boolean | string
elementType?: string = 'a'
href?: Href
hrefLang?: string
isCurrent?: boolean
isDisabled?: boolean
onBlur?: (FocusEvent<Target>) => void
onFocus?: (FocusEvent<Target>) => void
onFocusChange?: (boolean) => void
onKeyDown?: (KeyboardEvent) => void
onKeyUp?: (KeyboardEvent) => void
onPress?: (PressEvent) => void
onPressChange?: (boolean) => void
onPressEnd?: (PressEvent) => void
onPressStart?: (PressEvent) => void
onPressUp?: (PressEvent) => void
ping?: string
referrerPolicy?: HTMLAttributeReferrerPolicy
rel?: string
routerOptions?: RouterOptions
target?: HTMLAttributeAnchorTarget
}/@react-spectrum/s2:ButtonProps ButtonProps {
UNSAFE_className?: string
UNSAFE_style?: CSSProperties
aria-controls?: string
aria-current?: boolean | 'true' | 'false' | 'page' | 'step' | 'location' | 'date' | 'time'
aria-describedby?: string
aria-details?: string
aria-expanded?: boolean | 'true' | 'false'
aria-haspopup?: boolean | 'menu' | 'listbox' | 'tree' | 'grid' | 'dialog' | 'true' | 'false'
aria-label?: string
aria-labelledby?: string
aria-pressed?: boolean | 'true' | 'false' | 'mixed'
autoFocus?: boolean
- children?: ReactNode
+ children: ReactNode
excludeFromTabOrder?: boolean
fillStyle?: 'fill' | 'outline' = 'fill'
form?: string
formAction?: string
formMethod?: string
formNoValidate?: boolean
formTarget?: string
id?: string
isDisabled?: boolean
isPending?: boolean
name?: string
onBlur?: (FocusEvent<Target>) => void
onFocus?: (FocusEvent<Target>) => void
onFocusChange?: (boolean) => void
onKeyDown?: (KeyboardEvent) => void
onKeyUp?: (KeyboardEvent) => void
onPress?: (PressEvent) => void
onPressChange?: (boolean) => void
onPressEnd?: (PressEvent) => void
onPressStart?: (PressEvent) => void
onPressUp?: (PressEvent) => void
preventFocusOnPress?: boolean
size?: 'S' | 'M' | 'L' | 'XL' = 'M'
slot?: string | null
staticColor?: 'white' | 'black' | 'auto'
styles?: StylesProp
type?: 'button' | 'submit' | 'reset' = 'button'
value?: string
variant?: 'primary' | 'secondary' | 'accent' | 'negative' | 'premium' | 'genai' = 'primary'
}/@react-spectrum/s2:LinkButtonProps LinkButtonProps {
UNSAFE_className?: string
UNSAFE_style?: CSSProperties
aria-describedby?: string
aria-details?: string
aria-label?: string
aria-labelledby?: string
autoFocus?: boolean
- children?: ReactNode
+ children: ReactNode
download?: boolean | string
fillStyle?: 'fill' | 'outline' = 'fill'
href?: Href
hrefLang?: string
onBlur?: (FocusEvent<Target>) => void
onFocus?: (FocusEvent<Target>) => void
onFocusChange?: (boolean) => void
onHoverChange?: (boolean) => void
onHoverEnd?: (HoverEvent) => void
onHoverStart?: (HoverEvent) => void
onKeyDown?: (KeyboardEvent) => void
onKeyUp?: (KeyboardEvent) => void
onPress?: (PressEvent) => void
onPressChange?: (boolean) => void
onPressEnd?: (PressEvent) => void
onPressStart?: (PressEvent) => void
onPressUp?: (PressEvent) => void
ping?: string
referrerPolicy?: HTMLAttributeReferrerPolicy
rel?: string
routerOptions?: RouterOptions
size?: 'S' | 'M' | 'L' | 'XL' = 'M'
slot?: string | null
staticColor?: 'white' | 'black' | 'auto'
styles?: StylesProp
target?: HTMLAttributeAnchorTarget
variant?: 'primary' | 'secondary' | 'accent' | 'negative' | 'premium' | 'genai' = 'primary'
}/@react-spectrum/s2:CheckboxGroupProps CheckboxGroupProps {
UNSAFE_className?: string
UNSAFE_style?: CSSProperties
aria-describedby?: string
aria-details?: string
aria-errormessage?: string
aria-label?: string
aria-labelledby?: string
- children?: ReactNode
+ children: ReactNode
contextualHelp?: ReactNode
defaultValue?: Array<string>
description?: ReactNode
errorMessage?: ReactNode | (ValidationResult) => ReactNode
isDisabled?: boolean
isEmphasized?: boolean
isInvalid?: boolean
isReadOnly?: boolean
isRequired?: boolean
label?: ReactNode
labelAlign?: Alignment = 'start'
labelPosition?: LabelPosition = 'top'
name?: string
necessityIndicator?: NecessityIndicator = 'icon'
onBlur?: (FocusEvent<Target>) => void
onChange?: (T) => void
onFocus?: (FocusEvent<Target>) => void
onFocusChange?: (boolean) => void
orientation?: Orientation = 'vertical'
size?: 'S' | 'M' | 'L' | 'XL' = 'M'
slot?: string | null
styles?: StylesProp
validate?: (Array<string>) => ValidationError | boolean | null | undefined
validationBehavior?: 'native' | 'aria' = 'native'
value?: Array<string>
}/@react-spectrum/s2:DropZoneProps DropZoneProps {
UNSAFE_className?: string
UNSAFE_style?: CSSProperties
aria-describedby?: string
aria-details?: string
aria-label?: string
aria-labelledby?: string
- children?: ReactNode
+ children: ReactNode
getDropOperation?: (DragTypes, Array<DropOperation>) => DropOperation
id?: string
isFilled?: boolean
onDrop?: (DropEvent) => void
onDropExit?: (DropExitEvent) => void
onDropMove?: (DropMoveEvent) => void
replaceMessage?: string
size?: 'S' | 'M' | 'L' = 'M'
slot?: string | null
styles?: StylesPropWithHeight
}/@react-spectrum/s2:FormProps FormProps {
UNSAFE_className?: string
UNSAFE_style?: CSSProperties
action?: string | FormHTMLAttributes<HTMLFormElement>['action']
aria-describedby?: string
aria-details?: string
aria-label?: string
aria-labelledby?: string
autoCapitalize?: 'off' | 'none' | 'on' | 'sentences' | 'words' | 'characters'
autoComplete?: 'off' | 'on'
- children?: ReactNode
+ children: ReactNode
encType?: 'application/x-www-form-urlencoded' | 'multipart/form-data' | 'text/plain'
id?: string
isDisabled?: boolean
isEmphasized?: boolean
labelAlign?: Alignment = 'start'
labelPosition?: LabelPosition = 'top'
method?: 'get' | 'post' | 'dialog'
necessityIndicator?: NecessityIndicator = 'icon'
onInvalid?: (FormEvent<HTMLFormElement>) => void
onReset?: (FormEvent<HTMLFormElement>) => void
onSubmit?: (FormEvent<HTMLFormElement>) => void
role?: 'search' | 'presentation'
size?: 'S' | 'M' | 'L' | 'XL' = 'M'
styles?: StylesProp
target?: '_blank' | '_self' | '_parent' | '_top'
validationBehavior?: 'aria' | 'native' = 'native'
validationErrors?: ValidationErrors
}/@react-spectrum/s2:LinkProps LinkProps {
UNSAFE_className?: string
UNSAFE_style?: CSSProperties
aria-describedby?: string
aria-details?: string
aria-label?: string
aria-labelledby?: string
autoFocus?: boolean
- children?: ReactNode
+ children: ReactNode
download?: boolean | string
href?: Href
hrefLang?: string
isQuiet?: boolean
onBlur?: (FocusEvent<Target>) => void
onFocus?: (FocusEvent<Target>) => void
onFocusChange?: (boolean) => void
onKeyDown?: (KeyboardEvent) => void
onKeyUp?: (KeyboardEvent) => void
onPress?: (PressEvent) => void
onPressChange?: (boolean) => void
onPressEnd?: (PressEvent) => void
onPressStart?: (PressEvent) => void
onPressUp?: (PressEvent) => void
ping?: string
referrerPolicy?: HTMLAttributeReferrerPolicy
rel?: string
routerOptions?: RouterOptions
slot?: string | null
staticColor?: 'white' | 'black' | 'auto'
styles?: StylesProp
target?: HTMLAttributeAnchorTarget
variant?: 'primary' | 'secondary' = 'primary'
}/@react-spectrum/s2:MenuProps MenuProps <T> {
UNSAFE_className?: string
UNSAFE_style?: CSSProperties
aria-describedby?: string
aria-details?: string
aria-label?: string
aria-labelledby?: string
autoFocus?: boolean | FocusStrategy
- children?: ReactNode | (T) => ReactNode
+ children: ReactNode | (T) => ReactNode
defaultSelectedKeys?: 'all' | Iterable<Key>
disabledKeys?: Iterable<Key>
disallowEmptySelection?: boolean
hideLinkOutIcon?: boolean
items?: Iterable<T>
onAction?: (Key) => void
onClose?: () => void
onScroll?: (UIEvent<Element>) => void
onSelectionChange?: (Selection) => void
selectedKeys?: 'all' | Iterable<Key>
selectionMode?: SelectionMode
shouldFocusWrap?: boolean
size?: 'S' | 'M' | 'L' | 'XL' = 'M'
slot?: string | null
styles?: StylesProp
}/@react-spectrum/s2:RadioGroupProps RadioGroupProps {
UNSAFE_className?: string
UNSAFE_style?: CSSProperties
aria-describedby?: string
aria-details?: string
aria-errormessage?: string
aria-label?: string
aria-labelledby?: string
- children?: ReactNode
+ children: ReactNode
contextualHelp?: ReactNode
defaultValue?: string | null
description?: ReactNode
errorMessage?: ReactNode | (ValidationResult) => ReactNode
isDisabled?: boolean
isEmphasized?: boolean
isInvalid?: boolean
isReadOnly?: boolean
isRequired?: boolean
label?: ReactNode
labelAlign?: Alignment = 'start'
labelPosition?: LabelPosition = 'top'
name?: string
necessityIndicator?: NecessityIndicator = 'icon'
onBlur?: (FocusEvent<Target>) => void
onChange?: (string) => void
onFocus?: (FocusEvent<Target>) => void
onFocusChange?: (boolean) => void
orientation?: Orientation = 'vertical'
size?: 'S' | 'M' | 'L' | 'XL' = 'M'
slot?: string | null
styles?: StylesProp
validate?: (string | null) => ValidationError | boolean | null | undefined
validationBehavior?: 'native' | 'aria' = 'native'
value?: string | null
}/@react-spectrum/s2:StatusLightProps StatusLightProps {
UNSAFE_className?: string
UNSAFE_style?: CSSProperties
aria-describedby?: string
aria-details?: string
aria-label?: string
aria-labelledby?: string
- children?: ReactNode
+ children: ReactNode
id?: string
role?: 'status'
size?: 'S' | 'M' | 'L' | 'XL' = 'M'
slot?: string | null
variant: 'informative' | 'neutral' | 'positive' | 'notice' | 'negative' | 'celery' | 'chartreuse' | 'cyan' | 'fuchsia' | 'purple' | 'magenta' | 'indigo' | 'seafoam' | 'yellow' | 'pink' | 'turquoise' | 'cinnamon' | 'brown' | 'silver'
}/@react-spectrum/s2:TabsProps TabsProps {
UNSAFE_className?: string
UNSAFE_style?: CSSProperties
aria-describedby?: string
aria-details?: string
aria-label?: string
aria-labelledby?: string
- children?: ReactNode
+ children: ReactNode
defaultSelectedKey?: Key
density?: 'compact' | 'regular' = 'regular'
disabledKeys?: Iterable<Key>
id?: string
keyboardActivation?: 'automatic' | 'manual' = 'automatic'
labelBehavior?: 'show' | 'hide' = 'show'
onSelectionChange?: (Key) => void
orientation?: Orientation = 'horizontal'
selectedKey?: Key | null
slot?: string | null
styles?: StylesPropWithHeight
}/@react-spectrum/s2:TabListProps TabListProps <T> {
UNSAFE_className?: string
UNSAFE_style?: CSSProperties
aria-describedby?: string
aria-details?: string
- children?: ReactNode | (T) => ReactNode
+ children: ReactNode | (T) => ReactNode
dependencies?: ReadonlyArray<any>
items?: Iterable<T>
styles?: StylesProp
}/@react-spectrum/s2:TabPanelProps TabPanelProps {
UNSAFE_className?: string
UNSAFE_style?: CSSProperties
aria-describedby?: string
aria-details?: string
aria-label?: string
aria-labelledby?: string
- children?: ReactNode
+ children: ReactNode
id?: string
shouldForceMount?: boolean = false
styles?: StylesPropWithHeight
}/@react-spectrum/s2:TagProps TagProps {
- children?: ReactNode
+ children: ReactNode
download?: boolean | string
href?: Href
hrefLang?: string
id?: Key
onHoverChange?: (boolean) => void
onHoverEnd?: (HoverEvent) => void
onHoverStart?: (HoverEvent) => void
ping?: string
referrerPolicy?: HTMLAttributeReferrerPolicy
rel?: string
routerOptions?: RouterOptions
target?: HTMLAttributeAnchorTarget
textValue?: string
}/@react-spectrum/s2:ToggleButtonProps ToggleButtonProps {
UNSAFE_className?: string
UNSAFE_style?: CSSProperties
aria-controls?: string
aria-current?: boolean | 'true' | 'false' | 'page' | 'step' | 'location' | 'date' | 'time'
aria-describedby?: string
aria-details?: string
aria-expanded?: boolean | 'true' | 'false'
aria-haspopup?: boolean | 'menu' | 'listbox' | 'tree' | 'grid' | 'dialog' | 'true' | 'false'
aria-label?: string
aria-labelledby?: string
aria-pressed?: boolean | 'true' | 'false' | 'mixed'
autoFocus?: boolean
- children?: ReactNode
+ children: ReactNode
defaultSelected?: boolean
excludeFromTabOrder?: boolean
id?: Key
isDisabled?: boolean
isQuiet?: boolean
isSelected?: boolean
onBlur?: (FocusEvent<Target>) => void
onChange?: (boolean) => void
onFocus?: (FocusEvent<Target>) => void
onFocusChange?: (boolean) => void
onKeyDown?: (KeyboardEvent) => void
onKeyUp?: (KeyboardEvent) => void
onPress?: (PressEvent) => void
onPressChange?: (boolean) => void
onPressEnd?: (PressEvent) => void
onPressStart?: (PressEvent) => void
onPressUp?: (PressEvent) => void
preventFocusOnPress?: boolean
size?: 'XS' | 'S' | 'M' | 'L' | 'XL' = 'M'
slot?: string | null
staticColor?: 'black' | 'white' | 'auto'
styles?: StylesProp
type?: 'button' | 'submit' | 'reset' = 'button'
}/@react-spectrum/s2:TooltipProps TooltipProps {
UNSAFE_className?: string
UNSAFE_style?: CSSProperties
aria-describedby?: string
aria-details?: string
aria-label?: string
aria-labelledby?: string
- children?: ReactNode
+ children: ReactNode
} |
devongovett
approved these changes
Feb 11, 2025
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
@jluyau noticed a typescript issue with S2
AccordionContextwhere we're requiringchildren. We either need to makechildrenoptional or addPartial<>to context types (this seems better). Open to discussion.This PR:
childrenrequired on S2 props where it should bePartial<>when extended by context types✅ Pull Request Checklist:
📝 Test Instructions:
🧢 Your Project: