feat: S2 SideNav#10306
Draft
snowystinger wants to merge 9 commits into
Draft
Conversation
…hange API, add tests
|
Build successful! 🎉 |
|
Build successful! 🎉 |
…rent, fixes initial focus
|
Build successful! 🎉 |
|
Build successful! 🎉 |
## API Changes
react-aria-components/react-aria-components:Provider-Provider <A, B, C, D, E, F, G, H, I, J, K, L, M> {
+Provider <A, B, C, D, E, F, G, H, I, J, K, L> {
children: ReactNode
- values: ProviderValues<A, B, C, D, E, F, G, H, I, J, K, L, M>
+ values: ProviderValues<A, B, C, D, E, F, G, H, I, J, K, L>
}/react-aria-components:GridListItem GridListItem <T> {
+ allowsArrowNavigation?: boolean
children?: ChildrenOrFunction<GridListItemRenderProps>
className?: ClassNameOrFunction<GridListItemRenderProps> = 'react-aria-GridListItem'
download?: boolean | string
+ focusMode?: 'child' | 'row'
href?: Href
hrefLang?: string
id?: Key
isDisabled?: boolean
onClick?: (MouseEvent<FocusableElement>) => void
onHoverChange?: (boolean) => void
onHoverEnd?: (HoverEvent) => void
onHoverStart?: (HoverEvent) => void
onPress?: (PressEvent) => void
onPressChange?: (boolean) => void
onPressEnd?: (PressEvent) => void
onPressStart?: (PressEvent) => void
onPressUp?: (PressEvent) => void
ping?: string
referrerPolicy?: HTMLAttributeReferrerPolicy
rel?: string
render?: DOMRenderFunction<keyof React.JSX.IntrinsicElements, GridListItemRenderProps>
routerOptions?: RouterOptions
style?: StyleOrFunction<GridListItemRenderProps>
target?: HTMLAttributeAnchorTarget
textValue?: string
value?: T
}/react-aria-components:PreviewTrigger-PreviewTrigger {
- children: ReactNode
- closeDelay?: number = 500
- defaultOpen?: boolean
- delay?: number = 1500
- isDisabled?: boolean
- isOpen?: boolean
- onOpenChange?: (boolean) => void
-}/react-aria-components:Popover Popover {
aria-describedby?: string
aria-details?: string
aria-label?: string
aria-labelledby?: string
arrowBoundaryOffset?: number = 0
arrowRef?: RefObject<Element | null>
boundaryElement?: Element = document.body
children?: ChildrenOrFunction<PopoverRenderProps>
className?: ClassNameOrFunction<PopoverRenderProps> = 'react-aria-Popover'
containerPadding?: number = 12
crossOffset?: number = 0
defaultOpen?: boolean
getTargetRect?: (Element) => DOMRect | null | undefined = target.getBoundingClientRect()
isEntering?: boolean
isExiting?: boolean
isKeyboardDismissDisabled?: boolean = false
isNonModal?: boolean
isOpen?: boolean
maxHeight?: number
offset?: number = 8
- onBlurWithin?: (FocusEvent) => void
- onFocusWithin?: (FocusEvent) => void
- onFocusWithinChange?: (boolean) => void
onOpenChange?: (boolean) => void
placement?: Placement = 'bottom'
render?: DOMRenderFunction<keyof React.JSX.IntrinsicElements, PopoverRenderProps>
scrollRef?: RefObject<Element | null> = overlayRef
shouldCloseOnInteractOutside?: (Element) => boolean
shouldFlip?: boolean = true
- shouldSkipAnimation?: boolean
shouldUpdatePosition?: boolean = true
slot?: string | null
style?: StyleOrFunction<PopoverRenderProps>
trigger?: string
}/react-aria-components:Table Table {
aria-describedby?: string
aria-details?: string
aria-label?: string
aria-labelledby?: string
children?: ReactNode
className?: ClassNameOrFunction<TableRenderProps> = 'react-aria-Table'
defaultExpandedKeys?: Iterable<Key>
defaultSelectedKeys?: 'all' | Iterable<Key>
disabledBehavior?: DisabledBehavior = 'all'
disabledKeys?: Iterable<Key>
disallowEmptySelection?: boolean
dragAndDropHooks?: DragAndDropHooks
escapeKeyBehavior?: 'clearSelection' | 'none' = 'clearSelection'
expandedKeys?: Iterable<Key>
+ keyboardNavigationBehavior?: 'arrow' | 'tab' = 'arrow'
onExpandedChange?: (Set<Key>) => any
onRowAction?: (Key) => void
onSelectionChange?: (Selection) => void
onSortChange?: (SortDescriptor) => any
selectedKeys?: 'all' | Iterable<Key>
selectionBehavior?: SelectionBehavior = 'toggle'
selectionMode?: SelectionMode
shouldSelectOnPressUp?: boolean
slot?: string | null
sortDescriptor?: SortDescriptor
style?: StyleOrFunction<TableRenderProps>
treeColumn?: Key
}/react-aria-components:Cell Cell {
+ allowsArrowNavigation?: boolean
children?: ChildrenOrFunction<CellRenderProps>
className?: ClassNameOrFunction<CellRenderProps> = 'react-aria-Cell'
colSpan?: number
+ focusMode?: 'child' | 'cell'
id?: Key
render?: DOMRenderFunction<keyof React.JSX.IntrinsicElements, CellRenderProps>
style?: StyleOrFunction<CellRenderProps>
textValue?: string/react-aria-components:Column Column {
+ allowsArrowNavigation?: boolean
allowsSorting?: boolean
children?: ChildrenOrFunction<ColumnRenderProps>
className?: ClassNameOrFunction<ColumnRenderProps> = 'react-aria-Column'
defaultWidth?: ColumnSize | null
+ focusMode?: 'child' | 'cell'
id?: Key
isRowHeader?: boolean
maxWidth?: ColumnStaticSize | null
minWidth?: ColumnStaticSize | null
style?: StyleOrFunction<ColumnRenderProps>
textValue?: string
width?: ColumnSize | null
}/react-aria-components:TreeItem TreeItem <T extends any> {
+ allowsArrowNavigation?: boolean
aria-label?: string
children: ReactNode
className?: ClassNameOrFunction<TreeItemRenderProps> = 'react-aria-TreeItem'
download?: boolean | string
+ focusMode?: 'child' | 'row' = 'row'
hasChildItems?: boolean
href?: Href
hrefLang?: string
id?: Key
onAction?: () => void
onClick?: (MouseEvent<FocusableElement>) => void
onHoverChange?: (boolean) => void
onHoverEnd?: (HoverEvent) => void
onHoverStart?: (HoverEvent) => void
onPress?: (PressEvent) => void
onPressChange?: (boolean) => void
onPressEnd?: (PressEvent) => void
onPressStart?: (PressEvent) => void
onPressUp?: (PressEvent) => void
ping?: string
referrerPolicy?: HTMLAttributeReferrerPolicy
rel?: string
render?: DOMRenderFunction<keyof React.JSX.IntrinsicElements, TreeItemRenderProps>
routerOptions?: RouterOptions
style?: StyleOrFunction<TreeItemRenderProps>
target?: HTMLAttributeAnchorTarget
textValue: string
value?: any
}/react-aria-components:GridListItemProps GridListItemProps <T = {}> {
+ allowsArrowNavigation?: boolean
children?: ChildrenOrFunction<GridListItemRenderProps>
className?: ClassNameOrFunction<GridListItemRenderProps> = 'react-aria-GridListItem'
download?: boolean | string
+ focusMode?: 'child' | 'row'
href?: Href
hrefLang?: string
id?: Key
isDisabled?: boolean
onClick?: (MouseEvent<FocusableElement>) => void
onHoverChange?: (boolean) => void
onHoverEnd?: (HoverEvent) => void
onHoverStart?: (HoverEvent) => void
onPress?: (PressEvent) => void
onPressChange?: (boolean) => void
onPressEnd?: (PressEvent) => void
onPressStart?: (PressEvent) => void
onPressUp?: (PressEvent) => void
ping?: string
referrerPolicy?: HTMLAttributeReferrerPolicy
rel?: string
render?: DOMRenderFunction<keyof React.JSX.IntrinsicElements, GridListItemRenderProps>
routerOptions?: RouterOptions
style?: StyleOrFunction<GridListItemRenderProps>
target?: HTMLAttributeAnchorTarget
textValue?: string
value?: T
}/react-aria-components:PreviewTriggerProps-PreviewTriggerProps {
- children: ReactNode
- closeDelay?: number = 500
- defaultOpen?: boolean
- delay?: number = 1500
- isDisabled?: boolean
- isOpen?: boolean
- onOpenChange?: (boolean) => void
-}/react-aria-components:PopoverProps PopoverProps {
aria-describedby?: string
aria-details?: string
aria-label?: string
aria-labelledby?: string
arrowBoundaryOffset?: number = 0
arrowRef?: RefObject<Element | null>
boundaryElement?: Element = document.body
children?: ChildrenOrFunction<PopoverRenderProps>
className?: ClassNameOrFunction<PopoverRenderProps> = 'react-aria-Popover'
containerPadding?: number = 12
crossOffset?: number = 0
defaultOpen?: boolean
getTargetRect?: (Element) => DOMRect | null | undefined = target.getBoundingClientRect()
isEntering?: boolean
isExiting?: boolean
isKeyboardDismissDisabled?: boolean = false
isNonModal?: boolean
isOpen?: boolean
maxHeight?: number
offset?: number = 8
- onBlurWithin?: (FocusEvent) => void
- onFocusWithin?: (FocusEvent) => void
- onFocusWithinChange?: (boolean) => void
onOpenChange?: (boolean) => void
placement?: Placement = 'bottom'
render?: DOMRenderFunction<keyof React.JSX.IntrinsicElements, PopoverRenderProps>
scrollRef?: RefObject<Element | null> = overlayRef
shouldCloseOnInteractOutside?: (Element) => boolean
shouldFlip?: boolean = true
- shouldSkipAnimation?: boolean
shouldUpdatePosition?: boolean = true
slot?: string | null
style?: StyleOrFunction<PopoverRenderProps>
trigger?: string
}/react-aria-components:TableProps TableProps {
aria-describedby?: string
aria-details?: string
aria-label?: string
aria-labelledby?: string
children?: ReactNode
className?: ClassNameOrFunction<TableRenderProps> = 'react-aria-Table'
defaultExpandedKeys?: Iterable<Key>
defaultSelectedKeys?: 'all' | Iterable<Key>
disabledBehavior?: DisabledBehavior = 'all'
disabledKeys?: Iterable<Key>
disallowEmptySelection?: boolean
dragAndDropHooks?: DragAndDropHooks
escapeKeyBehavior?: 'clearSelection' | 'none' = 'clearSelection'
expandedKeys?: Iterable<Key>
+ keyboardNavigationBehavior?: 'arrow' | 'tab' = 'arrow'
onExpandedChange?: (Set<Key>) => any
onRowAction?: (Key) => void
onSelectionChange?: (Selection) => void
onSortChange?: (SortDescriptor) => any
selectedKeys?: 'all' | Iterable<Key>
selectionBehavior?: SelectionBehavior = 'toggle'
selectionMode?: SelectionMode
shouldSelectOnPressUp?: boolean
slot?: string | null
sortDescriptor?: SortDescriptor
style?: StyleOrFunction<TableRenderProps>
treeColumn?: Key
}/react-aria-components:ColumnProps ColumnProps {
+ allowsArrowNavigation?: boolean
allowsSorting?: boolean
children?: ChildrenOrFunction<ColumnRenderProps>
className?: ClassNameOrFunction<ColumnRenderProps> = 'react-aria-Column'
defaultWidth?: ColumnSize | null
+ focusMode?: 'child' | 'cell'
id?: Key
isRowHeader?: boolean
maxWidth?: ColumnStaticSize | null
minWidth?: ColumnStaticSize | null
style?: StyleOrFunction<ColumnRenderProps>
textValue?: string
width?: ColumnSize | null
}/react-aria-components:CellProps CellProps {
+ allowsArrowNavigation?: boolean
children?: ChildrenOrFunction<CellRenderProps>
className?: ClassNameOrFunction<CellRenderProps> = 'react-aria-Cell'
colSpan?: number
+ focusMode?: 'child' | 'cell'
id?: Key
render?: DOMRenderFunction<keyof React.JSX.IntrinsicElements, CellRenderProps>
style?: StyleOrFunction<CellRenderProps>
textValue?: string/react-aria-components:TreeItemProps TreeItemProps <T = {}> {
+ allowsArrowNavigation?: boolean
aria-label?: string
children: ReactNode
className?: ClassNameOrFunction<TreeItemRenderProps> = 'react-aria-TreeItem'
download?: boolean | string
+ focusMode?: 'child' | 'row' = 'row'
hasChildItems?: boolean
href?: Href
hrefLang?: string
id?: Key
onAction?: () => void
onClick?: (MouseEvent<FocusableElement>) => void
onHoverChange?: (boolean) => void
onHoverEnd?: (HoverEvent) => void
onHoverStart?: (HoverEvent) => void
onPress?: (PressEvent) => void
onPressChange?: (boolean) => void
onPressEnd?: (PressEvent) => void
onPressStart?: (PressEvent) => void
onPressUp?: (PressEvent) => void
ping?: string
referrerPolicy?: HTMLAttributeReferrerPolicy
rel?: string
render?: DOMRenderFunction<keyof React.JSX.IntrinsicElements, TreeItemRenderProps>
routerOptions?: RouterOptions
style?: StyleOrFunction<TreeItemRenderProps>
target?: HTMLAttributeAnchorTarget
textValue: string
value?: T
}/react-aria-components:DOMRenderProps-DOMRenderProps <E extends keyof React.JSX.IntrinsicElements, T> {
- render?: DOMRenderFunction<keyof React.JSX.IntrinsicElements, T>
-}/react-aria-components:PossibleLinkDOMRenderProps-PossibleLinkDOMRenderProps <Fallback extends keyof React.JSX.IntrinsicElements, T> {
- render?: (DetailedHTMLProps<LinkWithRequiredHref, HTMLAnchorElement> | React.JSX.IntrinsicElements[keyof React.JSX.IntrinsicElements], T) => ReactElement
-}/react-aria-components:DOMRenderFunction-DOMRenderFunction {
- D: undefined
-}/react-aria-components:ClassNameOrFunction-ClassNameOrFunction {
- C: undefined
-}/react-aria-components:StyleOrFunction-StyleOrFunction {
- S: undefined
-}/react-aria-components:ChildrenOrFunction-ChildrenOrFunction {
- C: undefined
-}/react-aria-components:ComboBoxState ComboBoxState <M extends SelectionMode = 'single', T> {
close: () => void
collection: Collection<Node<T>>
commit: () => void
commitValidation: () => void
defaultInputValue: string
defaultValue: ValueType<SelectionMode>
disabledKeys: Set<Key>
displayValidation: ValidationResult
focusStrategy: FocusStrategy | null
inputValue: string
isFocused: boolean
isOpen: boolean
open: (FocusStrategy | null, MenuTriggerAction) => void
- point: Point | null
realtimeValidation: ValidationResult
resetValidation: () => void
revert: () => void
selectedItems: Array<Node<T>>
selectionManager: SelectionManager
setFocused: (boolean) => void
setInputValue: (string) => void
setOpen: (boolean) => void
- setPoint: (Point) => void
setValue: (Key | readonly Array<Key> | null) => void
toggle: (FocusStrategy | null, MenuTriggerAction) => void
updateValidation: (ValidationResult) => void
value: ValueType<SelectionMode>/react-aria-components:DatePickerState DatePickerState {
close: () => void
commitValidation: () => void
dateValue: DateValue | null
defaultValue: DateValue | null
displayValidation: ValidationResult
formatValue: (string, FieldOptions) => string
getDateFormatter: (string, FormatterOptions) => DateFormatter
granularity: Granularity
hasTime: boolean
isInvalid: boolean
isOpen: boolean
open: () => void
- point: Point | null
realtimeValidation: ValidationResult
resetValidation: () => void
setDateValue: (DateValue) => void
setOpen: (boolean) => void
- setPoint: (Point) => void
setTimeValue: (TimeValue) => void
setValue: (DateValue | null) => void
timeValue: TimeValue | null
toggle: () => void
value: DateValue | null
}/react-aria-components:DateRangePickerState DateRangePickerState {
close: () => void
commitValidation: () => void
dateRange: RangeValue<DateValue | null> | null
defaultValue: DateRange | null
displayValidation: ValidationResult
formatValue: (string, FieldOptions) => {
start: string
end: string
} | null
getDateFormatter: (string, FormatterOptions) => DateFormatter
granularity: Granularity
hasTime: boolean
isInvalid: boolean
isOpen: boolean
open: () => void
- point: Point | null
realtimeValidation: ValidationResult
resetValidation: () => void
setDate: ('start' | 'end', DateValue | null) => void
setDateRange: (DateRange) => void
setDateTime: ('start' | 'end', DateValue | null) => void
setOpen: (boolean) => void
- setPoint: (Point) => void
setTime: ('start' | 'end', TimeValue | null) => void
setTimeRange: (TimeRange) => void
setValue: (DateRange | null) => void
timeRange: RangeValue<TimeValue | null> | null
updateValidation: (ValidationResult) => void
value: RangeValue<DateValue | null>
}/react-aria-components:OverlayTriggerState OverlayTriggerState {
close: () => void
isOpen: boolean
open: () => void
- point: Point | null
setOpen: (boolean) => void
- setPoint: (Point) => void
toggle: () => void
}/react-aria-components:RootMenuTriggerState RootMenuTriggerState {
close: () => void
closeSubmenu: (Key, number) => void
expandedKeysStack: Array<Key>
focusStrategy: FocusStrategy | null
isOpen: boolean
open: (FocusStrategy | null) => void
openSubmenu: (Key, number) => void
- point: Point | null
setOpen: (boolean) => void
- setPoint: (Point) => void
toggle: (FocusStrategy | null) => void
}/react-aria-components:SelectState SelectState <M extends SelectionMode = 'single', T> {
close: () => void
collection: Collection<Node<T>>
commitValidation: () => void
defaultValue: ValueType<SelectionMode>
disabledKeys: Set<Key>
displayValidation: ValidationResult
focusStrategy: FocusStrategy | null
isFocused: boolean
isOpen: boolean
open: (FocusStrategy | null) => void
- point: Point | null
realtimeValidation: ValidationResult
resetValidation: () => void
selectedItems: Array<Node<T>>
selectionManager: SelectionManager
setFocused: (boolean) => void
setOpen: (boolean) => void
- setPoint: (Point) => void
setValue: (Key | readonly Array<Key> | null) => void
toggle: (FocusStrategy | null) => void
updateValidation: (ValidationResult) => void
value: ValueType<SelectionMode>/react-aria-components:TooltipTriggerState TooltipTriggerState {
close: (boolean) => void
isOpen: boolean
open: (boolean) => void
- shouldSkipAnimation: boolean
}@react-aria/dialog/@react-aria/dialog:DialogAria DialogAria {
- contentProps: DOMAttributes
dialogProps: DOMAttributes
titleProps: DOMAttributes
}@react-aria/grid/@react-aria/grid:GridProps GridProps {
aria-describedby?: string
aria-details?: string
aria-label?: string
aria-labelledby?: string
disallowTypeAhead?: boolean = false
escapeKeyBehavior?: 'clearSelection' | 'none' = 'clearSelection'
focusMode?: 'row' | 'cell' = 'row'
getRowText?: (Key) => string = (key) => state.collection.getItem(key)?.textValue
id?: string
isVirtualized?: boolean
keyboardDelegate?: KeyboardDelegate
+ keyboardNavigationBehavior?: 'arrow' | 'tab' = 'arrow'
onCellAction?: (Key) => void
onRowAction?: (Key) => void
scrollRef?: RefObject<HTMLElement | null>
shouldSelectOnPressUp?: boolean/@react-aria/grid:GridCellProps GridCellProps {
+ allowsArrowNavigation?: boolean
colSpan?: number
focusMode?: 'child' | 'cell'
isVirtualized?: boolean
node: GridNode<unknown>
}@react-aria/gridlist/@react-aria/gridlist:AriaGridListItemOptions AriaGridListItemOptions {
+ allowsArrowNavigation?: boolean
+ focusMode?: 'child' | 'row' = 'row'
hasChildItems?: boolean
isVirtualized?: boolean
node: Node<unknown>
shouldSelectOnPressUp?: boolean@react-aria/interactions/@react-aria/interactions:LongPressProps LongPressProps {
accessibilityDescription?: string
isDisabled?: boolean
onLongPress?: (LongPressEvent) => void
onLongPressEnd?: (LongPressEvent) => void
onLongPressStart?: (LongPressEvent) => void
- pointerType?: 'mouse' | 'touch'
threshold?: number = 500ms
}@react-aria/overlays/@react-aria/overlays:AriaPopoverProps AriaPopoverProps {
arrowBoundaryOffset?: number = 0
arrowRef?: RefObject<Element | null>
arrowSize?: number = 0
boundaryElement?: Element = document.body
containerPadding?: number = 12
crossOffset?: number = 0
getTargetRect?: (Element) => DOMRect | null | undefined = target.getBoundingClientRect()
groupRef?: RefObject<Element | null>
isKeyboardDismissDisabled?: boolean = false
isNonModal?: boolean
maxHeight?: number
offset?: number = 0
- onBlurWithin?: (FocusEvent) => void
- onFocusWithin?: (FocusEvent) => void
- onFocusWithinChange?: (boolean) => void
placement?: Placement = 'bottom'
popoverRef: RefObject<Element | null>
scrollRef?: RefObject<Element | null> = overlayRef
shouldCloseOnInteractOutside?: (Element) => boolean
shouldUpdatePosition?: boolean = true
triggerRef: RefObject<Element | null>
}@react-aria/table/@react-aria/table:AriaTableProps AriaTableProps {
aria-describedby?: string
aria-details?: string
aria-label?: string
aria-labelledby?: string
disallowTypeAhead?: boolean = false
escapeKeyBehavior?: 'clearSelection' | 'none' = 'clearSelection'
focusMode?: 'row' | 'cell' = 'row'
getRowText?: (Key) => string = (key) => state.collection.getItem(key)?.textValue
id?: string
isVirtualized?: boolean
keyboardDelegate?: KeyboardDelegate
+ keyboardNavigationBehavior?: 'arrow' | 'tab' = 'arrow'
layoutDelegate?: LayoutDelegate
onCellAction?: (Key) => void
onRowAction?: (Key) => void
scrollRef?: RefObject<HTMLElement | null>
}/@react-aria/table:AriaTableColumnHeaderProps AriaTableColumnHeaderProps <T> {
+ allowsArrowNavigation?: boolean
+ focusMode?: 'child' | 'cell'
isVirtualized?: boolean
node: GridNode<T>
}/@react-aria/table:AriaTableCellProps AriaTableCellProps {
+ allowsArrowNavigation?: boolean
+ focusMode?: 'child' | 'cell'
isVirtualized?: boolean
node: GridNode<unknown>
shouldSelectOnPressUp?: boolean
}/@react-aria/table:TableColumnResizeAria TableColumnResizeAria {
inputProps: DOMAttributes
- isMouseResizing: boolean
isResizing: boolean
resizerProps: DOMAttributes
}@react-aria/tree/@react-aria/tree:AriaTreeItemOptions AriaTreeItemOptions {
+ allowsArrowNavigation?: boolean
+ focusMode?: 'child' | 'row' = 'row'
hasChildItems?: boolean
node: Node<unknown>
shouldSelectOnPressUp?: boolean
}@react-aria/utils/@react-aria/utils:getOwnerDocument getOwnerDocument {
- target?: EventTarget | null
+ el: Element | null | undefined
returnVal: undefined
}/@react-aria/utils:getOwnerWindow getOwnerWindow {
- target?: EventTarget | null
+ el: (Window & any) | Element | null | undefined
returnVal: undefined
}/@react-aria/utils:isShadowRoot isShadowRoot {
- value: unknown
+ node: Node | null
returnVal: undefined
}@react-spectrum/ai/@react-spectrum/ai:Attachment Attachment {
+ allowsArrowNavigation?: boolean
aria-describedby?: string
aria-details?: string
aria-label?: string
aria-labelledby?: string
children: ReactNode | (AttachmentRenderProps) => ReactNode
density?: 'compact' | 'regular' | 'spacious' = 'regular'
download?: boolean | string
+ focusMode?: 'child' | 'row'
href?: Href
hrefLang?: string
id?: Key
isDisabled?: boolean
onPress?: (PressEvent) => void
onPressChange?: (boolean) => void
onPressEnd?: (PressEvent) => void
onPressStart?: (PressEvent) => void
onPressUp?: (PressEvent) => void
ping?: string
referrerPolicy?: HTMLAttributeReferrerPolicy
rel?: string
render?: DOMRenderFunction<keyof React.JSX.IntrinsicElements, TagRenderProps>
routerOptions?: RouterOptions
size?: 'XS' | 'S' | 'M' | 'L' | 'XL' = 'M'
styles?: StyleString
target?: HTMLAttributeAnchorTarget
textValue?: string
uploadProgress?: number
value?: T
variant?: 'primary' | 'secondary' | 'tertiary' | 'quiet' = 'primary'
}/@react-spectrum/ai:ThreadItem ThreadItem {
+ allowsArrowNavigation?: boolean
children?: ChildrenOrFunction<GridListItemRenderProps>
+ focusMode?: 'child' | 'row'
isStreaming?: boolean
shouldAnnounceOnMount?: boolean
styles?: StyleString
textValue?: string/@react-spectrum/ai:TokenSegmentList-TokenSegmentList <T = any> {
+TokenSegmentList {
caretPosition: Position
- constructor: (readonly Array<TokenFieldSegment<T>>, TokenSegmentListOptions) => void
- delete: (Position, Intl.Segmenter, any, any) => this
- deleteLine: (Position, any, any) => this
+ constructor: (readonly Array<TokenFieldSegment>, TokenSegmentListOptions) => void
+ delete: (Position, Intl.Segmenter, any, any) => TokenSegmentList
+ deleteLine: (Position, any, any) => TokenSegmentList
endCoalescing: () => void
findBoundaryWithSegmenter: (Position, Intl.Segmenter, any) => Position | null
findLineBoundary: (Position, any) => Position | null
findText: (Position, any, string | RegExp) => Position | null
- redo: () => this
- replaceRange: (Position, Position, string, any) => this
- replaceRangeWithSegments: (Position, Position, Array<TokenFieldSegment<T>>, any) => this
- segments: readonly Array<TokenFieldSegment<T>>
- slice: (Position, Position) => this
+ insertToken: (Position) => TokenSegmentList
+ redo: () => TokenSegmentList
+ replaceRange: (Position, Position, string, any) => TokenSegmentList
+ replaceRangeWithSegments: (Position, Position, Array<TokenFieldSegment>, any) => TokenSegmentList
+ segments: readonly Array<TokenFieldSegment>
+ slice: (Position, Position) => TokenSegmentList
toString: () => string
- undo: () => this
- withCaretPosition: (Position) => this
+ undo: () => TokenSegmentList
+ withCaretPosition: (Position) => TokenSegmentList
}/@react-spectrum/ai:AttachmentProps AttachmentProps {
+ allowsArrowNavigation?: boolean
aria-describedby?: string
aria-details?: string
aria-label?: string
aria-labelledby?: string
children: ReactNode | (AttachmentRenderProps) => ReactNode
density?: 'compact' | 'regular' | 'spacious' = 'regular'
download?: boolean | string
+ focusMode?: 'child' | 'row'
href?: Href
hrefLang?: string
id?: Key
isDisabled?: boolean
onPress?: (PressEvent) => void
onPressChange?: (boolean) => void
onPressEnd?: (PressEvent) => void
onPressStart?: (PressEvent) => void
onPressUp?: (PressEvent) => void
ping?: string
referrerPolicy?: HTMLAttributeReferrerPolicy
rel?: string
render?: DOMRenderFunction<keyof React.JSX.IntrinsicElements, TagRenderProps>
routerOptions?: RouterOptions
size?: 'XS' | 'S' | 'M' | 'L' | 'XL' = 'M'
styles?: StyleString
target?: HTMLAttributeAnchorTarget
textValue?: string
uploadProgress?: number
value?: T
variant?: 'primary' | 'secondary' | 'tertiary' | 'quiet' = 'primary'
}/@react-spectrum/ai:PromptTokenFieldPopoverProps PromptTokenFieldPopoverProps {
UNSAFE_className?: UnsafeClassName
UNSAFE_style?: CSSProperties
aria-describedby?: string
aria-details?: string
aria-label?: string
aria-labelledby?: string
arrowRef?: RefObject<Element | null>
boundaryElement?: Element = document.body
children?: ChildrenOrFunction<PopoverRenderProps>
containerPadding?: number = 12
crossOffset?: number = 0
defaultOpen?: boolean
filterAnchor?: Position | null
getTargetRect?: (Element) => DOMRect | null | undefined = target.getBoundingClientRect()
hideArrow?: boolean = false
isEntering?: boolean
isExiting?: boolean
isFocused?: boolean
isNonModal?: boolean
isOpen?: boolean
items?: Array<React.ReactNode> | null | Promise<Array<React.ReactNode> | null>
maxHeight?: number
offset?: number = 8
- onBlurWithin?: (FocusEvent) => void
- onFocusWithin?: (FocusEvent) => void
- onFocusWithinChange?: (boolean) => void
onOpenChange?: (boolean) => void
placement?: Placement = 'bottom'
scrollRef?: RefObject<Element | null> = overlayRef
shouldFlip?: boolean = true
- shouldSkipAnimation?: boolean
size?: 'S' | 'M' | 'L'
slot?: string | null
styles?: StyleString
trigger?: string
}/@react-spectrum/ai:ThreadItemProps ThreadItemProps {
+ allowsArrowNavigation?: boolean
children?: ChildrenOrFunction<GridListItemRenderProps>
+ focusMode?: 'child' | 'row'
isStreaming?: boolean
shouldAnnounceOnMount?: boolean
styles?: StyleString
textValue?: string@react-spectrum/dialog/@react-spectrum/dialog:AlertDialog AlertDialog {
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
autoFocusButton?: 'cancel' | 'primary' | 'secondary'
bottom?: Responsive<DimensionValue>
cancelLabel?: string
children: ReactNode
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
isHidden?: Responsive<boolean>
isPrimaryActionDisabled?: boolean
isSecondaryActionDisabled?: 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>
onCancel?: () => void
onPrimaryAction?: () => void
onSecondaryAction?: () => void
order?: Responsive<number>
position?: Responsive<'static' | 'relative' | 'absolute' | 'fixed' | 'sticky'>
primaryActionLabel: string
right?: Responsive<DimensionValue>
secondaryActionLabel?: string
start?: Responsive<DimensionValue>
title: string
top?: Responsive<DimensionValue>
variant?: 'confirmation' | 'information' | 'destructive' | 'error' | 'warning'
width?: Responsive<DimensionValue>
zIndex?: Responsive<number>
}/@react-spectrum/dialog:SpectrumAlertDialogProps SpectrumAlertDialogProps {
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
autoFocusButton?: 'cancel' | 'primary' | 'secondary'
bottom?: Responsive<DimensionValue>
cancelLabel?: string
children: ReactNode
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
isHidden?: Responsive<boolean>
isPrimaryActionDisabled?: boolean
isSecondaryActionDisabled?: 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>
onCancel?: () => void
onPrimaryAction?: () => void
onSecondaryAction?: () => void
order?: Responsive<number>
position?: Responsive<'static' | 'relative' | 'absolute' | 'fixed' | 'sticky'>
primaryActionLabel: string
right?: Responsive<DimensionValue>
secondaryActionLabel?: string
start?: Responsive<DimensionValue>
title: string
top?: Responsive<DimensionValue>
variant?: 'confirmation' | 'information' | 'destructive' | 'error' | 'warning'
width?: Responsive<DimensionValue>
zIndex?: Responsive<number>
}@react-spectrum/s2/@react-spectrum/s2:AlertDialog AlertDialog {
UNSAFE_className?: UnsafeClassName
UNSAFE_style?: CSSProperties
- aria-describedby?: string
- aria-details?: string
- aria-label?: string
- aria-labelledby?: string
autoFocusButton?: 'cancel' | 'primary' | 'secondary'
cancelLabel?: string
children: ReactNode
id?: string
isSecondaryActionDisabled?: boolean
onCancel?: () => void
onPrimaryAction?: () => void
onSecondaryAction?: () => void
primaryActionLabel: string
secondaryActionLabel?: string
size?: 'S' | 'M' | 'L' = 'M'
title: string
variant?: 'confirmation' | 'information' | 'destructive' | 'error' | 'warning' = 'confirmation'
}/@react-spectrum/s2:Card Card {
UNSAFE_className?: UnsafeClassName
UNSAFE_style?: CSSProperties
+ allowsArrowNavigation?: boolean
children: ReactNode | (CardRenderProps) => ReactNode
density?: 'compact' | 'regular' | 'spacious' = 'regular'
download?: boolean | string
+ focusMode?: 'child' | 'row'
href?: Href
hrefLang?: string
id?: Key
isDisabled?: boolean
onPress?: (PressEvent) => void
onPressChange?: (boolean) => void
onPressEnd?: (PressEvent) => void
onPressStart?: (PressEvent) => void
onPressUp?: (PressEvent) => void
ping?: string
referrerPolicy?: HTMLAttributeReferrerPolicy
rel?: string
routerOptions?: RouterOptions
size?: 'XS' | 'S' | 'M' | 'L' | 'XL' = 'M'
styles?: StylesProp
target?: HTMLAttributeAnchorTarget
textValue?: string
value?: T
variant?: 'primary' | 'secondary' | 'tertiary' | 'quiet' = 'primary'
}/@react-spectrum/s2:AssetCard AssetCard {
UNSAFE_className?: UnsafeClassName
UNSAFE_style?: CSSProperties
+ allowsArrowNavigation?: boolean
children: ReactNode | (CardRenderProps) => ReactNode
download?: boolean | string
+ focusMode?: 'child' | 'row'
href?: Href
hrefLang?: string
id?: Key
isDisabled?: boolean
onPress?: (PressEvent) => void
onPressChange?: (boolean) => void
onPressEnd?: (PressEvent) => void
onPressStart?: (PressEvent) => void
onPressUp?: (PressEvent) => void
ping?: string
referrerPolicy?: HTMLAttributeReferrerPolicy
rel?: string
routerOptions?: RouterOptions
size?: 'XS' | 'S' | 'M' | 'L' | 'XL' = 'M'
styles?: StylesProp
target?: HTMLAttributeAnchorTarget
textValue?: string
value?: T
variant?: 'primary' | 'secondary' | 'tertiary' | 'quiet' = 'primary'
}/@react-spectrum/s2:UserCard UserCard {
UNSAFE_className?: UnsafeClassName
UNSAFE_style?: CSSProperties
+ allowsArrowNavigation?: boolean
children: ReactNode | (CardRenderProps) => ReactNode
download?: boolean | string
+ focusMode?: 'child' | 'row'
href?: Href
hrefLang?: string
id?: Key
isDisabled?: boolean
onPress?: (PressEvent) => void
onPressChange?: (boolean) => void
onPressEnd?: (PressEvent) => void
onPressStart?: (PressEvent) => void
onPressUp?: (PressEvent) => void
ping?: string
referrerPolicy?: HTMLAttributeReferrerPolicy
rel?: string
routerOptions?: RouterOptions
size?: 'XS' | 'S' | 'M' | 'L' | 'XL' = 'M'
styles?: StylesProp
target?: HTMLAttributeAnchorTarget
textValue?: string
value?: T
variant?: 'primary' | 'secondary' | 'tertiary'
}/@react-spectrum/s2:ProductCard ProductCard {
UNSAFE_className?: UnsafeClassName
UNSAFE_style?: CSSProperties
+ allowsArrowNavigation?: boolean
children: ReactNode | (CardRenderProps) => ReactNode
download?: boolean | string
+ focusMode?: 'child' | 'row'
href?: Href
hrefLang?: string
id?: Key
isDisabled?: boolean
onPress?: (PressEvent) => void
onPressChange?: (boolean) => void
onPressEnd?: (PressEvent) => void
onPressStart?: (PressEvent) => void
onPressUp?: (PressEvent) => void
ping?: string
referrerPolicy?: HTMLAttributeReferrerPolicy
rel?: string
routerOptions?: RouterOptions
size?: 'XS' | 'S' | 'M' | 'L' | 'XL' = 'M'
styles?: StylesProp
target?: HTMLAttributeAnchorTarget
textValue?: string
value?: T
variant?: 'primary' | 'secondary' | 'tertiary'
}/@react-spectrum/s2:ListViewItem ListViewItem {
+ allowsArrowNavigation?: boolean
children: ReactNode
download?: boolean | string
+ focusMode?: 'child' | 'row'
hasChildItems?: boolean
href?: Href
hrefLang?: string
id?: Key
onAction?: () => void
onHoverChange?: (boolean) => void
onHoverEnd?: (HoverEvent) => void
onHoverStart?: (HoverEvent) => void
onPress?: (PressEvent) => void
onPressChange?: (boolean) => void
onPressEnd?: (PressEvent) => void
onPressStart?: (PressEvent) => void
onPressUp?: (PressEvent) => void
ping?: string
referrerPolicy?: HTMLAttributeReferrerPolicy
rel?: string
routerOptions?: RouterOptions
target?: HTMLAttributeAnchorTarget
textValue?: string
value?: T
}/@react-spectrum/s2:TableView TableView {
UNSAFE_className?: UnsafeClassName
UNSAFE_style?: CSSProperties
aria-describedby?: string
aria-details?: string
aria-label?: string
aria-labelledby?: string
children?: ReactNode
defaultExpandedKeys?: Iterable<Key>
defaultSelectedKeys?: 'all' | Iterable<Key>
density?: 'compact' | 'spacious' | 'regular' = 'regular'
disabledBehavior?: DisabledBehavior = 'all'
disabledKeys?: Iterable<Key>
disallowEmptySelection?: boolean
dragAndDropHooks?: DragAndDropHooks
escapeKeyBehavior?: 'clearSelection' | 'none' = 'clearSelection'
expandedKeys?: Iterable<Key>
id?: string
isQuiet?: boolean
+ keyboardNavigationBehavior?: 'arrow' | 'tab' = 'arrow'
loadingState?: LoadingState
onAction?: (Key) => void
onExpandedChange?: (Set<Key>) => any
onLoadMore?: () => any
onResizeEnd?: (Map<Key, ColumnSize>) => void
onResizeStart?: (Map<Key, ColumnSize>) => void
onSelectionChange?: (Selection) => void
onSortChange?: (SortDescriptor) => any
overflowMode?: 'wrap' | 'truncate' = 'truncate'
renderActionBar?: ('all' | Set<Key>) => ReactElement
selectedKeys?: 'all' | Iterable<Key>
selectionMode?: SelectionMode
selectionStyle?: 'checkbox' | 'highlight' = 'checkbox'
shouldSelectOnPressUp?: boolean
slot?: string | null
sortDescriptor?: SortDescriptor
styles?: StylesPropWithHeight
treeColumn?: Key
}/@react-spectrum/s2:Cell Cell {
align?: 'start' | 'center' | 'end' = 'start'
+ allowsArrowNavigation?: boolean
children: ReactNode
colSpan?: number
+ focusMode?: 'child' | 'cell'
id?: Key
showDivider?: boolean
textValue?: string
}/@react-spectrum/s2:Column Column {
align?: 'start' | 'center' | 'end' = 'start'
+ allowsArrowNavigation?: boolean
allowsResizing?: boolean
allowsSorting?: boolean
children: ReactNode
defaultWidth?: ColumnSize | null
+ focusMode?: 'child' | 'cell'
id?: Key
isRowHeader?: boolean
maxWidth?: ColumnStaticSize | null
menuItems?: ReactNode
showDivider?: boolean
textValue?: string
width?: ColumnSize | null
}/@react-spectrum/s2:EditableCell EditableCell {
action?: string | FormHTMLAttributes<HTMLFormElement>['action']
align?: 'start' | 'center' | 'end' = 'start'
+ allowsArrowNavigation?: boolean
children: ReactNode
colSpan?: number
+ focusMode?: 'child' | 'cell'
id?: Key
isSaving?: boolean
onCancel?: () => void
onSubmit?: (FormEvent<HTMLFormElement>) => void
showDivider?: boolean
textValue?: string
}/@react-spectrum/s2:TreeViewItem TreeViewItem {
+ allowsArrowNavigation?: boolean
aria-label?: string
children: ReactNode
download?: boolean | string
+ focusMode?: 'child' | 'row' = 'row'
hasChildItems?: boolean
href?: Href
hrefLang?: string
id?: Key
onAction?: () => void
onHoverChange?: (boolean) => void
onHoverEnd?: (HoverEvent) => void
onHoverStart?: (HoverEvent) => void
onPress?: (PressEvent) => void
onPressChange?: (boolean) => void
onPressEnd?: (PressEvent) => void
onPressStart?: (PressEvent) => void
onPressUp?: (PressEvent) => void
ping?: string
referrerPolicy?: HTMLAttributeReferrerPolicy
rel?: string
routerOptions?: RouterOptions
target?: HTMLAttributeAnchorTarget
textValue: string
value?: T
}/@react-spectrum/s2:AlertDialogProps AlertDialogProps {
UNSAFE_className?: UnsafeClassName
UNSAFE_style?: CSSProperties
- aria-describedby?: string
- aria-details?: string
- aria-label?: string
- aria-labelledby?: string
autoFocusButton?: 'cancel' | 'primary' | 'secondary'
cancelLabel?: string
children: ReactNode
id?: string
isSecondaryActionDisabled?: boolean
onCancel?: () => void
onPrimaryAction?: () => void
onSecondaryAction?: () => void
primaryActionLabel: string
secondaryActionLabel?: string
size?: 'S' | 'M' | 'L' = 'M'
title: string
variant?: 'confirmation' | 'information' | 'destructive' | 'error' | 'warning' = 'confirmation'
}/@react-spectrum/s2:CardProps CardProps {
UNSAFE_className?: UnsafeClassName
UNSAFE_style?: CSSProperties
+ allowsArrowNavigation?: boolean
children: ReactNode | (CardRenderProps) => ReactNode
density?: 'compact' | 'regular' | 'spacious' = 'regular'
download?: boolean | string
+ focusMode?: 'child' | 'row'
href?: Href
hrefLang?: string
id?: Key
isDisabled?: boolean
onPress?: (PressEvent) => void
onPressChange?: (boolean) => void
onPressEnd?: (PressEvent) => void
onPressStart?: (PressEvent) => void
onPressUp?: (PressEvent) => void
ping?: string
referrerPolicy?: HTMLAttributeReferrerPolicy
rel?: string
routerOptions?: RouterOptions
size?: 'XS' | 'S' | 'M' | 'L' | 'XL' = 'M'
styles?: StylesProp
target?: HTMLAttributeAnchorTarget
textValue?: string
value?: T
variant?: 'primary' | 'secondary' | 'tertiary' | 'quiet' = 'primary'
}/@react-spectrum/s2:AssetCardProps AssetCardProps {
UNSAFE_className?: UnsafeClassName
UNSAFE_style?: CSSProperties
+ allowsArrowNavigation?: boolean
children: ReactNode | (CardRenderProps) => ReactNode
download?: boolean | string
+ focusMode?: 'child' | 'row'
href?: Href
hrefLang?: string
id?: Key
isDisabled?: boolean
onPress?: (PressEvent) => void
onPressChange?: (boolean) => void
onPressEnd?: (PressEvent) => void
onPressStart?: (PressEvent) => void
onPressUp?: (PressEvent) => void
ping?: string
referrerPolicy?: HTMLAttributeReferrerPolicy
rel?: string
routerOptions?: RouterOptions
size?: 'XS' | 'S' | 'M' | 'L' | 'XL' = 'M'
styles?: StylesProp
target?: HTMLAttributeAnchorTarget
textValue?: string
value?: T
variant?: 'primary' | 'secondary' | 'tertiary' | 'quiet' = 'primary'
}/@react-spectrum/s2:ProductCardProps ProductCardProps {
UNSAFE_className?: UnsafeClassName
UNSAFE_style?: CSSProperties
+ allowsArrowNavigation?: boolean
children: ReactNode | (CardRenderProps) => ReactNode
download?: boolean | string
+ focusMode?: 'child' | 'row'
href?: Href
hrefLang?: string
id?: Key
isDisabled?: boolean
onPress?: (PressEvent) => void
onPressChange?: (boolean) => void
onPressEnd?: (PressEvent) => void
onPressStart?: (PressEvent) => void
onPressUp?: (PressEvent) => void
ping?: string
referrerPolicy?: HTMLAttributeReferrerPolicy
rel?: string
routerOptions?: RouterOptions
size?: 'XS' | 'S' | 'M' | 'L' | 'XL' = 'M'
styles?: StylesProp
target?: HTMLAttributeAnchorTarget
textValue?: string
value?: T
variant?: 'primary' | 'secondary' | 'tertiary'
}/@react-spectrum/s2:UserCardProps UserCardProps {
UNSAFE_className?: UnsafeClassName
UNSAFE_style?: CSSProperties
+ allowsArrowNavigation?: boolean
children: ReactNode | (CardRenderProps) => ReactNode
download?: boolean | string
+ focusMode?: 'child' | 'row'
href?: Href
hrefLang?: string
id?: Key
isDisabled?: boolean
onPress?: (PressEvent) => void
onPressChange?: (boolean) => void
onPressEnd?: (PressEvent) => void
onPressStart?: (PressEvent) => void
onPressUp?: (PressEvent) => void
ping?: string
referrerPolicy?: HTMLAttributeReferrerPolicy
rel?: string
routerOptions?: RouterOptions
size?: 'XS' | 'S' | 'M' | 'L' | 'XL' = 'M'
styles?: StylesProp
target?: HTMLAttributeAnchorTarget
textValue?: string
value?: T
variant?: 'primary' | 'secondary' | 'tertiary'
}/@react-spectrum/s2:ListViewItemProps ListViewItemProps {
+ allowsArrowNavigation?: boolean
children: ReactNode
download?: boolean | string
+ focusMode?: 'child' | 'row'
hasChildItems?: boolean
href?: Href
hrefLang?: string
id?: Key
onAction?: () => void
onHoverChange?: (boolean) => void
onHoverEnd?: (HoverEvent) => void
onHoverStart?: (HoverEvent) => void
onPress?: (PressEvent) => void
onPressChange?: (boolean) => void
onPressEnd?: (PressEvent) => void
onPressStart?: (PressEvent) => void
onPressUp?: (PressEvent) => void
ping?: string
referrerPolicy?: HTMLAttributeReferrerPolicy
rel?: string
routerOptions?: RouterOptions
target?: HTMLAttributeAnchorTarget
textValue?: string
value?: T
}/@react-spectrum/s2:PopoverProps PopoverProps {
UNSAFE_className?: UnsafeClassName
UNSAFE_style?: CSSProperties
aria-describedby?: string
aria-details?: string
aria-label?: string
aria-labelledby?: string
arrowRef?: RefObject<Element | null>
boundaryElement?: Element = document.body
children?: ChildrenOrFunction<PopoverRenderProps>
containerPadding?: number = 12
crossOffset?: number = 0
defaultOpen?: boolean
getTargetRect?: (Element) => DOMRect | null | undefined = target.getBoundingClientRect()
hideArrow?: boolean = false
isEntering?: boolean
isExiting?: boolean
isNonModal?: boolean
isOpen?: boolean
maxHeight?: number
offset?: number = 8
- onBlurWithin?: (FocusEvent) => void
- onFocusWithin?: (FocusEvent) => void
- onFocusWithinChange?: (boolean) => void
onOpenChange?: (boolean) => void
placement?: Placement = 'bottom'
scrollRef?: RefObject<Element | null> = overlayRef
shouldFlip?: boolean = true
- shouldSkipAnimation?: boolean
size?: 'S' | 'M' | 'L'
slot?: string | null
styles?: StyleString
trigger?: string
}/@react-spectrum/s2:TableViewProps TableViewProps {
UNSAFE_className?: UnsafeClassName
UNSAFE_style?: CSSProperties
aria-describedby?: string
aria-details?: string
aria-label?: string
aria-labelledby?: string
children?: ReactNode
defaultExpandedKeys?: Iterable<Key>
defaultSelectedKeys?: 'all' | Iterable<Key>
density?: 'compact' | 'spacious' | 'regular' = 'regular'
disabledBehavior?: DisabledBehavior = 'all'
disabledKeys?: Iterable<Key>
disallowEmptySelection?: boolean
dragAndDropHooks?: DragAndDropHooks
escapeKeyBehavior?: 'clearSelection' | 'none' = 'clearSelection'
expandedKeys?: Iterable<Key>
id?: string
isQuiet?: boolean
+ keyboardNavigationBehavior?: 'arrow' | 'tab' = 'arrow'
loadingState?: LoadingState
onAction?: (Key) => void
onExpandedChange?: (Set<Key>) => any
onLoadMore?: () => any
onResizeEnd?: (Map<Key, ColumnSize>) => void
onResizeStart?: (Map<Key, ColumnSize>) => void
onSelectionChange?: (Selection) => void
onSortChange?: (SortDescriptor) => any
overflowMode?: 'wrap' | 'truncate' = 'truncate'
renderActionBar?: ('all' | Set<Key>) => ReactElement
selectedKeys?: 'all' | Iterable<Key>
selectionMode?: SelectionMode
selectionStyle?: 'checkbox' | 'highlight' = 'checkbox'
shouldSelectOnPressUp?: boolean
slot?: string | null
sortDescriptor?: SortDescriptor
styles?: StylesPropWithHeight
treeColumn?: Key
}/@react-spectrum/s2:CellProps CellProps {
align?: 'start' | 'center' | 'end' = 'start'
+ allowsArrowNavigation?: boolean
children: ReactNode
colSpan?: number
+ focusMode?: 'child' | 'cell'
id?: Key
showDivider?: boolean
textValue?: string
}/@react-spectrum/s2:ColumnProps ColumnProps {
align?: 'start' | 'center' | 'end' = 'start'
+ allowsArrowNavigation?: boolean
allowsResizing?: boolean
allowsSorting?: boolean
children: ReactNode
defaultWidth?: ColumnSize | null
+ focusMode?: 'child' | 'cell'
id?: Key
isRowHeader?: boolean
maxWidth?: ColumnStaticSize | null
menuItems?: ReactNode
showDivider?: boolean
textValue?: string
width?: ColumnSize | null
}/@react-spectrum/s2:TreeViewItemProps TreeViewItemProps {
+ allowsArrowNavigation?: boolean
aria-label?: string
children: ReactNode
download?: boolean | string
+ focusMode?: 'child' | 'row' = 'row'
hasChildItems?: boolean
href?: Href
hrefLang?: string
id?: Key
onAction?: () => void
onHoverChange?: (boolean) => void
onHoverEnd?: (HoverEvent) => void
onHoverStart?: (HoverEvent) => void
onPress?: (PressEvent) => void
onPressChange?: (boolean) => void
onPressEnd?: (PressEvent) => void
onPressStart?: (PressEvent) => void
onPressUp?: (PressEvent) => void
ping?: string
referrerPolicy?: HTMLAttributeReferrerPolicy
rel?: string
routerOptions?: RouterOptions
target?: HTMLAttributeAnchorTarget
textValue: string
value?: T
}@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<T>>, ReactElement<TableBodyProps<T>>]
defaultSelectedKeys?: 'all' | Iterable<Key>
density?: 'compact' | 'regular' | 'spacious' = 'regular'
disabledBehavior?: DisabledBehavior = 'selection'
disabledKeys?: Iterable<Key>
disallowEmptySelection?: boolean
dragAndDropHooks?: DragAndDropHooks<NoInfer<{}>>['dragAndDropHooks']
end?: Responsive<DimensionValue>
escapeKeyBehavior?: 'clearSelection' | 'none' = 'clearSelection'
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
isHidden?: Responsive<boolean>
isQuiet?: boolean
justifySelf?: Responsive<'auto' | 'normal' | 'start' | 'end' | 'flex-start' | 'flex-end' | 'self-start' | 'self-end' | 'center' | 'left' | 'right' | 'stretch'>
+ keyboardNavigationBehavior?: 'arrow' | 'tab' = 'arrow'
left?: Responsive<DimensionValue>
margin?: Responsive<DimensionValue>
marginBottom?: Responsive<DimensionValue>
marginEnd?: 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']
end?: Responsive<DimensionValue>
escapeKeyBehavior?: 'clearSelection' | 'none' = 'clearSelection'
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
isHidden?: Responsive<boolean>
isQuiet?: boolean
justifySelf?: Responsive<'auto' | 'normal' | 'start' | 'end' | 'flex-start' | 'flex-end' | 'self-start' | 'self-end' | 'center' | 'left' | 'right' | 'stretch'>
+ keyboardNavigationBehavior?: 'arrow' | 'tab' = 'arrow'
left?: Responsive<DimensionValue>
margin?: Responsive<DimensionValue>
marginBottom?: Responsive<DimensionValue>
marginEnd?: 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/tree/@react-spectrum/tree:TreeViewItem TreeViewItem {
+ allowsArrowNavigation?: boolean
aria-label?: string
children: ReactNode
download?: boolean | string
+ focusMode?: 'child' | 'row' = 'row'
hasChildItems?: boolean
href?: Href
hrefLang?: string
id?: Key
onAction?: () => 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
textValue: string
}/@react-spectrum/tree:SpectrumTreeViewItemProps SpectrumTreeViewItemProps {
+ allowsArrowNavigation?: boolean
aria-label?: string
children: ReactNode
download?: boolean | string
+ focusMode?: 'child' | 'row' = 'row'
hasChildItems?: boolean
href?: Href
hrefLang?: string
id?: Key
onAction?: () => 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
textValue: string
}@react-stately/combobox/@react-stately/combobox:ComboBoxState ComboBoxState <M extends SelectionMode = 'single', T> {
close: () => void
collection: Collection<Node<T>>
commit: () => void
commitValidation: () => void
defaultInputValue: string
defaultValue: ValueType<SelectionMode>
disabledKeys: Set<Key>
displayValidation: ValidationResult
focusStrategy: FocusStrategy | null
inputValue: string
isFocused: boolean
isOpen: boolean
open: (FocusStrategy | null, MenuTriggerAction) => void
- point: Point | null
realtimeValidation: ValidationResult
resetValidation: () => void
revert: () => void
selectedItems: Array<Node<T>>
selectionManager: SelectionManager
setFocused: (boolean) => void
setInputValue: (string) => void
setOpen: (boolean) => void
- setPoint: (Point) => void
setValue: (Key | readonly Array<Key> | null) => void
toggle: (FocusStrategy | null, MenuTriggerAction) => void
updateValidation: (ValidationResult) => void
value: ValueType<SelectionMode>@react-stately/datepicker/@react-stately/datepicker:DatePickerState DatePickerState {
close: () => void
commitValidation: () => void
dateValue: DateValue | null
defaultValue: DateValue | null
displayValidation: ValidationResult
formatValue: (string, FieldOptions) => string
getDateFormatter: (string, FormatterOptions) => DateFormatter
granularity: Granularity
hasTime: boolean
isInvalid: boolean
isOpen: boolean
open: () => void
- point: Point | null
realtimeValidation: ValidationResult
resetValidation: () => void
setDateValue: (DateValue) => void
setOpen: (boolean) => void
- setPoint: (Point) => void
setTimeValue: (TimeValue) => void
setValue: (DateValue | null) => void
timeValue: TimeValue | null
toggle: () => void
value: DateValue | null
}/@react-stately/datepicker:DateRangePickerState DateRangePickerState {
close: () => void
commitValidation: () => void
dateRange: RangeValue<DateValue | null> | null
defaultValue: DateRange | null
displayValidation: ValidationResult
formatValue: (string, FieldOptions) => {
start: string
end: string
} | null
getDateFormatter: (string, FormatterOptions) => DateFormatter
granularity: Granularity
hasTime: boolean
isInvalid: boolean
isOpen: boolean
open: () => void
- point: Point | null
realtimeValidation: ValidationResult
resetValidation: () => void
setDate: ('start' | 'end', DateValue | null) => void
setDateRange: (DateRange) => void
setDateTime: ('start' | 'end', DateValue | null) => void
setOpen: (boolean) => void
- setPoint: (Point) => void
setTime: ('start' | 'end', TimeValue | null) => void
setTimeRange: (TimeRange) => void
setValue: (DateRange | null) => void
timeRange: RangeValue<TimeValue | null> | null
updateValidation: (ValidationResult) => void
value: RangeValue<DateValue | null>
}@react-stately/menu/@react-stately/menu:MenuTriggerState MenuTriggerState {
close: () => void
focusStrategy: FocusStrategy | null
isOpen: boolean
open: (FocusStrategy | null) => void
- point: Point | null
setOpen: (boolean) => void
- setPoint: (Point) => void
toggle: (FocusStrategy | null) => void
}/@react-stately/menu:RootMenuTriggerState RootMenuTriggerState {
close: () => void
closeSubmenu: (Key, number) => void
expandedKeysStack: Array<Key>
focusStrategy: FocusStrategy | null
isOpen: boolean
open: (FocusStrategy | null) => void
openSubmenu: (Key, number) => void
- point: Point | null
setOpen: (boolean) => void
- setPoint: (Point) => void
toggle: (FocusStrategy | null) => void
}/@react-stately/menu:SubmenuTriggerState SubmenuTriggerState {
close: () => void
closeAll: () => void
focusStrategy: FocusStrategy | null
isOpen: boolean
open: (FocusStrategy | null) => void
- point: Point | null
- setPoint: (Point) => void
submenuLevel: number
toggle: (FocusStrategy | null) => void
}@react-stately/overlays/@react-stately/overlays:OverlayTriggerState OverlayTriggerState {
close: () => void
isOpen: boolean
open: () => void
- point: Point | null
setOpen: (boolean) => void
- setPoint: (Point) => void
toggle: () => void
}@react-stately/select/@react-stately/select:SelectState SelectState <M extends SelectionMode = 'single', T> {
close: () => void
collection: Collection<Node<T>>
commitValidation: () => void
defaultValue: ValueType<SelectionMode>
disabledKeys: Set<Key>
displayValidation: ValidationResult
focusStrategy: FocusStrategy | null
isFocused: boolean
isOpen: boolean
open: (FocusStrategy | null) => void
- point: Point | null
realtimeValidation: ValidationResult
resetValidation: () => void
selectedItems: Array<Node<T>>
selectionManager: SelectionManager
setFocused: (boolean) => void
setOpen: (boolean) => void
- setPoint: (Point) => void
setValue: (Key | readonly Array<Key> | null) => void
toggle: (FocusStrategy | null) => void
updateValidation: (ValidationResult) => void
value: ValueType<SelectionMode>@react-stately/table/@react-stately/table:TableProps TableProps <T> {
children: [ReactElement<TableHeaderProps<T>>, ReactElement<TableBodyProps<T>>]
defaultExpandedKeys?: Iterable<Key>
defaultSelectedKeys?: 'all' | Iterable<Key>
disabledKeys?: Iterable<Key>
disallowEmptySelection?: boolean
escapeKeyBehavior?: 'clearSelection' | 'none' = 'clearSelection'
expandedKeys?: Iterable<Key>
+ keyboardNavigationBehavior?: 'arrow' | 'tab' = 'arrow'
onExpandedChange?: (Set<Key>) => any
onSelectionChange?: (Selection) => void
onSortChange?: (SortDescriptor) => any
selectedKeys?: 'all' | Iterable<Key>
shouldSelectOnPressUp?: boolean
sortDescriptor?: SortDescriptor
treeColumn?: Key
}@react-stately/tooltip/@react-stately/tooltip:TooltipTriggerState TooltipTriggerState {
close: (boolean) => void
isOpen: boolean
open: (boolean) => void
- shouldSkipAnimation: boolean
} |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Closes
Early draft of SideNav for S2.
api is this right now:
decisions to make still
✅ Pull Request Checklist:
📝 Test Instructions:
🧢 Your Project: