[WIP] - S2 listview and highlight selection #8878
Open
+1,247
−88
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
# Conflicts: # packages/@react-spectrum/s2/src/TreeView.tsx # packages/@react-spectrum/s2/src/index.ts
|
Build successful! 🎉 |
|
Build successful! 🎉 |
|
Build successful! 🎉 |
|
Build successful! 🎉 |
|
Build successful! 🎉 |
|
Build successful! 🎉 |
|
Build successful! 🎉 |
## API Changes
react-aria-components/react-aria-components:SelectableCollectionContext-SelectableCollectionContext {
- UNTYPED
-}/react-aria-components:FieldInputContext-FieldInputContext {
- UNTYPED
-}/react-aria-components:GridListHeaderContext-GridListHeaderContext {
- UNTYPED
-}/react-aria-components:Input Input extends InputHTMLAttributes {
className?: ClassNameOrFunction<InputRenderProps>
onHoverChange?: (boolean) => void
onHoverEnd?: (HoverEvent) => void
onHoverStart?: (HoverEvent) => void
- placeholder?: string
style?: StyleOrFunction<InputRenderProps>
}/react-aria-components:createLeafComponent-createLeafComponent <E extends Element, P extends {}> {
- CollectionNodeClass: {}<any> | string
- render: (P, ForwardedRef<E>, any) => ReactElement | null
- returnVal: undefined
-}/react-aria-components:createBranchComponent-createBranchComponent <E extends Element, P extends {
- children?: any
-}, T extends {}> {
- CollectionNodeClass: {}<any> | string
- render: (P, ForwardedRef<E>, Node<T>) => ReactElement | null
- useChildren: (P) => ReactNode
- returnVal: undefined
-}/react-aria-components:CollectionBuilder-CollectionBuilder <C extends BaseCollection<{}>> {
- children: (BaseCollection<{}>) => ReactNode
- content: ReactNode
- createCollection?: () => BaseCollection<{}>
-}/react-aria-components:SelectionIndicator-SelectionIndicator {
- children?: ChildrenOrFunction<SharedElementRenderProps>
- className?: ClassNameOrFunction<SharedElementRenderProps>
- isSelected?: boolean
- style?: StyleOrFunction<SharedElementRenderProps>
-}/react-aria-components:SelectionIndicatorContext-SelectionIndicatorContext {
- UNTYPED
-}/react-aria-components:SharedElementTransition-SharedElementTransition {
- children: ReactNode
-}/react-aria-components:SharedElement-SharedElement {
- children?: ChildrenOrFunction<SharedElementRenderProps>
- className?: ClassNameOrFunction<SharedElementRenderProps>
- isVisible?: boolean
- name: string
- style?: StyleOrFunction<SharedElementRenderProps>
-}/react-aria-components:GridListItemRenderProps GridListItemRenderProps {
allowsDragging?: boolean
isDisabled: boolean
isDragging?: boolean
isDropTarget?: boolean
+ isFirstItem: boolean
isFocusVisible: boolean
isFocused: boolean
isHovered: boolean
+ isLastItem: boolean
isPressed: boolean
isSelected: boolean
selectionBehavior: SelectionBehavior
selectionMode: SelectionMode/react-aria-components:InputProps InputProps {
className?: ClassNameOrFunction<InputRenderProps>
onHoverChange?: (boolean) => void
onHoverEnd?: (HoverEvent) => void
onHoverStart?: (HoverEvent) => void
- placeholder?: string
style?: StyleOrFunction<InputRenderProps>
}/react-aria-components:SelectionIndicatorProps-SelectionIndicatorProps {
- children?: ChildrenOrFunction<SharedElementRenderProps>
- className?: ClassNameOrFunction<SharedElementRenderProps>
- isSelected?: boolean
- style?: StyleOrFunction<SharedElementRenderProps>
-}/react-aria-components:SharedElementTransitionProps-SharedElementTransitionProps {
- children: ReactNode
-}/react-aria-components:SharedElementProps-SharedElementProps {
- children?: ChildrenOrFunction<SharedElementRenderProps>
- className?: ClassNameOrFunction<SharedElementRenderProps>
- isVisible?: boolean
- name: string
- style?: StyleOrFunction<SharedElementRenderProps>
-}/react-aria-components:SharedElementRenderProps-SharedElementRenderProps {
- isEntering: boolean
- isExiting: boolean
-}/react-aria-components:SelectableCollectionContextValue-SelectableCollectionContextValue <T> {
- aria-describedby?: string
- aria-details?: string
- aria-label?: string
- aria-labelledby?: string
- disallowTypeAhead?: boolean
- filter?: (string, Node<T>) => boolean
- id?: string
- shouldUseVirtualFocus?: boolean
-}/react-aria-components:UNSTABLE_createLeafComponent+UNSTABLE_createLeafComponent <E extends Element, P extends {}> {
+ CollectionNodeClass: {}<any> | 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
+ render: (P, ForwardedRef<E>, Node<T>) => ReactElement | null
+ useChildren: (P) => ReactNode
+ returnVal: undefined
+}/react-aria-components:UNSTABLE_CollectionBuilder+UNSTABLE_CollectionBuilder <C extends BaseCollection<{}>> {
+ children: (BaseCollection<{}>) => ReactNode
+ content: ReactNode
+ createCollection?: () => BaseCollection<{}>
+}@react-aria/disclosure/@react-aria/disclosure:useDisclosure useDisclosure {
props: AriaDisclosureProps
state: DisclosureState
- ref: RefObject<HTMLElement | null>
+ ref: RefObject<Element | null>
returnVal: undefined
}@react-aria/utils/@react-aria/utils:willOpenKeyboard-willOpenKeyboard {
- target: Element
- returnVal: undefined
-}@react-spectrum/s2/@react-spectrum/s2:UserCard UserCard {
UNSAFE_className?: UnsafeClassName
UNSAFE_style?: CSSProperties
children: ReactNode | (CardRenderProps) => ReactNode
+ density?: 'compact' | 'regular' | 'spacious' = 'regular'
download?: boolean | string
href?: Href
hrefLang?: string
id?: Key
isDisabled?: boolean
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
size?: 'XS' | 'S' | 'M' | 'L' | 'XL' = 'M'
styles?: StylesProp
target?: HTMLAttributeAnchorTarget
textValue?: string
value?: T
- variant?: 'primary' | 'secondary' | 'tertiary'
+ variant?: 'primary' | 'secondary' | 'tertiary' | 'quiet' = 'primary'
}/@react-spectrum/s2:ColorField ColorField {
UNSAFE_className?: UnsafeClassName
UNSAFE_style?: CSSProperties
aria-describedby?: string
aria-details?: string
aria-errormessage?: string
aria-label?: string
aria-labelledby?: string
autoFocus?: boolean
channel?: ColorChannel
colorSpace?: ColorSpace
contextualHelp?: ReactNode
defaultValue?: T
description?: ReactNode
errorMessage?: ReactNode | (ValidationResult) => ReactNode
excludeFromTabOrder?: boolean
form?: string
id?: string
isDisabled?: boolean
isInvalid?: boolean
isReadOnly?: boolean
isRequired?: boolean
isWheelDisabled?: boolean
label?: ReactNode
labelAlign?: Alignment = 'start'
labelPosition?: LabelPosition = 'top'
name?: string
necessityIndicator?: NecessityIndicator = 'icon'
onBeforeInput?: FormEventHandler<HTMLInputElement>
onBlur?: (FocusEvent<Target>) => void
onChange?: (Color | null) => void
onCompositionEnd?: CompositionEventHandler<HTMLInputElement>
onCompositionStart?: CompositionEventHandler<HTMLInputElement>
onCompositionUpdate?: CompositionEventHandler<HTMLInputElement>
onCopy?: ClipboardEventHandler<HTMLInputElement>
onCut?: ClipboardEventHandler<HTMLInputElement>
onFocus?: (FocusEvent<Target>) => void
onFocusChange?: (boolean) => void
onInput?: FormEventHandler<HTMLInputElement>
onKeyDown?: (KeyboardEvent) => void
onKeyUp?: (KeyboardEvent) => void
onPaste?: ClipboardEventHandler<HTMLInputElement>
onSelect?: ReactEventHandler<HTMLInputElement>
- placeholder?: string
size?: 'S' | 'M' | 'L' | 'XL' = 'M'
slot?: string | null
styles?: StylesProp
validate?: (Color | null) => ValidationError | boolean | null | undefined
value?: T
}/@react-spectrum/s2:ComboBox ComboBox <T extends {}> {
UNSAFE_className?: UnsafeClassName
UNSAFE_style?: CSSProperties
align?: 'start' | 'end' = 'start'
allowsCustomValue?: boolean
aria-describedby?: string
aria-details?: string
aria-label?: string
aria-labelledby?: string
autoFocus?: boolean
children: ReactNode | ({}) => ReactNode
contextualHelp?: ReactNode
defaultInputValue?: string
defaultItems?: Iterable<T>
defaultSelectedKey?: Key
dependencies?: ReadonlyArray<any>
description?: ReactNode
direction?: 'bottom' | 'top' = 'bottom'
disabledKeys?: Iterable<Key>
errorMessage?: ReactNode | (ValidationResult) => ReactNode
form?: string
formValue?: 'text' | 'key' = 'key'
id?: string
inputValue?: string
isDisabled?: boolean
isInvalid?: boolean
isReadOnly?: boolean
isRequired?: boolean
items?: Iterable<T>
label?: ReactNode
labelAlign?: Alignment = 'start'
labelPosition?: LabelPosition = 'top'
loadingState?: LoadingState
menuTrigger?: MenuTriggerAction = 'input'
menuWidth?: number
name?: string
necessityIndicator?: NecessityIndicator = 'icon'
onBlur?: (FocusEvent<HTMLInputElement>) => void
onFocus?: (FocusEvent<HTMLInputElement>) => void
onFocusChange?: (boolean) => void
onInputChange?: (string) => void
onKeyDown?: (KeyboardEvent) => void
onKeyUp?: (KeyboardEvent) => void
onLoadMore?: () => any
onOpenChange?: (boolean, MenuTriggerAction) => void
onSelectionChange?: (Key | null) => void
- placeholder?: string
selectedKey?: Key | null
shouldFlip?: boolean = true
shouldFocusWrap?: boolean
size?: 'S' | 'M' | 'L' | 'XL' = 'M'
styles?: StylesProp
validate?: (ComboBoxValidationValue) => ValidationError | boolean | null | undefined
validationBehavior?: 'native' | 'aria' = 'native'
}/@react-spectrum/s2:Dialog Dialog {
UNSAFE_className?: UnsafeClassName
UNSAFE_style?: CSSProperties
aria-describedby?: string
aria-details?: string
aria-label?: string
aria-labelledby?: string
children?: ReactNode | (DialogRenderProps) => ReactNode
id?: string
isDismissible?: boolean
isKeyboardDismissDisabled?: boolean
role?: 'dialog' | 'alertdialog' = 'dialog'
- size?: 'S' | 'M' | 'L' | 'XL' = 'M'
+ size?: 'S' | 'M' | 'L' = 'M'
slot?: string | null
styles?: StylesProp
}/@react-spectrum/s2:NumberField NumberField {
UNSAFE_className?: UnsafeClassName
UNSAFE_style?: CSSProperties
aria-describedby?: string
aria-details?: string
aria-label?: string
aria-labelledby?: string
autoFocus?: boolean
contextualHelp?: ReactNode
decrementAriaLabel?: string
defaultValue?: number
description?: ReactNode
errorMessage?: ReactNode | (ValidationResult) => ReactNode
form?: string
formatOptions?: Intl.NumberFormatOptions
hideStepper?: boolean = false
id?: string
incrementAriaLabel?: string
isDisabled?: boolean
isInvalid?: boolean
isReadOnly?: boolean
isRequired?: boolean
isWheelDisabled?: boolean
label?: ReactNode
labelAlign?: Alignment = 'start'
labelPosition?: LabelPosition = 'top'
maxValue?: number
minValue?: number
name?: string
necessityIndicator?: NecessityIndicator = 'icon'
onBeforeInput?: FormEventHandler<HTMLInputElement>
onBlur?: (FocusEvent<Target>) => void
onChange?: (T) => void
onCompositionEnd?: CompositionEventHandler<HTMLInputElement>
onCompositionStart?: CompositionEventHandler<HTMLInputElement>
onCompositionUpdate?: CompositionEventHandler<HTMLInputElement>
onCopy?: ClipboardEventHandler<HTMLInputElement>
onCut?: ClipboardEventHandler<HTMLInputElement>
onFocus?: (FocusEvent<Target>) => void
onFocusChange?: (boolean) => void
onInput?: FormEventHandler<HTMLInputElement>
onKeyDown?: (KeyboardEvent) => void
onKeyUp?: (KeyboardEvent) => void
onPaste?: ClipboardEventHandler<HTMLInputElement>
onSelect?: ReactEventHandler<HTMLInputElement>
- placeholder?: string
size?: 'S' | 'M' | 'L' | 'XL' = 'M'
slot?: string | null
step?: number
styles?: StylesProp
validationBehavior?: 'native' | 'aria' = 'native'
value?: number
}/@react-spectrum/s2:Popover Popover {
UNSAFE_className?: UnsafeClassName
UNSAFE_style?: CSSProperties
aria-describedby?: string
aria-details?: string
aria-label?: string
aria-labelledby?: string
- children?: ChildrenOrFunction<PopoverRenderProps>
+ children?: ReactNode | (DialogRenderProps) => ReactNode
containerPadding?: number = 12
crossOffset?: number = 0
hideArrow?: boolean = false
id?: string
isOpen?: boolean
offset?: number = 8
onOpenChange?: (boolean) => void
- padding?: 'default' | 'none' = 'default'
placement?: Placement = 'bottom'
role?: 'dialog' | 'alertdialog' = 'dialog'
shouldFlip?: boolean = true
size?: 'S' | 'M' | 'L'
slot?: string | null
- styles?: PopoverStylesProp
+ styles?: StylesProp
triggerRef?: RefObject<Element | null>
}/@react-spectrum/s2:ColorSchemeContext-ColorSchemeContext {
- UNTYPED
-}/@react-spectrum/s2:SearchField SearchField {
UNSAFE_className?: UnsafeClassName
UNSAFE_style?: CSSProperties
aria-activedescendant?: string
aria-autocomplete?: 'none' | 'inline' | 'list' | 'both'
aria-controls?: string
aria-describedby?: string
aria-details?: string
aria-errormessage?: string
aria-haspopup?: boolean | 'false' | 'true' | 'menu' | 'listbox' | 'tree' | 'grid' | 'dialog'
aria-label?: string
aria-labelledby?: string
autoComplete?: string
autoCorrect?: string
autoFocus?: boolean
contextualHelp?: ReactNode
defaultValue?: string
description?: ReactNode
enterKeyHint?: 'enter' | 'done' | 'go' | 'next' | 'previous' | 'search' | 'send'
errorMessage?: ReactNode | (ValidationResult) => ReactNode
excludeFromTabOrder?: boolean
form?: string
id?: string
inputMode?: 'none' | 'text' | 'tel' | 'url' | 'email' | 'numeric' | 'decimal' | 'search'
isDisabled?: boolean
isInvalid?: boolean
isReadOnly?: boolean
isRequired?: boolean
label?: ReactNode
labelAlign?: Alignment = 'start'
labelPosition?: LabelPosition = 'top'
maxLength?: number
minLength?: number
name?: string
necessityIndicator?: NecessityIndicator = 'icon'
onBeforeInput?: FormEventHandler<HTMLInputElement>
onBlur?: (FocusEvent<T>) => void
onChange?: (T) => void
onClear?: () => void
onCompositionEnd?: CompositionEventHandler<HTMLInputElement>
onCompositionStart?: CompositionEventHandler<HTMLInputElement>
onCompositionUpdate?: CompositionEventHandler<HTMLInputElement>
onCopy?: ClipboardEventHandler<HTMLInputElement>
onCut?: ClipboardEventHandler<HTMLInputElement>
onFocus?: (FocusEvent<T>) => void
onFocusChange?: (boolean) => void
onInput?: FormEventHandler<HTMLInputElement>
onKeyDown?: (KeyboardEvent) => void
onKeyUp?: (KeyboardEvent) => void
onPaste?: ClipboardEventHandler<HTMLInputElement>
onSelect?: ReactEventHandler<HTMLInputElement>
onSubmit?: (string) => void
pattern?: string
- placeholder?: string
size?: 'S' | 'M' | 'L' | 'XL' = 'M'
slot?: string | null
spellCheck?: string
styles?: StylesProp
}) = 'search'
validate?: (string) => ValidationError | boolean | null | undefined
validationBehavior?: 'native' | 'aria' = 'native'
value?: string
}/@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
defaultSelectedKeys?: 'all' | Iterable<Key>
density?: 'compact' | 'spacious' | 'regular' = 'regular'
disabledKeys?: Iterable<Key>
disallowEmptySelection?: boolean
escapeKeyBehavior?: 'clearSelection' | 'none' = 'clearSelection'
+ highlightMode?: 'normal' | 'inverse'
+ isEmphasized?: boolean
isQuiet?: boolean
loadingState?: LoadingState
onAction?: (Key) => void
onLoadMore?: () => any
onResize?: (Map<Key, ColumnSize>) => void
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?: 'highlight' | 'checkbox'
shouldSelectOnPressUp?: boolean
slot?: string | null
sortDescriptor?: SortDescriptor
styles?: StylesPropWithHeight/@react-spectrum/s2:TextArea TextArea {
UNSAFE_className?: UnsafeClassName
UNSAFE_style?: CSSProperties
aria-activedescendant?: string
aria-autocomplete?: 'none' | 'inline' | 'list' | 'both'
aria-controls?: string
aria-describedby?: string
aria-details?: string
aria-errormessage?: string
aria-haspopup?: boolean | 'false' | 'true' | 'menu' | 'listbox' | 'tree' | 'grid' | 'dialog'
aria-label?: string
aria-labelledby?: string
autoComplete?: string
autoCorrect?: string
autoFocus?: boolean
contextualHelp?: ReactNode
defaultValue?: string
description?: ReactNode
enterKeyHint?: 'enter' | 'done' | 'go' | 'next' | 'previous' | 'search' | 'send'
errorMessage?: ReactNode | (ValidationResult) => ReactNode
excludeFromTabOrder?: boolean
form?: string
id?: string
inputMode?: 'none' | 'text' | 'tel' | 'url' | 'email' | 'numeric' | 'decimal' | 'search'
isDisabled?: boolean
isInvalid?: boolean
isReadOnly?: boolean
isRequired?: boolean
label?: ReactNode
labelAlign?: Alignment = 'start'
labelPosition?: LabelPosition = 'top'
maxLength?: number
minLength?: number
name?: string
necessityIndicator?: NecessityIndicator = 'icon'
onBeforeInput?: FormEventHandler<HTMLInputElement>
onBlur?: (FocusEvent<T>) => void
onChange?: (T) => void
onCompositionEnd?: CompositionEventHandler<HTMLInputElement>
onCompositionStart?: CompositionEventHandler<HTMLInputElement>
onCompositionUpdate?: CompositionEventHandler<HTMLInputElement>
onCopy?: ClipboardEventHandler<HTMLInputElement>
onCut?: ClipboardEventHandler<HTMLInputElement>
onFocus?: (FocusEvent<T>) => void
onFocusChange?: (boolean) => void
onInput?: FormEventHandler<HTMLInputElement>
onKeyDown?: (KeyboardEvent) => void
onKeyUp?: (KeyboardEvent) => void
onPaste?: ClipboardEventHandler<HTMLInputElement>
onSelect?: ReactEventHandler<HTMLInputElement>
- placeholder?: string
size?: 'S' | 'M' | 'L' | 'XL' = 'M'
slot?: string | null
spellCheck?: string
styles?: StylesProp
validationBehavior?: 'native' | 'aria' = 'native'
value?: string
}/@react-spectrum/s2:TextField TextField {
UNSAFE_className?: UnsafeClassName
UNSAFE_style?: CSSProperties
aria-activedescendant?: string
aria-autocomplete?: 'none' | 'inline' | 'list' | 'both'
aria-controls?: string
aria-describedby?: string
aria-details?: string
aria-errormessage?: string
aria-haspopup?: boolean | 'false' | 'true' | 'menu' | 'listbox' | 'tree' | 'grid' | 'dialog'
aria-label?: string
aria-labelledby?: string
autoComplete?: string
autoCorrect?: string
autoFocus?: boolean
contextualHelp?: ReactNode
defaultValue?: string
description?: ReactNode
enterKeyHint?: 'enter' | 'done' | 'go' | 'next' | 'previous' | 'search' | 'send'
errorMessage?: ReactNode | (ValidationResult) => ReactNode
excludeFromTabOrder?: boolean
form?: string
id?: string
inputMode?: 'none' | 'text' | 'tel' | 'url' | 'email' | 'numeric' | 'decimal' | 'search'
isDisabled?: boolean
isInvalid?: boolean
isReadOnly?: boolean
isRequired?: boolean
label?: ReactNode
labelAlign?: Alignment = 'start'
labelPosition?: LabelPosition = 'top'
maxLength?: number
minLength?: number
name?: string
necessityIndicator?: NecessityIndicator = 'icon'
onBeforeInput?: FormEventHandler<HTMLInputElement>
onBlur?: (FocusEvent<T>) => void
onChange?: (T) => void
onCompositionEnd?: CompositionEventHandler<HTMLInputElement>
onCompositionStart?: CompositionEventHandler<HTMLInputElement>
onCompositionUpdate?: CompositionEventHandler<HTMLInputElement>
onCopy?: ClipboardEventHandler<HTMLInputElement>
onCut?: ClipboardEventHandler<HTMLInputElement>
onFocus?: (FocusEvent<T>) => void
onFocusChange?: (boolean) => void
onInput?: FormEventHandler<HTMLInputElement>
onKeyDown?: (KeyboardEvent) => void
onKeyUp?: (KeyboardEvent) => void
onPaste?: ClipboardEventHandler<HTMLInputElement>
onSelect?: ReactEventHandler<HTMLInputElement>
pattern?: string
- placeholder?: string
size?: 'S' | 'M' | 'L' | 'XL' = 'M'
slot?: string | null
spellCheck?: string
styles?: StylesProp
}) = 'text'
validate?: (string) => ValidationError | boolean | null | undefined
validationBehavior?: 'native' | 'aria' = 'native'
value?: string
}/@react-spectrum/s2:TreeView TreeView <T extends {}> {
UNSAFE_className?: UnsafeClassName
UNSAFE_style?: CSSProperties
aria-describedby?: string
aria-details?: string
aria-label?: string
aria-labelledby?: string
autoFocus?: boolean | FocusStrategy
children?: ReactNode | (T) => ReactNode
defaultExpandedKeys?: Iterable<Key>
defaultSelectedKeys?: 'all' | Iterable<Key>
dependencies?: ReadonlyArray<any>
disabledBehavior?: DisabledBehavior = 'all'
disabledKeys?: Iterable<Key>
disallowEmptySelection?: boolean
escapeKeyBehavior?: 'clearSelection' | 'none' = 'clearSelection'
expandedKeys?: Iterable<Key>
+ highlightMode?: 'normal' | 'inverse'
id?: string
isDetached?: boolean
isEmphasized?: boolean
items?: Iterable<T>
onAction?: (Key) => void
onExpandedChange?: (Set<Key>) => any
onSelectionChange?: (Selection) => void
renderEmptyState?: (TreeEmptyStateRenderProps) => ReactNode
selectedKeys?: 'all' | Iterable<Key>
+ selectionCornerStyle?: 'square' | 'round'
selectionMode?: SelectionMode
+ selectionStyle?: 'highlight' | 'checkbox'
shouldSelectOnPressUp?: boolean
slot?: string | null
styles?: StylesPropWithHeight
}/@react-spectrum/s2:ColorFieldProps ColorFieldProps {
UNSAFE_className?: UnsafeClassName
UNSAFE_style?: CSSProperties
aria-describedby?: string
aria-details?: string
aria-errormessage?: string
aria-label?: string
aria-labelledby?: string
autoFocus?: boolean
channel?: ColorChannel
colorSpace?: ColorSpace
contextualHelp?: ReactNode
defaultValue?: T
description?: ReactNode
errorMessage?: ReactNode | (ValidationResult) => ReactNode
excludeFromTabOrder?: boolean
form?: string
id?: string
isDisabled?: boolean
isInvalid?: boolean
isReadOnly?: boolean
isRequired?: boolean
isWheelDisabled?: boolean
label?: ReactNode
labelAlign?: Alignment = 'start'
labelPosition?: LabelPosition = 'top'
name?: string
necessityIndicator?: NecessityIndicator = 'icon'
onBeforeInput?: FormEventHandler<HTMLInputElement>
onBlur?: (FocusEvent<Target>) => void
onChange?: (Color | null) => void
onCompositionEnd?: CompositionEventHandler<HTMLInputElement>
onCompositionStart?: CompositionEventHandler<HTMLInputElement>
onCompositionUpdate?: CompositionEventHandler<HTMLInputElement>
onCopy?: ClipboardEventHandler<HTMLInputElement>
onCut?: ClipboardEventHandler<HTMLInputElement>
onFocus?: (FocusEvent<Target>) => void
onFocusChange?: (boolean) => void
onInput?: FormEventHandler<HTMLInputElement>
onKeyDown?: (KeyboardEvent) => void
onKeyUp?: (KeyboardEvent) => void
onPaste?: ClipboardEventHandler<HTMLInputElement>
onSelect?: ReactEventHandler<HTMLInputElement>
- placeholder?: string
size?: 'S' | 'M' | 'L' | 'XL' = 'M'
slot?: string | null
styles?: StylesProp
validate?: (Color | null) => ValidationError | boolean | null | undefined
value?: T
}/@react-spectrum/s2:ComboBoxProps ComboBoxProps <T extends {}> {
UNSAFE_className?: UnsafeClassName
UNSAFE_style?: CSSProperties
align?: 'start' | 'end' = 'start'
allowsCustomValue?: boolean
aria-describedby?: string
aria-details?: string
aria-label?: string
aria-labelledby?: string
autoFocus?: boolean
children: ReactNode | ({}) => ReactNode
contextualHelp?: ReactNode
defaultInputValue?: string
defaultItems?: Iterable<T>
defaultSelectedKey?: Key
dependencies?: ReadonlyArray<any>
description?: ReactNode
direction?: 'bottom' | 'top' = 'bottom'
disabledKeys?: Iterable<Key>
errorMessage?: ReactNode | (ValidationResult) => ReactNode
form?: string
formValue?: 'text' | 'key' = 'key'
id?: string
inputValue?: string
isDisabled?: boolean
isInvalid?: boolean
isReadOnly?: boolean
isRequired?: boolean
items?: Iterable<T>
label?: ReactNode
labelAlign?: Alignment = 'start'
labelPosition?: LabelPosition = 'top'
loadingState?: LoadingState
menuTrigger?: MenuTriggerAction = 'input'
menuWidth?: number
name?: string
necessityIndicator?: NecessityIndicator = 'icon'
onBlur?: (FocusEvent<HTMLInputElement>) => void
onFocus?: (FocusEvent<HTMLInputElement>) => void
onFocusChange?: (boolean) => void
onInputChange?: (string) => void
onKeyDown?: (KeyboardEvent) => void
onKeyUp?: (KeyboardEvent) => void
onLoadMore?: () => any
onOpenChange?: (boolean, MenuTriggerAction) => void
onSelectionChange?: (Key | null) => void
- placeholder?: string
selectedKey?: Key | null
shouldFlip?: boolean = true
shouldFocusWrap?: boolean
size?: 'S' | 'M' | 'L' | 'XL' = 'M'
styles?: StylesProp
validate?: (ComboBoxValidationValue) => ValidationError | boolean | null | undefined
validationBehavior?: 'native' | 'aria' = 'native'
}/@react-spectrum/s2:DialogProps DialogProps {
UNSAFE_className?: UnsafeClassName
UNSAFE_style?: CSSProperties
aria-describedby?: string
aria-details?: string
aria-label?: string
aria-labelledby?: string
children?: ReactNode | (DialogRenderProps) => ReactNode
id?: string
isDismissible?: boolean
isKeyboardDismissDisabled?: boolean
role?: 'dialog' | 'alertdialog' = 'dialog'
- size?: 'S' | 'M' | 'L' | 'XL' = 'M'
+ size?: 'S' | 'M' | 'L' = 'M'
slot?: string | null
styles?: StylesProp
}/@react-spectrum/s2:SearchFieldProps SearchFieldProps {
UNSAFE_className?: UnsafeClassName
UNSAFE_style?: CSSProperties
aria-activedescendant?: string
aria-autocomplete?: 'none' | 'inline' | 'list' | 'both'
aria-controls?: string
aria-describedby?: string
aria-details?: string
aria-errormessage?: string
aria-haspopup?: boolean | 'false' | 'true' | 'menu' | 'listbox' | 'tree' | 'grid' | 'dialog'
aria-label?: string
aria-labelledby?: string
autoComplete?: string
autoCorrect?: string
autoFocus?: boolean
contextualHelp?: ReactNode
defaultValue?: string
description?: ReactNode
enterKeyHint?: 'enter' | 'done' | 'go' | 'next' | 'previous' | 'search' | 'send'
errorMessage?: ReactNode | (ValidationResult) => ReactNode
excludeFromTabOrder?: boolean
form?: string
id?: string
inputMode?: 'none' | 'text' | 'tel' | 'url' | 'email' | 'numeric' | 'decimal' | 'search'
isDisabled?: boolean
isInvalid?: boolean
isReadOnly?: boolean
isRequired?: boolean
label?: ReactNode
labelAlign?: Alignment = 'start'
labelPosition?: LabelPosition = 'top'
maxLength?: number
minLength?: number
name?: string
necessityIndicator?: NecessityIndicator = 'icon'
onBeforeInput?: FormEventHandler<HTMLInputElement>
onBlur?: (FocusEvent<T>) => void
onChange?: (T) => void
onClear?: () => void
onCompositionEnd?: CompositionEventHandler<HTMLInputElement>
onCompositionStart?: CompositionEventHandler<HTMLInputElement>
onCompositionUpdate?: CompositionEventHandler<HTMLInputElement>
onCopy?: ClipboardEventHandler<HTMLInputElement>
onCut?: ClipboardEventHandler<HTMLInputElement>
onFocus?: (FocusEvent<T>) => void
onFocusChange?: (boolean) => void
onInput?: FormEventHandler<HTMLInputElement>
onKeyDown?: (KeyboardEvent) => void
onKeyUp?: (KeyboardEvent) => void
onPaste?: ClipboardEventHandler<HTMLInputElement>
onSelect?: ReactEventHandler<HTMLInputElement>
onSubmit?: (string) => void
pattern?: string
- placeholder?: string
size?: 'S' | 'M' | 'L' | 'XL' = 'M'
slot?: string | null
spellCheck?: string
styles?: StylesProp
}) = 'search'
validate?: (string) => ValidationError | boolean | null | undefined
validationBehavior?: 'native' | 'aria' = 'native'
value?: 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
defaultSelectedKeys?: 'all' | Iterable<Key>
density?: 'compact' | 'spacious' | 'regular' = 'regular'
disabledKeys?: Iterable<Key>
disallowEmptySelection?: boolean
escapeKeyBehavior?: 'clearSelection' | 'none' = 'clearSelection'
+ highlightMode?: 'normal' | 'inverse'
+ isEmphasized?: boolean
isQuiet?: boolean
loadingState?: LoadingState
onAction?: (Key) => void
onLoadMore?: () => any
onResize?: (Map<Key, ColumnSize>) => void
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?: 'highlight' | 'checkbox'
shouldSelectOnPressUp?: boolean
slot?: string | null
sortDescriptor?: SortDescriptor
styles?: StylesPropWithHeight/@react-spectrum/s2:TextFieldProps TextFieldProps {
UNSAFE_className?: UnsafeClassName
UNSAFE_style?: CSSProperties
aria-activedescendant?: string
aria-autocomplete?: 'none' | 'inline' | 'list' | 'both'
aria-controls?: string
aria-describedby?: string
aria-details?: string
aria-errormessage?: string
aria-haspopup?: boolean | 'false' | 'true' | 'menu' | 'listbox' | 'tree' | 'grid' | 'dialog'
aria-label?: string
aria-labelledby?: string
autoComplete?: string
autoCorrect?: string
autoFocus?: boolean
contextualHelp?: ReactNode
defaultValue?: string
description?: ReactNode
enterKeyHint?: 'enter' | 'done' | 'go' | 'next' | 'previous' | 'search' | 'send'
errorMessage?: ReactNode | (ValidationResult) => ReactNode
excludeFromTabOrder?: boolean
form?: string
id?: string
inputMode?: 'none' | 'text' | 'tel' | 'url' | 'email' | 'numeric' | 'decimal' | 'search'
isDisabled?: boolean
isInvalid?: boolean
isReadOnly?: boolean
isRequired?: boolean
label?: ReactNode
labelAlign?: Alignment = 'start'
labelPosition?: LabelPosition = 'top'
maxLength?: number
minLength?: number
name?: string
necessityIndicator?: NecessityIndicator = 'icon'
onBeforeInput?: FormEventHandler<HTMLInputElement>
onBlur?: (FocusEvent<T>) => void
onChange?: (T) => void
onCompositionEnd?: CompositionEventHandler<HTMLInputElement>
onCompositionStart?: CompositionEventHandler<HTMLInputElement>
onCompositionUpdate?: CompositionEventHandler<HTMLInputElement>
onCopy?: ClipboardEventHandler<HTMLInputElement>
onCut?: ClipboardEventHandler<HTMLInputElement>
onFocus?: (FocusEvent<T>) => void
onFocusChange?: (boolean) => void
onInput?: FormEventHandler<HTMLInputElement>
onKeyDown?: (KeyboardEvent) => void
onKeyUp?: (KeyboardEvent) => void
onPaste?: ClipboardEventHandler<HTMLInputElement>
onSelect?: ReactEventHandler<HTMLInputElement>
pattern?: string
- placeholder?: string
size?: 'S' | 'M' | 'L' | 'XL' = 'M'
slot?: string | null
spellCheck?: string
styles?: StylesProp
}) = 'text'
validate?: (string) => ValidationError | boolean | null | undefined
validationBehavior?: 'native' | 'aria' = 'native'
value?: string
}/@react-spectrum/s2:TextAreaProps TextAreaProps {
UNSAFE_className?: UnsafeClassName
UNSAFE_style?: CSSProperties
aria-activedescendant?: string
aria-autocomplete?: 'none' | 'inline' | 'list' | 'both'
aria-controls?: string
aria-describedby?: string
aria-details?: string
aria-errormessage?: string
aria-haspopup?: boolean | 'false' | 'true' | 'menu' | 'listbox' | 'tree' | 'grid' | 'dialog'
aria-label?: string
aria-labelledby?: string
autoComplete?: string
autoCorrect?: string
autoFocus?: boolean
contextualHelp?: ReactNode
defaultValue?: string
description?: ReactNode
enterKeyHint?: 'enter' | 'done' | 'go' | 'next' | 'previous' | 'search' | 'send'
errorMessage?: ReactNode | (ValidationResult) => ReactNode
excludeFromTabOrder?: boolean
form?: string
id?: string
inputMode?: 'none' | 'text' | 'tel' | 'url' | 'email' | 'numeric' | 'decimal' | 'search'
isDisabled?: boolean
isInvalid?: boolean
isReadOnly?: boolean
isRequired?: boolean
label?: ReactNode
labelAlign?: Alignment = 'start'
labelPosition?: LabelPosition = 'top'
maxLength?: number
minLength?: number
name?: string
necessityIndicator?: NecessityIndicator = 'icon'
onBeforeInput?: FormEventHandler<HTMLInputElement>
onBlur?: (FocusEvent<T>) => void
onChange?: (T) => void
onCompositionEnd?: CompositionEventHandler<HTMLInputElement>
onCompositionStart?: CompositionEventHandler<HTMLInputElement>
onCompositionUpdate?: CompositionEventHandler<HTMLInputElement>
onCopy?: ClipboardEventHandler<HTMLInputElement>
onCut?: ClipboardEventHandler<HTMLInputElement>
onFocus?: (FocusEvent<T>) => void
onFocusChange?: (boolean) => void
onInput?: FormEventHandler<HTMLInputElement>
onKeyDown?: (KeyboardEvent) => void
onKeyUp?: (KeyboardEvent) => void
onPaste?: ClipboardEventHandler<HTMLInputElement>
onSelect?: ReactEventHandler<HTMLInputElement>
- placeholder?: string
size?: 'S' | 'M' | 'L' | 'XL' = 'M'
slot?: string | null
spellCheck?: string
styles?: StylesProp
validationBehavior?: 'native' | 'aria' = 'native'
value?: string
}/@react-spectrum/s2:TreeViewProps TreeViewProps <T> {
UNSAFE_className?: UnsafeClassName
UNSAFE_style?: CSSProperties
aria-describedby?: string
aria-details?: string
aria-label?: string
aria-labelledby?: string
autoFocus?: boolean | FocusStrategy
children?: ReactNode | (T) => ReactNode
defaultExpandedKeys?: Iterable<Key>
defaultSelectedKeys?: 'all' | Iterable<Key>
dependencies?: ReadonlyArray<any>
disabledBehavior?: DisabledBehavior = 'all'
disabledKeys?: Iterable<Key>
disallowEmptySelection?: boolean
escapeKeyBehavior?: 'clearSelection' | 'none' = 'clearSelection'
expandedKeys?: Iterable<Key>
+ highlightMode?: 'normal' | 'inverse'
id?: string
isDetached?: boolean
isEmphasized?: boolean
items?: Iterable<T>
onAction?: (Key) => void
onExpandedChange?: (Set<Key>) => any
onSelectionChange?: (Selection) => void
renderEmptyState?: (TreeEmptyStateRenderProps) => ReactNode
selectedKeys?: 'all' | Iterable<Key>
+ selectionCornerStyle?: 'square' | 'round'
selectionMode?: SelectionMode
+ selectionStyle?: 'highlight' | 'checkbox'
shouldSelectOnPressUp?: boolean
slot?: string | null
styles?: StylesPropWithHeight
}/@react-spectrum/s2:ListView+ListView <T extends {}> {
+ UNSAFE_className?: UnsafeClassName
+ UNSAFE_style?: CSSProperties
+ aria-describedby?: string
+ aria-details?: string
+ aria-label?: string
+ aria-labelledby?: string
+ autoFocus?: boolean
+ children: ReactNode | ({}) => ReactNode
+ defaultSelectedKeys?: 'all' | Iterable<Key>
+ dependencies?: ReadonlyArray<any>
+ disabledBehavior?: DisabledBehavior = "all"
+ disabledKeys?: Iterable<Key>
+ disallowEmptySelection?: boolean
+ disallowTypeAhead?: boolean = false
+ dragAndDropHooks?: DragAndDropHooks<NoInfer<T>>
+ escapeKeyBehavior?: 'clearSelection' | 'none' = 'clearSelection'
+ highlightMode?: 'normal' | 'inverse'
+ id?: string
+ isEmphasized?: boolean
+ isQuiet?: boolean
+ items?: Iterable<T>
+ keyboardNavigationBehavior?: 'arrow' | 'tab' = 'arrow'
+ layout?: 'stack' | 'grid' = 'stack'
+ onAction?: (Key) => void
+ onSelectionChange?: (Selection) => void
+ renderEmptyState?: (GridListRenderProps) => ReactNode
+ selectedKeys?: 'all' | Iterable<Key>
+ selectionBehavior?: SelectionBehavior = "toggle"
+ selectionMode?: SelectionMode
+ selectionStyle?: 'highlight' | 'checkbox'
+ shouldSelectOnPressUp?: boolean
+ slot?: string | null
+ styles?: StylesPropWithHeight
+}/@react-spectrum/s2:ListViewItem+ListViewItem {
+ UNSAFE_className?: UnsafeClassName
+ UNSAFE_style?: CSSProperties
+ children: ReactNode
+ download?: boolean | string
+ href?: Href
+ hrefLang?: string
+ id?: Key
+ isDisabled?: boolean
+ 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
+ routerOptions?: RouterOptions
+ styles?: StylesProp
+ target?: HTMLAttributeAnchorTarget
+ textValue?: string
+ value?: T
+}/@react-spectrum/s2:TreeViewContext+TreeViewContext {
+ UNTYPED
+}/@react-spectrum/s2:ListViewProps+ListViewProps <T> {
+ UNSAFE_className?: UnsafeClassName
+ UNSAFE_style?: CSSProperties
+ aria-describedby?: string
+ aria-details?: string
+ aria-label?: string
+ aria-labelledby?: string
+ autoFocus?: boolean
+ children: ReactNode | (T) => ReactNode
+ defaultSelectedKeys?: 'all' | Iterable<Key>
+ dependencies?: ReadonlyArray<any>
+ disabledBehavior?: DisabledBehavior = "all"
+ disabledKeys?: Iterable<Key>
+ disallowEmptySelection?: boolean
+ disallowTypeAhead?: boolean = false
+ dragAndDropHooks?: DragAndDropHooks<NoInfer<T>>
+ escapeKeyBehavior?: 'clearSelection' | 'none' = 'clearSelection'
+ highlightMode?: 'normal' | 'inverse'
+ id?: string
+ isEmphasized?: boolean
+ isQuiet?: boolean
+ items?: Iterable<T>
+ keyboardNavigationBehavior?: 'arrow' | 'tab' = 'arrow'
+ layout?: 'stack' | 'grid' = 'stack'
+ onAction?: (Key) => void
+ onSelectionChange?: (Selection) => void
+ renderEmptyState?: (GridListRenderProps) => ReactNode
+ selectedKeys?: 'all' | Iterable<Key>
+ selectionBehavior?: SelectionBehavior = "toggle"
+ selectionMode?: SelectionMode
+ selectionStyle?: 'highlight' | 'checkbox'
+ shouldSelectOnPressUp?: boolean
+ slot?: string | null
+ styles?: StylesPropWithHeight
+}/@react-spectrum/s2:ListViewItemProps+ListViewItemProps {
+ UNSAFE_className?: UnsafeClassName
+ UNSAFE_style?: CSSProperties
+ children: ReactNode
+ download?: boolean | string
+ href?: Href
+ hrefLang?: string
+ id?: Key
+ isDisabled?: boolean
+ 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
+ routerOptions?: RouterOptions
+ styles?: StylesProp
+ target?: HTMLAttributeAnchorTarget
+ textValue?: string
+ value?: T
+} |
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
✅ Pull Request Checklist:
📝 Test Instructions:
🧢 Your Project: