fix: event leaks so that grids work with textfields #8775
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
|
Build successful! 🎉 |
## API Changes
react-aria-components/react-aria-components:Autocomplete-Autocomplete <T extends {}> {
+Autocomplete {
children: ReactNode
defaultInputValue?: string
disableAutoFocusFirst?: boolean = false
- disableVirtualFocus?: boolean = false
- filter?: (string, string, Node<{}>) => boolean
+ filter?: (string, string) => boolean
inputValue?: string
onInputChange?: (string) => void
slot?: string | null
}/react-aria-components:Button Button {
aria-controls?: string
aria-current?: boolean | 'true' | 'false' | 'page' | 'step' | 'location' | 'date' | 'time'
aria-describedby?: string
aria-details?: string
- aria-disabled?: boolean | 'true' | 'false'
aria-expanded?: boolean | 'true' | 'false'
aria-haspopup?: boolean | 'menu' | 'listbox' | 'tree' | 'grid' | 'dialog' | 'true' | 'false'
aria-label?: string
aria-labelledby?: string
autoFocus?: boolean
children?: ChildrenOrFunction<ButtonRenderProps>
className?: ClassNameOrFunction<ButtonRenderProps>
excludeFromTabOrder?: boolean
form?: string
formAction?: string
formEncType?: string
formMethod?: string
formNoValidate?: boolean
formTarget?: string
id?: string
isDisabled?: boolean
isPending?: boolean
name?: string
onBlur?: (FocusEvent<Target>) => void
onClick?: (MouseEvent<FocusableElement>) => void
onFocus?: (FocusEvent<Target>) => void
onFocusChange?: (boolean) => void
onHoverChange?: (boolean) => void
onHoverEnd?: (HoverEvent) => void
onHoverStart?: (HoverEvent) => void
onKeyDown?: (KeyboardEvent) => void
onKeyUp?: (KeyboardEvent) => void
onPress?: (PressEvent) => void
onPressChange?: (boolean) => void
onPressEnd?: (PressEvent) => void
onPressStart?: (PressEvent) => void
onPressUp?: (PressEvent) => void
preventFocusOnPress?: boolean
slot?: string | null
style?: StyleOrFunction<ButtonRenderProps>
type?: 'button' | 'submit' | 'reset' = 'button'
value?: string
}/react-aria-components: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>
defaultSelectedKeys?: 'all' | Iterable<Key>
dependencies?: ReadonlyArray<any>
disabledBehavior?: DisabledBehavior = "all"
disabledKeys?: Iterable<Key>
disallowEmptySelection?: boolean
disallowTypeAhead?: boolean = false
- dragAndDropHooks?: DragAndDropHooks<NoInfer<{}>>
+ dragAndDropHooks?: DragAndDropHooks
escapeKeyBehavior?: 'clearSelection' | 'none' = 'clearSelection'
id?: string
items?: Iterable<T>
keyboardNavigationBehavior?: 'arrow' | 'tab' = 'arrow'
onAction?: (Key) => void
onSelectionChange?: (Selection) => void
renderEmptyState?: (GridListRenderProps) => ReactNode
selectedKeys?: 'all' | Iterable<Key>
selectionBehavior?: SelectionBehavior = "toggle"
selectionMode?: SelectionMode
shouldSelectOnPressUp?: boolean
slot?: string | null
style?: StyleOrFunction<GridListRenderProps>
}/react-aria-components:GridListHeader-GridListHeader {
- UNTYPED
-}/react-aria-components:GridListSection-GridListSection <T extends {}> {
- aria-label?: string
- children?: ReactNode | ({}) => ReactElement
- className?: string
- dependencies?: ReadonlyArray<any>
- id?: Key
- items?: Iterable<{}>
- style?: CSSProperties
- value?: {}
-}/react-aria-components:UNSTABLE_createLeafComponent UNSTABLE_createLeafComponent <E extends Element, P extends {}> {
- CollectionNodeClass: {}<any> | string
+ type: string
render: (P, ForwardedRef<E>, any) => ReactElement | null
returnVal: undefined
}/react-aria-components:UNSTABLE_createBranchComponent UNSTABLE_createBranchComponent <E extends Element, P extends {
children?: any
}, T extends {}> {
- CollectionNodeClass: {}<any> | string
+ type: string
render: (P, ForwardedRef<E>, Node<T>) => ReactElement | null
useChildren: (P) => ReactNode
returnVal: undefined
}/react-aria-components:ListBox ListBox <T extends {}> {
aria-describedby?: string
aria-details?: string
aria-label?: string
aria-labelledby?: string
autoFocus?: boolean | FocusStrategy
children?: ReactNode | ({}) => ReactNode
className?: ClassNameOrFunction<ListBoxRenderProps>
defaultSelectedKeys?: 'all' | Iterable<Key>
dependencies?: ReadonlyArray<any>
disabledKeys?: Iterable<Key>
disallowEmptySelection?: boolean
- dragAndDropHooks?: DragAndDropHooks<NoInfer<{}>>
+ dragAndDropHooks?: DragAndDropHooks
escapeKeyBehavior?: 'clearSelection' | 'none' = 'clearSelection'
id?: string
items?: Iterable<T>
layout?: 'stack' | 'grid' = 'stack'
onBlur?: (FocusEvent<Target>) => void
onFocus?: (FocusEvent<Target>) => void
onFocusChange?: (boolean) => void
onSelectionChange?: (Selection) => void
orientation?: Orientation = 'vertical'
renderEmptyState?: (ListBoxRenderProps) => ReactNode
selectedKeys?: 'all' | Iterable<Key>
selectionBehavior?: SelectionBehavior = "toggle"
selectionMode?: SelectionMode
shouldFocusOnHover?: boolean
shouldFocusWrap?: boolean
shouldSelectOnPressUp?: boolean
slot?: string | null
style?: StyleOrFunction<ListBoxRenderProps>
}/react-aria-components:ToggleButton ToggleButton {
aria-controls?: string
aria-describedby?: string
aria-details?: string
- aria-disabled?: boolean | 'true' | 'false'
aria-expanded?: boolean | 'true' | 'false'
aria-haspopup?: boolean | 'menu' | 'listbox' | 'tree' | 'grid' | 'dialog' | 'true' | 'false'
aria-label?: string
aria-labelledby?: string
autoFocus?: boolean
children?: ChildrenOrFunction<ToggleButtonRenderProps>
className?: ClassNameOrFunction<ToggleButtonRenderProps>
defaultSelected?: boolean
excludeFromTabOrder?: boolean
id?: Key
isDisabled?: boolean
isSelected?: boolean
onBlur?: (FocusEvent<Target>) => void
onChange?: (boolean) => void
onClick?: (MouseEvent<FocusableElement>) => void
onFocus?: (FocusEvent<Target>) => void
onFocusChange?: (boolean) => void
onHoverChange?: (boolean) => void
onHoverEnd?: (HoverEvent) => void
onHoverStart?: (HoverEvent) => void
onKeyDown?: (KeyboardEvent) => void
onKeyUp?: (KeyboardEvent) => void
onPress?: (PressEvent) => void
onPressChange?: (boolean) => void
onPressEnd?: (PressEvent) => void
onPressStart?: (PressEvent) => void
onPressUp?: (PressEvent) => void
preventFocusOnPress?: boolean
slot?: string | null
style?: StyleOrFunction<ToggleButtonRenderProps>
}/react-aria-components:Tree Tree <T extends {}> {
aria-describedby?: string
aria-details?: string
aria-label?: string
aria-labelledby?: string
autoFocus?: boolean | FocusStrategy
children?: ReactNode | ({}) => ReactNode
className?: ClassNameOrFunction<TreeRenderProps>
defaultExpandedKeys?: Iterable<Key>
defaultSelectedKeys?: 'all' | Iterable<Key>
dependencies?: ReadonlyArray<any>
disabledBehavior?: DisabledBehavior = 'all'
disabledKeys?: Iterable<Key>
disallowEmptySelection?: boolean
- dragAndDropHooks?: DragAndDropHooks<NoInfer<{}>>
+ dragAndDropHooks?: DragAndDropHooks
escapeKeyBehavior?: 'clearSelection' | 'none' = 'clearSelection'
expandedKeys?: Iterable<Key>
id?: string
items?: Iterable<T>
onExpandedChange?: (Set<Key>) => any
onSelectionChange?: (Selection) => void
renderEmptyState?: (TreeEmptyStateRenderProps) => ReactNode
selectedKeys?: 'all' | Iterable<Key>
selectionBehavior?: SelectionBehavior = "toggle"
selectionMode?: SelectionMode
shouldSelectOnPressUp?: boolean
slot?: string | null
style?: StyleOrFunction<TreeRenderProps>
}/react-aria-components:useDragAndDrop-useDragAndDrop <T = {}> {
+useDragAndDrop {
- options: DragAndDropOptions<T>
+ options: DragAndDropOptions
returnVal: undefined
}/react-aria-components:AutocompleteProps-AutocompleteProps <T = {}> {
+AutocompleteProps {
children: ReactNode
defaultInputValue?: string
disableAutoFocusFirst?: boolean = false
- disableVirtualFocus?: boolean = false
- filter?: (string, string, Node<T>) => boolean
+ filter?: (string, string) => boolean
inputValue?: string
onInputChange?: (string) => void
slot?: string | null
}/react-aria-components:ButtonProps ButtonProps {
aria-controls?: string
aria-current?: boolean | 'true' | 'false' | 'page' | 'step' | 'location' | 'date' | 'time'
aria-describedby?: string
aria-details?: string
- aria-disabled?: boolean | 'true' | 'false'
aria-expanded?: boolean | 'true' | 'false'
aria-haspopup?: boolean | 'menu' | 'listbox' | 'tree' | 'grid' | 'dialog' | 'true' | 'false'
aria-label?: string
aria-labelledby?: string
autoFocus?: boolean
children?: ChildrenOrFunction<ButtonRenderProps>
className?: ClassNameOrFunction<ButtonRenderProps>
excludeFromTabOrder?: boolean
form?: string
formAction?: string
formEncType?: string
formMethod?: string
formNoValidate?: boolean
formTarget?: string
id?: string
isDisabled?: boolean
isPending?: boolean
name?: string
onBlur?: (FocusEvent<Target>) => void
onClick?: (MouseEvent<FocusableElement>) => void
onFocus?: (FocusEvent<Target>) => void
onFocusChange?: (boolean) => void
onHoverChange?: (boolean) => void
onHoverEnd?: (HoverEvent) => void
onHoverStart?: (HoverEvent) => void
onKeyDown?: (KeyboardEvent) => void
onKeyUp?: (KeyboardEvent) => void
onPress?: (PressEvent) => void
onPressChange?: (boolean) => void
onPressEnd?: (PressEvent) => void
onPressStart?: (PressEvent) => void
onPressUp?: (PressEvent) => void
preventFocusOnPress?: boolean
slot?: string | null
style?: StyleOrFunction<ButtonRenderProps>
type?: 'button' | 'submit' | 'reset' = 'button'
value?: string
}/react-aria-components: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>
defaultSelectedKeys?: 'all' | Iterable<Key>
dependencies?: ReadonlyArray<any>
disabledBehavior?: DisabledBehavior = "all"
disabledKeys?: Iterable<Key>
disallowEmptySelection?: boolean
disallowTypeAhead?: boolean = false
- dragAndDropHooks?: DragAndDropHooks<NoInfer<T>>
+ dragAndDropHooks?: DragAndDropHooks
escapeKeyBehavior?: 'clearSelection' | 'none' = 'clearSelection'
id?: string
items?: Iterable<T>
keyboardNavigationBehavior?: 'arrow' | 'tab' = 'arrow'
onAction?: (Key) => void
onSelectionChange?: (Selection) => void
renderEmptyState?: (GridListRenderProps) => ReactNode
selectedKeys?: 'all' | Iterable<Key>
selectionBehavior?: SelectionBehavior = "toggle"
selectionMode?: SelectionMode
shouldSelectOnPressUp?: boolean
slot?: string | null
style?: StyleOrFunction<GridListRenderProps>
}/react-aria-components:ListBoxProps ListBoxProps <T> {
aria-describedby?: string
aria-details?: string
aria-label?: string
aria-labelledby?: string
autoFocus?: boolean | FocusStrategy
children?: ReactNode | (T) => ReactNode
className?: ClassNameOrFunction<ListBoxRenderProps>
defaultSelectedKeys?: 'all' | Iterable<Key>
dependencies?: ReadonlyArray<any>
disabledKeys?: Iterable<Key>
disallowEmptySelection?: boolean
- dragAndDropHooks?: DragAndDropHooks<NoInfer<T>>
+ dragAndDropHooks?: DragAndDropHooks
escapeKeyBehavior?: 'clearSelection' | 'none' = 'clearSelection'
id?: string
items?: Iterable<T>
layout?: 'stack' | 'grid' = 'stack'
onBlur?: (FocusEvent<Target>) => void
onFocus?: (FocusEvent<Target>) => void
onFocusChange?: (boolean) => void
onSelectionChange?: (Selection) => void
orientation?: Orientation = 'vertical'
renderEmptyState?: (ListBoxRenderProps) => ReactNode
selectedKeys?: 'all' | Iterable<Key>
selectionBehavior?: SelectionBehavior = "toggle"
selectionMode?: SelectionMode
shouldFocusOnHover?: boolean
shouldFocusWrap?: boolean
shouldSelectOnPressUp?: boolean
slot?: string | null
style?: StyleOrFunction<ListBoxRenderProps>
}/react-aria-components:ToggleButtonProps ToggleButtonProps {
aria-controls?: string
aria-describedby?: string
aria-details?: string
- aria-disabled?: boolean | 'true' | 'false'
aria-expanded?: boolean | 'true' | 'false'
aria-haspopup?: boolean | 'menu' | 'listbox' | 'tree' | 'grid' | 'dialog' | 'true' | 'false'
aria-label?: string
aria-labelledby?: string
autoFocus?: boolean
children?: ChildrenOrFunction<ToggleButtonRenderProps>
className?: ClassNameOrFunction<ToggleButtonRenderProps>
defaultSelected?: boolean
excludeFromTabOrder?: boolean
id?: Key
isDisabled?: boolean
isSelected?: boolean
onBlur?: (FocusEvent<Target>) => void
onChange?: (boolean) => void
onClick?: (MouseEvent<FocusableElement>) => void
onFocus?: (FocusEvent<Target>) => void
onFocusChange?: (boolean) => void
onHoverChange?: (boolean) => void
onHoverEnd?: (HoverEvent) => void
onHoverStart?: (HoverEvent) => void
onKeyDown?: (KeyboardEvent) => void
onKeyUp?: (KeyboardEvent) => void
onPress?: (PressEvent) => void
onPressChange?: (boolean) => void
onPressEnd?: (PressEvent) => void
onPressStart?: (PressEvent) => void
onPressUp?: (PressEvent) => void
preventFocusOnPress?: boolean
slot?: string | null
style?: StyleOrFunction<ToggleButtonRenderProps>
}/react-aria-components:TreeProps TreeProps <T> {
aria-describedby?: string
aria-details?: string
aria-label?: string
aria-labelledby?: string
autoFocus?: boolean | FocusStrategy
children?: ReactNode | (T) => ReactNode
className?: ClassNameOrFunction<TreeRenderProps>
defaultExpandedKeys?: Iterable<Key>
defaultSelectedKeys?: 'all' | Iterable<Key>
dependencies?: ReadonlyArray<any>
disabledBehavior?: DisabledBehavior = 'all'
disabledKeys?: Iterable<Key>
disallowEmptySelection?: boolean
- dragAndDropHooks?: DragAndDropHooks<NoInfer<T>>
+ dragAndDropHooks?: DragAndDropHooks
escapeKeyBehavior?: 'clearSelection' | 'none' = 'clearSelection'
expandedKeys?: Iterable<Key>
id?: string
items?: Iterable<T>
onExpandedChange?: (Set<Key>) => any
onSelectionChange?: (Selection) => void
renderEmptyState?: (TreeEmptyStateRenderProps) => ReactNode
selectedKeys?: 'all' | Iterable<Key>
selectionBehavior?: SelectionBehavior = "toggle"
selectionMode?: SelectionMode
shouldSelectOnPressUp?: boolean
slot?: string | null
style?: StyleOrFunction<TreeRenderProps>
}/react-aria-components:DragAndDropOptions-DragAndDropOptions <T = {}> {
+DragAndDropOptions {
acceptedDragTypes?: 'all' | Array<string | symbol> = 'all'
dropTargetDelegate?: DropTargetDelegate
getAllowedDropOperations?: () => Array<DropOperation>
getDropOperation?: (DropTarget, DragTypes, Array<DropOperation>) => DropOperation
- getItems?: (Set<Key>, Array<T>) => Array<DragItem> = () => []
+ getItems?: (Set<Key>) => Array<DragItem> = () => []
isDisabled?: boolean
onDragEnd?: (DraggableCollectionEndEvent) => void
onDragMove?: (DraggableCollectionMoveEvent) => void
onDragStart?: (DraggableCollectionStartEvent) => void
onDropActivate?: (DroppableCollectionActivateEvent) => void
onDropEnter?: (DroppableCollectionEnterEvent) => void
onDropExit?: (DroppableCollectionExitEvent) => void
onInsert?: (DroppableCollectionInsertDropEvent) => void
onItemDrop?: (DroppableCollectionOnItemDropEvent) => void
onMove?: (DroppableCollectionReorderEvent) => void
onReorder?: (DroppableCollectionReorderEvent) => void
onRootDrop?: (DroppableCollectionRootDropEvent) => void
renderDragPreview?: (Array<DragItem>) => JSX.Element | {
element: JSX.Element
x: number
y: number
}
renderDropIndicator?: (DropTarget) => JSX.Element
shouldAcceptItemDrop?: (ItemDropTarget, DragTypes) => boolean
}/react-aria-components:WaterfallLayoutOptions WaterfallLayoutOptions {
dropIndicatorThickness?: number = 2
maxColumns?: number = Infinity
- maxHorizontalSpace?: number = Infinity
maxItemSize?: Size = Infinity
minItemSize?: Size = 200 x 200
minSpace?: Size = 18 x 18
}@react-aria/autocomplete/@react-aria/autocomplete:useAutocomplete-useAutocomplete <T> {
+useAutocomplete {
- props: AriaAutocompleteOptions<T>
+ props: AriaAutocompleteOptions
state: AutocompleteState
returnVal: undefined
}/@react-aria/autocomplete:AriaAutocompleteProps-AriaAutocompleteProps <T> {
+AriaAutocompleteProps {
children: ReactNode
defaultInputValue?: string
disableAutoFocusFirst?: boolean = false
- disableVirtualFocus?: boolean = false
- filter?: (string, string, Node<T>) => boolean
+ filter?: (string, string) => boolean
inputValue?: string
onInputChange?: (string) => void
}/@react-aria/autocomplete:AriaAutocompleteOptions-AriaAutocompleteOptions <T> {
+AriaAutocompleteOptions {
collectionRef: RefObject<HTMLElement | null>
defaultInputValue?: string
disableAutoFocusFirst?: boolean = false
- disableVirtualFocus?: boolean = false
- filter?: (string, string, Node<T>) => boolean
+ filter?: (string, string) => boolean
inputRef: RefObject<HTMLInputElement | null>
inputValue?: string
onInputChange?: (string) => void
}/@react-aria/autocomplete:AutocompleteAria-AutocompleteAria <T> {
+AutocompleteAria {
collectionProps: CollectionOptions
collectionRef: RefObject<HTMLElement | null>
- filter?: (string, Node<T>) => boolean
- inputProps: InputProps
+ filter?: (string) => boolean
+ textFieldProps: AriaTextFieldProps
}/@react-aria/autocomplete:InputProps-InputProps <T = FocusableElement> {
- aria-activedescendant?: string
- aria-autocomplete?: 'none' | 'inline' | 'list' | 'both'
- aria-controls?: string
- autoComplete?: string
- autoCorrect?: string
- enterKeyHint?: 'enter' | 'done' | 'go' | 'next' | 'previous' | 'search' | 'send'
- id?: string
- onBlur?: (FocusEvent<T>) => void
- onChange?: (C) => void
- onFocus?: (FocusEvent<T>) => void
- onFocusChange?: (boolean) => void
- onKeyDown?: (KeyboardEvent) => void
- onKeyUp?: (KeyboardEvent) => void
- spellCheck?: string
- value?: T
-}@react-aria/button/@react-aria/button:AriaButtonOptions AriaButtonOptions <E extends ElementType> {
aria-controls?: string
aria-current?: boolean | 'true' | 'false' | 'page' | 'step' | 'location' | 'date' | 'time'
aria-describedby?: string
aria-details?: string
- aria-disabled?: boolean | 'true' | 'false'
aria-expanded?: boolean | 'true' | 'false'
aria-haspopup?: boolean | 'menu' | 'listbox' | 'tree' | 'grid' | 'dialog' | 'true' | 'false'
aria-label?: string
aria-labelledby?: string
autoFocus?: boolean
elementType?: ElementType | JSXElementConstructor<any> = 'button'
excludeFromTabOrder?: boolean
form?: string
formAction?: string
formEncType?: string
formMethod?: string
formNoValidate?: boolean
formTarget?: string
href?: string
id?: string
isDisabled?: boolean
name?: string
onBlur?: (FocusEvent<Target>) => void
onClick?: (MouseEvent<FocusableElement>) => 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
rel?: string
target?: string
type?: 'button' | 'submit' | 'reset' = 'button'
value?: string
}/@react-aria/button:AriaButtonProps AriaButtonProps <T extends ElementType = 'button'> {
aria-controls?: string
aria-current?: boolean | 'true' | 'false' | 'page' | 'step' | 'location' | 'date' | 'time'
aria-describedby?: string
aria-details?: string
- aria-disabled?: boolean | 'true' | 'false'
aria-expanded?: boolean | 'true' | 'false'
aria-haspopup?: boolean | 'menu' | 'listbox' | 'tree' | 'grid' | 'dialog' | 'true' | 'false'
aria-label?: string
aria-labelledby?: string
autoFocus?: boolean
children?: ReactNode
elementType?: ElementType | JSXElementConstructor<any> = 'button'
excludeFromTabOrder?: boolean
form?: string
formAction?: string
formEncType?: string
formMethod?: string
formNoValidate?: boolean
formTarget?: string
href?: string
id?: string
isDisabled?: boolean
name?: string
onBlur?: (FocusEvent<Target>) => void
onClick?: (MouseEvent<FocusableElement>) => 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
rel?: string
target?: string
type?: 'button' | 'submit' | 'reset' = 'button'
value?: string
}/@react-aria/button:AriaToggleButtonProps AriaToggleButtonProps <T extends ElementType = 'button'> {
aria-controls?: string
aria-describedby?: string
aria-details?: string
- aria-disabled?: boolean | 'true' | 'false'
aria-expanded?: boolean | 'true' | 'false'
aria-haspopup?: boolean | 'menu' | 'listbox' | 'tree' | 'grid' | 'dialog' | 'true' | 'false'
aria-label?: string
aria-labelledby?: string
autoFocus?: boolean
children?: ReactNode
defaultSelected?: boolean
elementType?: ElementType | JSXElementConstructor<any> = 'button'
excludeFromTabOrder?: boolean
id?: string
isDisabled?: boolean
isSelected?: boolean
onBlur?: (FocusEvent<Target>) => void
onChange?: (boolean) => void
onClick?: (MouseEvent<FocusableElement>) => 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
}/@react-aria/button:AriaToggleButtonGroupItemProps AriaToggleButtonGroupItemProps <E extends ElementType = 'button'> {
aria-controls?: string
aria-describedby?: string
aria-details?: string
- aria-disabled?: boolean | 'true' | 'false'
aria-expanded?: boolean | 'true' | 'false'
aria-haspopup?: boolean | 'menu' | 'listbox' | 'tree' | 'grid' | 'dialog' | 'true' | 'false'
aria-label?: string
aria-labelledby?: string
autoFocus?: boolean
children?: ReactNode
elementType?: ElementType | JSXElementConstructor<any> = 'button'
excludeFromTabOrder?: boolean
id: Key
isDisabled?: boolean
onBlur?: (FocusEvent<Target>) => void
onClick?: (MouseEvent<FocusableElement>) => 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
}@react-aria/collections/@react-aria/collections:createLeafComponent createLeafComponent <E extends Element, P extends {}> {
- CollectionNodeClass: {}<any> | string
+ type: string
render: (P, ForwardedRef<E>, any) => ReactElement | null
returnVal: undefined
}/@react-aria/collections:createBranchComponent createBranchComponent <E extends Element, P extends {
children?: any
}, T extends {}> {
- CollectionNodeClass: {}<any> | string
+ type: string
render: (P, ForwardedRef<E>, Node<T>) => ReactElement | null
useChildren: (P) => ReactNode
returnVal: undefined
}/@react-aria/collections:BaseCollection BaseCollection <T> {
- addDescendants: (CollectionNode<T>, BaseCollection<T>) => void
+ UNSTABLE_filter: ((string) => boolean) => BaseCollection<T>
addNode: (CollectionNode<T>) => void
at: () => Node<T>
clone: () => this
commit: (Key | null, Key | null, any) => void
- filter: (FilterFn<T>) => this
getChildren: (Key) => Iterable<Node<T>>
getFirstKey: () => Key | null
getItem: (Key) => Node<T> | null
getKeyAfter: (Key) => Key | null
getKeyBefore: (Key) => Key | null
getKeys: () => IterableIterator<Key>
getLastKey: () => Key | null
- isComplete: any
removeNode: (Key) => void
size: number
undefined: () => IterableIterator<Node<T>>
}/@react-aria/collections:CollectionNode CollectionNode <T> {
aria-label?: string
childNodes: Iterable<Node<T>>
- clone: () => this
+ clone: () => CollectionNode<T>
colIndex: number | null
colSpan: number | null
- constructor: (Key) => void
- filter: (BaseCollection<T>, BaseCollection<T>, FilterFn<T>) => CollectionNode<T> | null
+ constructor: (string, Key) => void
firstChildKey: Key | null
hasChildNodes: boolean
index: number
key: Key
level: number
nextKey: Key | null
parentKey: Key | null
prevKey: Key | null
props: any
render?: (Node<any>) => ReactElement
rendered: ReactNode
textValue: string
type: string
value: T | null
}/@react-aria/collections:ItemNode-ItemNode <T> {
- aria-label?: string
- childNodes: Iterable<Node<T>>
- clone: () => this
- colIndex: number | null
- colSpan: number | null
- constructor: (Key) => void
- filter: (BaseCollection<T>, BaseCollection<T>, FilterFn<T>) => ItemNode<T> | null
- firstChildKey: Key | null
- hasChildNodes: boolean
- index: number
- key: Key
- lastChildKey: Key | null
- level: number
- nextKey: Key | null
- parentKey: Key | null
- prevKey: Key | null
- props: any
- render?: (Node<any>) => ReactElement
- rendered: ReactNode
- textValue: string
- type: any
- value: T | null
-}/@react-aria/collections:SectionNode-SectionNode <T> {
- aria-label?: string
- childNodes: Iterable<Node<T>>
- clone: () => this
- colIndex: number | null
- colSpan: number | null
- constructor: (Key) => void
- filter: (BaseCollection<T>, BaseCollection<T>, FilterFn<T>) => SectionNode<T> | null
- firstChildKey: Key | null
- hasChildNodes: boolean
- index: number
- key: Key
- lastChildKey: Key | null
- level: number
- nextKey: Key | null
- parentKey: Key | null
- prevKey: Key | null
- props: any
- render?: (Node<any>) => ReactElement
- rendered: ReactNode
- textValue: string
- type: any
- value: T | null
-}/@react-aria/collections:FilterableNode-FilterableNode <T> {
- aria-label?: string
- childNodes: Iterable<Node<T>>
- clone: () => this
- colIndex: number | null
- colSpan: number | null
- constructor: (Key) => void
- filter: (BaseCollection<T>, BaseCollection<T>, FilterFn<T>) => CollectionNode<T> | null
- firstChildKey: Key | null
- hasChildNodes: boolean
- index: number
- key: Key
- lastChildKey: Key | null
- level: number
- nextKey: Key | null
- parentKey: Key | null
- prevKey: Key | null
- props: any
- render?: (Node<any>) => ReactElement
- rendered: ReactNode
- textValue: string
- type: string
- value: T | null
-}/@react-aria/collections:LoaderNode-LoaderNode {
- aria-label?: string
- childNodes: Iterable<Node<T>>
- clone: () => this
- colIndex: number | null
- colSpan: number | null
- constructor: (Key) => void
- filter: (BaseCollection<T>, BaseCollection<T>, FilterFn<T>) => CollectionNode<T> | null
- firstChildKey: Key | null
- hasChildNodes: boolean
- index: number
- key: Key
- lastChildKey: Key | null
- level: number
- nextKey: Key | null
- parentKey: Key | null
- prevKey: Key | null
- props: any
- render?: (Node<any>) => ReactElement
- rendered: ReactNode
- textValue: string
- type: any
- value: T | null
-}/@react-aria/collections:HeaderNode-HeaderNode {
- aria-label?: string
- childNodes: Iterable<Node<T>>
- clone: () => this
- colIndex: number | null
- colSpan: number | null
- constructor: (Key) => void
- filter: (BaseCollection<T>, BaseCollection<T>, FilterFn<T>) => CollectionNode<T> | null
- firstChildKey: Key | null
- hasChildNodes: boolean
- index: number
- key: Key
- lastChildKey: Key | null
- level: number
- nextKey: Key | null
- parentKey: Key | null
- prevKey: Key | null
- props: any
- render?: (Node<any>) => ReactElement
- rendered: ReactNode
- textValue: string
- type: any
- value: T | null
-}@react-aria/gridlist/@react-aria/gridlist:useGridListSection-useGridListSection <T> {
- props: AriaGridListSectionProps
- state: ListState<T>
- ref: RefObject<HTMLElement | null>
- returnVal: undefined
-}@react-aria/overlays/@react-aria/overlays:PositionAria PositionAria {
arrowProps: DOMAttributes
overlayProps: DOMAttributes
placement: PlacementAxis | null
- triggerAnchorPoint: {
+ triggerOrigin: {
x: number
y: number
} | null
updatePosition: () => void/@react-aria/overlays:PopoverAria PopoverAria {
arrowProps: DOMAttributes
placement: PlacementAxis | null
popoverProps: DOMAttributes
- triggerAnchorPoint: {
+ triggerOrigin: {
x: number
y: number
} | null
underlayProps: DOMAttributes@react-aria/utils/@react-aria/utils:UNSTABLE_useLoadMoreSentinel-UNSTABLE_useLoadMoreSentinel {
- props: LoadMoreSentinelProps
- ref: RefObject<HTMLElement | null>
- returnVal: undefined
-}/@react-aria/utils:useLoadMoreSentinel+useLoadMoreSentinel {
+ props: LoadMoreSentinelProps
+ ref: RefObject<HTMLElement | null>
+ returnVal: undefined
+}@react-spectrum/button/@react-spectrum/button:Button Button <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-current?: boolean | 'true' | 'false' | 'page' | 'step' | 'location' | 'date' | 'time'
aria-describedby?: string
aria-details?: string
- aria-disabled?: boolean | 'true' | 'false'
aria-expanded?: boolean | 'true' | 'false'
aria-haspopup?: boolean | 'menu' | 'listbox' | 'tree' | 'grid' | 'dialog' | 'true' | 'false'
aria-label?: string
aria-labelledby?: string
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>
form?: string
formAction?: string
formEncType?: string
formMethod?: string
formNoValidate?: boolean
formTarget?: 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>
href?: string
id?: string
isDisabled?: boolean
isHidden?: Responsive<boolean>
isPending?: 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>
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
order?: Responsive<number>
position?: Responsive<'static' | 'relative' | 'absolute' | 'fixed' | 'sticky'>
preventFocusOnPress?: boolean
rel?: string
right?: Responsive<DimensionValue>
start?: Responsive<DimensionValue>
staticColor?: 'white' | 'black'
style?: 'fill' | 'outline'
target?: string
top?: Responsive<DimensionValue>
type?: 'button' | 'submit' | 'reset' = 'button'
value?: string
variant: 'accent' | 'primary' | 'secondary' | 'negative' | LegacyButtonVariant
width?: Responsive<DimensionValue>
zIndex?: Responsive<number>
}/@react-spectrum/button: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-current?: boolean | 'true' | 'false' | 'page' | 'step' | 'location' | 'date' | 'time'
aria-describedby?: string
aria-details?: string
- aria-disabled?: boolean | 'true' | 'false'
aria-expanded?: boolean | 'true' | 'false'
aria-haspopup?: boolean | 'menu' | 'listbox' | 'tree' | 'grid' | 'dialog' | 'true' | 'false'
aria-label?: string
aria-labelledby?: string
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>
form?: string
formAction?: string
formEncType?: string
formMethod?: string
formNoValidate?: boolean
formTarget?: 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>
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>
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
order?: Responsive<number>
position?: Responsive<'static' | 'relative' | 'absolute' | 'fixed' | 'sticky'>
preventFocusOnPress?: boolean
right?: Responsive<DimensionValue>
start?: Responsive<DimensionValue>
staticColor?: 'white' | 'black'
top?: Responsive<DimensionValue>
type?: 'button' | 'submit' | 'reset' = 'button'
value?: string
width?: Responsive<DimensionValue>
zIndex?: Responsive<number>
}/@react-spectrum/button: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-current?: boolean | 'true' | 'false' | 'page' | 'step' | 'location' | 'date' | 'time'
aria-describedby?: string
aria-details?: string
- aria-disabled?: boolean | 'true' | 'false'
aria-expanded?: boolean | 'true' | 'false'
aria-haspopup?: boolean | 'menu' | 'listbox' | 'tree' | 'grid' | 'dialog' | 'true' | 'false'
aria-label?: string
aria-labelledby?: string
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>
form?: string
formAction?: string
formEncType?: string
formMethod?: string
formNoValidate?: boolean
formTarget?: 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>
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>
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
order?: Responsive<number>
position?: Responsive<'static' | 'relative' | 'absolute' | 'fixed' | 'sticky'>
preventFocusOnPress?: boolean
right?: Responsive<DimensionValue>
start?: Responsive<DimensionValue>
top?: Responsive<DimensionValue>
type?: 'button' | 'submit' | 'reset' = 'button'
value?: string
variant: 'and' | 'or'
width?: Responsive<DimensionValue>
zIndex?: Responsive<number>
}/@react-spectrum/button: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-disabled?: boolean | 'true' | 'false'
aria-expanded?: boolean | 'true' | 'false'
aria-haspopup?: boolean | 'menu' | 'listbox' | 'tree' | 'grid' | 'dialog' | 'true' | 'false'
aria-label?: string
aria-labelledby?: string
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<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
order?: Responsive<number>
position?: Responsive<'static' | 'relative' | 'absolute' | 'fixed' | 'sticky'>
preventFocusOnPress?: boolean
right?: Responsive<DimensionValue>
start?: Responsive<DimensionValue>
staticColor?: 'white' | 'black'
top?: Responsive<DimensionValue>
width?: Responsive<DimensionValue>
zIndex?: Responsive<number>
}/@react-spectrum/button: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-current?: boolean | 'true' | 'false' | 'page' | 'step' | 'location' | 'date' | 'time'
aria-describedby?: string
aria-details?: string
- aria-disabled?: boolean | 'true' | 'false'
aria-expanded?: boolean | 'true' | 'false'
aria-haspopup?: boolean | 'menu' | 'listbox' | 'tree' | 'grid' | 'dialog' | 'true' | 'false'
aria-label?: string
aria-labelledby?: string
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>
form?: string
formAction?: string
formEncType?: string
formMethod?: string
formNoValidate?: boolean
formTarget?: 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>
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>
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
order?: Responsive<number>
position?: Responsive<'static' | 'relative' | 'absolute' | 'fixed' | 'sticky'>
preventFocusOnPress?: boolean
right?: Responsive<DimensionValue>
start?: Responsive<DimensionValue>
staticColor?: 'white' | 'black'
top?: Responsive<DimensionValue>
type?: 'button' | 'submit' | 'reset' = 'button'
value?: string
width?: Responsive<DimensionValue>
zIndex?: Responsive<number>
}/@react-spectrum/button: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-current?: boolean | 'true' | 'false' | 'page' | 'step' | 'location' | 'date' | 'time'
aria-describedby?: string
aria-details?: string
- aria-disabled?: boolean | 'true' | 'false'
aria-expanded?: boolean | 'true' | 'false'
aria-haspopup?: boolean | 'menu' | 'listbox' | 'tree' | 'grid' | 'dialog' | 'true' | 'false'
aria-label?: string
aria-labelledby?: string
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>
form?: string
formAction?: string
formEncType?: string
formMethod?: string
formNoValidate?: boolean
formTarget?: 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>
href?: string
id?: string
isDisabled?: boolean
isHidden?: Responsive<boolean>
isPending?: 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>
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
order?: Responsive<number>
position?: Responsive<'static' | 'relative' | 'absolute' | 'fixed' | 'sticky'>
preventFocusOnPress?: boolean
rel?: string
right?: Responsive<DimensionValue>
start?: Responsive<DimensionValue>
staticColor?: 'white' | 'black'
style?: 'fill' | 'outline'
target?: string
top?: Responsive<DimensionValue>
type?: 'button' | 'submit' | 'reset' = 'button'
value?: string
variant: 'accent' | 'primary' | 'secondary' | 'negative' | LegacyButtonVariant
width?: Responsive<DimensionValue>
zIndex?: Responsive<number>
}/@react-spectrum/button: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-current?: boolean | 'true' | 'false' | 'page' | 'step' | 'location' | 'date' | 'time'
aria-describedby?: string
aria-details?: string
- aria-disabled?: boolean | 'true' | 'false'
aria-expanded?: boolean | 'true' | 'false'
aria-haspopup?: boolean | 'menu' | 'listbox' | 'tree' | 'grid' | 'dialog' | 'true' | 'false'
aria-label?: string
aria-labelledby?: string
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>
form?: string
formAction?: string
formEncType?: string
formMethod?: string
formNoValidate?: boolean
formTarget?: 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>
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>
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
order?: Responsive<number>
position?: Responsive<'static' | 'relative' | 'absolute' | 'fixed' | 'sticky'>
preventFocusOnPress?: boolean
right?: Responsive<DimensionValue>
start?: Responsive<DimensionValue>
top?: Responsive<DimensionValue>
type?: 'button' | 'submit' | 'reset' = 'button'
value?: string
variant: 'and' | 'or'
width?: Responsive<DimensionValue>
zIndex?: Responsive<number>
}/@react-spectrum/button: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-disabled?: boolean | 'true' | 'false'
aria-expanded?: boolean | 'true' | 'false'
aria-haspopup?: boolean | 'menu' | 'listbox' | 'tree' | 'grid' | 'dialog' | 'true' | 'false'
aria-label?: string
aria-labelledby?: string
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<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
order?: Responsive<number>
position?: Responsive<'static' | 'relative' | 'absolute' | 'fixed' | 'sticky'>
preventFocusOnPress?: boolean
right?: Responsive<DimensionValue>
start?: Responsive<DimensionValue>
staticColor?: 'white' | 'black'
top?: Responsive<DimensionValue>
width?: Responsive<DimensionValue>
zIndex?: Responsive<number>
}@react-spectrum/dnd/@react-spectrum/dnd:DragAndDropOptions-DragAndDropOptions <T = {}> {
+DragAndDropOptions {
acceptedDragTypes?: 'all' | Array<string | symbol> = 'all'
getAllowedDropOperations?: () => Array<DropOperation>
getDropOperation?: (DropTarget, DragTypes, Array<DropOperation>) => DropOperation
- getItems?: (Set<Key>, Array<T>) => Array<DragItem> = () => []
+ getItems?: (Set<Key>) => Array<DragItem> = () => []
onDragEnd?: (DraggableCollectionEndEvent) => void
onDragMove?: (DraggableCollectionMoveEvent) => void
onDragStart?: (DraggableCollectionStartEvent) => void
onDrop?: (DroppableCollectionDropEvent) => void
onDropEnter?: (DroppableCollectionEnterEvent) => void
onDropExit?: (DroppableCollectionExitEvent) => void
onInsert?: (DroppableCollectionInsertDropEvent) => void
onItemDrop?: (DroppableCollectionOnItemDropEvent) => void
onReorder?: (DroppableCollectionReorderEvent) => void
onRootDrop?: (DroppableCollectionRootDropEvent) => void
renderPreview?: (Set<Key>, Key) => JSX.Element
shouldAcceptItemDrop?: (ItemDropTarget, DragTypes) => boolean
}/@react-spectrum/dnd:DragAndDropHooks-DragAndDropHooks <T = {}> {
+DragAndDropHooks {
- dragAndDropHooks: (DragHooks<T> & DropHooks & {
+ dragAndDropHooks: (DragHooks & DropHooks & {
isVirtualDragging?: () => boolean
renderPreview?: (Set<Key>, Key) => JSX.Element
})
}/@react-spectrum/dnd:useDragAndDrop-useDragAndDrop <T = {}> {
+useDragAndDrop {
- options: DragAndDropOptions<T>
+ options: DragAndDropOptions
returnVal: undefined
}@react-spectrum/list/@react-spectrum/list:ListView ListView <T extends {}> {
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 | FocusStrategy
bottom?: Responsive<DimensionValue>
children: CollectionChildren<T>
defaultSelectedKeys?: 'all' | Iterable<Key>
density?: 'compact' | 'regular' | 'spacious' = 'regular'
disabledBehavior?: DisabledBehavior = "all"
disabledKeys?: Iterable<Key>
disallowEmptySelection?: boolean
- dragAndDropHooks?: DragAndDropHooks<NoInfer<{}>>['dragAndDropHooks']
+ dragAndDropHooks?: DragAndDropHooks['dragAndDropHooks']
end?: Responsive<DimensionValue>
escapeKeyBehavior?: 'clearSelection' | 'none' = 'clearSelection'
flex?: Responsive<string | number | boolean>
flexBasis?: Responsive<number | string>
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
isHidden?: Responsive<boolean>
isQuiet?: boolean
items?: Iterable<T>
justifySelf?: Responsive<'auto' | 'normal' | 'start' | 'end' | 'flex-start' | 'flex-end' | 'self-start' | 'self-end' | 'center' | 'left' | 'right' | 'stretch'>
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>
minHeight?: Responsive<DimensionValue>
minWidth?: Responsive<DimensionValue>
onAction?: (Key) => void
onLoadMore?: () => any
onSelectionChange?: (Selection) => void
order?: Responsive<number>
overflowMode?: 'truncate' | 'wrap' = 'truncate'
position?: Responsive<'static' | 'relative' | 'absolute' | 'fixed' | 'sticky'>
renderEmptyState?: () => JSX.Element
right?: Responsive<DimensionValue>
selectedKeys?: 'all' | Iterable<Key>
selectionMode?: SelectionMode
selectionStyle?: 'checkbox' | 'highlight'
shouldSelectOnPressUp?: boolean
start?: Responsive<DimensionValue>
top?: Responsive<DimensionValue>
width?: Responsive<DimensionValue>
zIndex?: Responsive<number>
}/@react-spectrum/list:SpectrumListViewProps SpectrumListViewProps <T> {
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 | FocusStrategy
bottom?: Responsive<DimensionValue>
children: CollectionChildren<T>
defaultSelectedKeys?: 'all' | Iterable<Key>
density?: 'compact' | 'regular' | 'spacious' = 'regular'
disabledBehavior?: DisabledBehavior = "all"
disabledKeys?: Iterable<Key>
disallowEmptySelection?: boolean
- dragAndDropHooks?: DragAndDropHooks<NoInfer<T>>['dragAndDropHooks']
+ dragAndDropHooks?: DragAndDropHooks['dragAndDropHooks']
end?: Responsive<DimensionValue>
escapeKeyBehavior?: 'clearSelection' | 'none' = 'clearSelection'
flex?: Responsive<string | number | boolean>
flexBasis?: Responsive<number | string>
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
isHidden?: Responsive<boolean>
isQuiet?: boolean
items?: Iterable<T>
justifySelf?: Responsive<'auto' | 'normal' | 'start' | 'end' | 'flex-start' | 'flex-end' | 'self-start' | 'self-end' | 'center' | 'left' | 'right' | 'stretch'>
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>
minHeight?: Responsive<DimensionValue>
minWidth?: Responsive<DimensionValue>
onAction?: (Key) => void
onLoadMore?: () => any
onSelectionChange?: (Selection) => void
order?: Responsive<number>
overflowMode?: 'truncate' | 'wrap' = 'truncate'
position?: Responsive<'static' | 'relative' | 'absolute' | 'fixed' | 'sticky'>
renderEmptyState?: () => JSX.Element
right?: Responsive<DimensionValue>
selectedKeys?: 'all' | Iterable<Key>
selectionMode?: SelectionMode
selectionStyle?: 'checkbox' | 'highlight'
shouldSelectOnPressUp?: boolean
start?: Responsive<DimensionValue>
top?: Responsive<DimensionValue>
width?: Responsive<DimensionValue>
zIndex?: Responsive<number>
}@react-spectrum/overlays/@react-spectrum/overlays:OpenTransition OpenTransition {
-
+ UNTYPED
}@react-spectrum/s2/@react-spectrum/s2:ActionButton ActionButton {
UNSAFE_className?: UnsafeClassName
UNSAFE_style?: CSSProperties
aria-controls?: string
aria-current?: boolean | 'true' | 'false' | 'page' | 'step' | 'location' | 'date' | 'time'
aria-describedby?: string
aria-details?: string
- aria-disabled?: boolean | 'true' | 'false'
aria-expanded?: boolean | 'true' | 'false'
aria-haspopup?: boolean | 'menu' | 'listbox' | 'tree' | 'grid' | 'dialog' | 'true' | 'false'
aria-label?: string
aria-labelledby?: string
autoFocus?: boolean
children: ReactNode
excludeFromTabOrder?: boolean
form?: string
formAction?: string
formEncType?: string
formMethod?: 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:Button Button {
UNSAFE_className?: UnsafeClassName
UNSAFE_style?: CSSProperties
aria-controls?: string
aria-current?: boolean | 'true' | 'false' | 'page' | 'step' | 'location' | 'date' | 'time'
aria-describedby?: string
aria-details?: string
- aria-disabled?: boolean | 'true' | 'false'
aria-expanded?: boolean | 'true' | 'false'
aria-haspopup?: boolean | 'menu' | 'listbox' | 'tree' | 'grid' | 'dialog' | 'true' | 'false'
aria-label?: string
aria-labelledby?: string
autoFocus?: boolean
children: ReactNode
excludeFromTabOrder?: boolean
fillStyle?: 'fill' | 'outline' = 'fill'
form?: string
formAction?: string
formEncType?: 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: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>>
+ dragAndDropHooks?: DragAndDropHooks
escapeKeyBehavior?: 'clearSelection' | 'none' = 'clearSelection'
id?: string
items?: Iterable<T>
layout?: 'grid' | 'waterfall' = 'grid'
onAction?: (Key) => void
onLoadMore?: () => void
onSelectionChange?: (Selection) => void
renderActionBar?: ('all' | Set<Key>) => ReactElement
renderEmptyState?: (GridListRenderProps) => ReactNode
selectedKeys?: 'all' | Iterable<Key>
selectionMode?: SelectionMode
selectionStyle?: 'checkbox' | 'highlight' = 'checkbox'
shouldSelectOnPressUp?: boolean
size?: 'XS' | 'S' | 'M' | 'L' | 'XL' = 'M'
slot?: string | null
styles?: StylesPropWithHeight
variant?: 'primary' | 'secondary' | 'tertiary' | 'quiet' = 'primary'
}/@react-spectrum/s2:SelectBox-SelectBox {
- UNSAFE_className?: UnsafeClassName
- UNSAFE_style?: CSSProperties
- aria-label?: string
- children: ReactNode
- id?: Key
- isDisabled?: boolean
- styles?: StylesProp
- textValue?: string
-}/@react-spectrum/s2:SelectBoxGroup-SelectBoxGroup <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
- defaultSelectedKeys?: 'all' | Iterable<Key>
- disabledKeys?: Iterable<Key>
- disallowEmptySelection?: boolean
- escapeKeyBehavior?: 'clearSelection' | 'none' = 'clearSelection'
- id?: string
- isDisabled?: boolean
- items?: Iterable<T>
- onBlur?: (FocusEvent<Target>) => void
- onFocus?: (FocusEvent<Target>) => void
- onFocusChange?: (boolean) => void
- onSelectionChange?: (Selection) => void
- orientation?: Orientation = 'vertical'
- selectedKeys?: 'all' | Iterable<Key>
- selectionMode?: 'single' | 'multiple' = 'single'
- slot?: string | null
- styles?: StylesProp
-}/@react-spectrum/s2:SelectBoxGroupContext-SelectBoxGroupContext {
- UNTYPED
-}/@react-spectrum/s2:ToggleButton ToggleButton {
UNSAFE_className?: UnsafeClassName
UNSAFE_style?: CSSProperties
aria-controls?: string
aria-describedby?: string
aria-details?: string
- aria-disabled?: boolean | 'true' | 'false'
aria-expanded?: boolean | 'true' | 'false'
aria-haspopup?: boolean | 'menu' | 'listbox' | 'tree' | 'grid' | 'dialog' | 'true' | 'false'
aria-label?: string
aria-labelledby?: string
autoFocus?: boolean
children: ReactNode
defaultSelected?: boolean
excludeFromTabOrder?: boolean
id?: Key
isDisabled?: boolean
isEmphasized?: 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
}/@react-spectrum/s2:Autocomplete-Autocomplete <T extends {}> {
+Autocomplete {
children: ReactNode
defaultInputValue?: string
disableAutoFocusFirst?: boolean = false
- disableVirtualFocus?: boolean = false
- filter?: (string, string, Node<{}>) => boolean
+ filter?: (string, string) => boolean
inputValue?: string
onInputChange?: (string) => void
slot?: string | null
}/@react-spectrum/s2:ActionButtonProps ActionButtonProps {
UNSAFE_className?: UnsafeClassName
UNSAFE_style?: CSSProperties
aria-controls?: string
aria-current?: boolean | 'true' | 'false' | 'page' | 'step' | 'location' | 'date' | 'time'
aria-describedby?: string
aria-details?: string
- aria-disabled?: boolean | 'true' | 'false'
aria-expanded?: boolean | 'true' | 'false'
aria-haspopup?: boolean | 'menu' | 'listbox' | 'tree' | 'grid' | 'dialog' | 'true' | 'false'
aria-label?: string
aria-labelledby?: string
autoFocus?: boolean
children: ReactNode
excludeFromTabOrder?: boolean
form?: string
formAction?: string
formEncType?: string
formMethod?: 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:ButtonProps ButtonProps {
UNSAFE_className?: UnsafeClassName
UNSAFE_style?: CSSProperties
aria-controls?: string
aria-current?: boolean | 'true' | 'false' | 'page' | 'step' | 'location' | 'date' | 'time'
aria-describedby?: string
aria-details?: string
- aria-disabled?: boolean | 'true' | 'false'
aria-expanded?: boolean | 'true' | 'false'
aria-haspopup?: boolean | 'menu' | 'listbox' | 'tree' | 'grid' | 'dialog' | 'true' | 'false'
aria-label?: string
aria-labelledby?: string
autoFocus?: boolean
children: ReactNode
excludeFromTabOrder?: boolean
fillStyle?: 'fill' | 'outline' = 'fill'
form?: string
formAction?: string
formEncType?: 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: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>>
+ dragAndDropHooks?: DragAndDropHooks
escapeKeyBehavior?: 'clearSelection' | 'none' = 'clearSelection'
id?: string
items?: Iterable<T>
layout?: 'grid' | 'waterfall' = 'grid'
onAction?: (Key) => void
onLoadMore?: () => void
onSelectionChange?: (Selection) => void
renderActionBar?: ('all' | Set<Key>) => ReactElement
renderEmptyState?: (GridListRenderProps) => ReactNode
selectedKeys?: 'all' | Iterable<Key>
selectionMode?: SelectionMode
selectionStyle?: 'checkbox' | 'highlight' = 'checkbox'
shouldSelectOnPressUp?: boolean
size?: 'XS' | 'S' | 'M' | 'L' | 'XL' = 'M'
slot?: string | null
styles?: StylesPropWithHeight
variant?: 'primary' | 'secondary' | 'tertiary' | 'quiet' = 'primary'
}/@react-spectrum/s2:SelectBoxProps-SelectBoxProps {
- UNSAFE_className?: UnsafeClassName
- UNSAFE_style?: CSSProperties
- aria-label?: string
- children: ReactNode
- id?: Key
- isDisabled?: boolean
- styles?: StylesProp
- textValue?: string
-}/@react-spectrum/s2:SelectBoxGroupProps-SelectBoxGroupProps <T> {
- UNSAFE_className?: UnsafeClassName
- UNSAFE_style?: CSSProperties
- aria-describedby?: string
- aria-details?: string
- aria-label?: string
- aria-labelledby?: string
- autoFocus?: boolean | FocusStrategy
- children: ReactNode
- defaultSelectedKeys?: 'all' | Iterable<Key>
- disabledKeys?: Iterable<Key>
- disallowEmptySelection?: boolean
- escapeKeyBehavior?: 'clearSelection' | 'none' = 'clearSelection'
- id?: string
- isDisabled?: boolean
- items?: Iterable<T>
- onBlur?: (FocusEvent<Target>) => void
- onFocus?: (FocusEvent<Target>) => void
- onFocusChange?: (boolean) => void
- onSelectionChange?: (Selection) => void
- orientation?: Orientation = 'vertical'
- selectedKeys?: 'all' | Iterable<Key>
- selectionMode?: 'single' | 'multiple' = 'single'
- slot?: string | null
- styles?: StylesProp
-}/@react-spectrum/s2:ToggleButtonProps ToggleButtonProps {
UNSAFE_className?: UnsafeClassName
UNSAFE_style?: CSSProperties
aria-controls?: string
aria-describedby?: string
aria-details?: string
- aria-disabled?: boolean | 'true' | 'false'
aria-expanded?: boolean | 'true' | 'false'
aria-haspopup?: boolean | 'menu' | 'listbox' | 'tree' | 'grid' | 'dialog' | 'true' | 'false'
aria-label?: string
aria-labelledby?: string
autoFocus?: boolean
children: ReactNode
defaultSelected?: boolean
excludeFromTabOrder?: boolean
id?: Key
isDisabled?: boolean
isEmphasized?: 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
}/@react-spectrum/s2:AutocompleteProps-AutocompleteProps <T = {}> {
+AutocompleteProps {
children: ReactNode
defaultInputValue?: string
disableAutoFocusFirst?: boolean = false
- disableVirtualFocus?: boolean = false
- filter?: (string, string, Node<T>) => boolean
+ filter?: (string, string) => boolean
inputValue?: string
onInputChange?: (string) => void
slot?: string | null
}@react-spectrum/table/@react-spectrum/table:TableView TableView <T extends {}> {
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
bottom?: Responsive<DimensionValue>
children: [ReactElement<TableHeaderProps<{}>>, ReactElement<TableBodyProps<{}>>]
defaultSelectedKeys?: 'all' | Iterable<Key>
density?: 'compact' | 'regular' | 'spacious' = 'regular'
disabledBehavior?: DisabledBehavior = "selection"
disabledKeys?: Iterable<Key>
disallowEmptySelection?: boolean
- dragAndDropHooks?: DragAndDropHooks<NoInfer<{}>>['dragAndDropHooks']
+ dragAndDropHooks?: DragAndDropHooks['dragAndDropHooks']
end?: Responsive<DimensionValue>
escapeKeyBehavior?: 'clearSelection' | 'none' = 'clearSelection'
flex?: Responsive<string | number | boolean>
flexBasis?: Responsive<number | string>
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
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>
onAction?: (Key) => void
onResize?: (Map<Key, ColumnSize>) => void
onResizeEnd?: (Map<Key, ColumnSize>) => void
onResizeStart?: (Map<Key, ColumnSize>) => void
onSelectionChange?: (Selection) => void
onSortChange?: (SortDescriptor) => any
order?: Responsive<number>
overflowMode?: 'wrap' | 'truncate' = 'truncate'
position?: Responsive<'static' | 'relative' | 'absolute' | 'fixed' | 'sticky'>
renderEmptyState?: () => JSX.Element
right?: Responsive<DimensionValue>
selectedKeys?: 'all' | Iterable<Key>
selectionMode?: SelectionMode
selectionStyle?: 'checkbox' | 'highlight'
shouldSelectOnPressUp?: boolean
sortDescriptor?: SortDescriptor
start?: Responsive<DimensionValue>
top?: Responsive<DimensionValue>
width?: Responsive<DimensionValue>
zIndex?: Responsive<number>
}/@react-spectrum/table:SpectrumTableProps SpectrumTableProps <T> {
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
bottom?: Responsive<DimensionValue>
children: [ReactElement<TableHeaderProps<T>>, ReactElement<TableBodyProps<T>>]
defaultSelectedKeys?: 'all' | Iterable<Key>
density?: 'compact' | 'regular' | 'spacious' = 'regular'
disabledBehavior?: DisabledBehavior = "selection"
disabledKeys?: Iterable<Key>
disallowEmptySelection?: boolean
- dragAndDropHooks?: DragAndDropHooks<NoInfer<T>>['dragAndDropHooks']
+ dragAndDropHooks?: DragAndDropHooks['dragAndDropHooks']
end?: Responsive<DimensionValue>
escapeKeyBehavior?: 'clearSelection' | 'none' = 'clearSelection'
flex?: Responsive<string | number | boolean>
flexBasis?: Responsive<number | string>
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
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>
onAction?: (Key) => void
onResize?: (Map<Key, ColumnSize>) => void
onResizeEnd?: (Map<Key, ColumnSize>) => void
onResizeStart?: (Map<Key, ColumnSize>) => void
onSelectionChange?: (Selection) => void
onSortChange?: (SortDescriptor) => any
order?: Responsive<number>
overflowMode?: 'wrap' | 'truncate' = 'truncate'
position?: Responsive<'static' | 'relative' | 'absolute' | 'fixed' | 'sticky'>
renderEmptyState?: () => JSX.Element
right?: Responsive<DimensionValue>
selectedKeys?: 'all' | Iterable<Key>
selectionMode?: SelectionMode
selectionStyle?: 'checkbox' | 'highlight'
shouldSelectOnPressUp?: boolean
sortDescriptor?: SortDescriptor
start?: Responsive<DimensionValue>
top?: Responsive<DimensionValue>
width?: Responsive<DimensionValue>
zIndex?: Responsive<number>
}@react-stately/dnd/@react-stately/dnd:DraggableCollectionStateOptions-DraggableCollectionStateOptions <T = {}> {
+DraggableCollectionStateOptions {
collection: Collection<Node<unknown>>
getAllowedDropOperations?: () => Array<DropOperation>
- getItems: (Set<Key>, Array<T>) => Array<DragItem>
+ getItems: (Set<Key>) => Array<DragItem>
isDisabled?: boolean
onDragEnd?: (DraggableCollectionEndEvent) => void
onDragMove?: (DraggableCollectionMoveEvent) => void
onDragStart?: (DraggableCollectionStartEvent) => void
selectionManager: MultipleSelectionManager
}/@react-stately/dnd:useDraggableCollectionState-useDraggableCollectionState <T = {}> {
+useDraggableCollectionState {
- props: DraggableCollectionStateOptions<T>
+ props: DraggableCollectionStateOptions
returnVal: undefined
}@react-stately/layout/@react-stately/layout:WaterfallLayoutOptions WaterfallLayoutOptions {
dropIndicatorThickness?: number = 2
maxColumns?: number = Infinity
- maxHorizontalSpace?: number = Infinity
maxItemSize?: Size = Infinity
minItemSize?: Size = 200 x 200
minSpace?: Size = 18 x 18
}@react-stately/list/@react-stately/list:UNSTABLE_useFilteredListState UNSTABLE_useFilteredListState <T extends {}> {
state: ListState<T>
- filterFn: (string, Node<T>) => boolean | null | undefined
+ filter: (string) => boolean | null | undefined
returnVal: undefined
}@react-stately/table/@react-stately/table:UNSTABLE_useFilteredTableState-UNSTABLE_useFilteredTableState <T extends {}> {
- state: TableState<T>
- filterFn: (string, Node<T>) => boolean | null | undefined
- returnVal: undefined
-} |
|
@snowystinger Just to be clear, this PR addresses event leaks in text field and grid components themselves, right? So I assume work on other components which could go inside grids remains? |
|
Correct, this is a bit POC at the moment. If this is any indication, it's going to be a large effort and many PRs to fix it everywhere. Hopefully this is the hardest bit though with how many capture and conflicting events there are in grids at the moment. |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Closes
Opening as I finally fixed the existing tests, there are still oddities around behaviours. I started with moving useTypeSelect from capture to bubble phase and then proceeded to deal with the fallout from that. I also moved a few things, such as useSelect and useSelectableCollection to useKeyboard
I'm beginning to reach the conclusion that the current useKeyboard is actually more harmful to our goal rather than helpful.
We stopPropagation on everything, even if we don't handle that key.
We then have to explicitly continuePropagation for some set of keys.
This then interferes with listeners farther up which expect it to be stopped, and much now stop it themselves.
This gets even trickier if they are nested in reverse sometimes as well, calling continue is just too powerful, or too hard to predictably stop.
I think we should consider not stopping by default anymore. Only call stop on the events which actually result in something we handle and really shouldn't continue.
Please share any opinions on this matter. I'm still mulling it over.
✅ Pull Request Checklist:
📝 Test Instructions:
🧢 Your Project: