chore(s2): update migration guide and codemods for release #8242
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
…re from TableBody to TableView"
## API Changes
react-aria-components/react-aria-components:DropZone DropZone {
aria-describedby?: string
aria-details?: string
aria-label?: string
aria-labelledby?: string
children?: ReactNode | ((DropZoneRenderProps & {
defaultChildren: ReactNode | undefined
})) => ReactNode
className?: string | ((DropZoneRenderProps & {
defaultClassName: string | undefined
})) => string
getDropOperation?: (DragTypes, Array<DropOperation>) => DropOperation
isDisabled?: boolean
onDrop?: (DropEvent) => void
+ onDropActivate?: (DropActivateEvent) => void
onDropEnter?: (DropEnterEvent) => void
onDropExit?: (DropExitEvent) => void
onDropMove?: (DropMoveEvent) => void
onHoverChange?: (boolean) => void
onHoverStart?: (HoverEvent) => void
slot?: string | null
style?: CSSProperties | ((DropZoneRenderProps & {
defaultStyle: CSSProperties
})) => CSSProperties | undefined
}/react-aria-components:Tree Tree <T extends {}> {
aria-describedby?: string
aria-details?: string
aria-label?: string
aria-labelledby?: string
autoFocus?: boolean | FocusStrategy
children?: ReactNode | ({}) => ReactNode
className?: string | ((TreeRenderProps & {
defaultClassName: string | undefined
})) => string
defaultExpandedKeys?: Iterable<Key>
defaultSelectedKeys?: 'all' | Iterable<Key>
dependencies?: ReadonlyArray<any>
disabledBehavior?: DisabledBehavior = 'all'
disabledKeys?: Iterable<Key>
disallowEmptySelection?: boolean
+ dragAndDropHooks?: DragAndDropHooks
escapeKeyBehavior?: 'clearSelection' | 'none' = 'clearSelection'
expandedKeys?: Iterable<Key>
id?: string
items?: Iterable<T>
+ keyboardDelegate?: KeyboardDelegate
onAction?: (Key) => void
onExpandedChange?: (Set<Key>) => any
onScroll?: (UIEvent<Element>) => void
onSelectionChange?: (Selection) => void
selectedKeys?: 'all' | Iterable<Key>
selectionBehavior?: SelectionBehavior
selectionMode?: SelectionMode
shouldSelectOnPressUp?: boolean
slot?: string | null
style?: CSSProperties | ((TreeRenderProps & {
defaultStyle: CSSProperties
})) => CSSProperties | undefined
}/react-aria-components:DropIndicator DropIndicator {
+ activateButtonRef?: RefObject<FocusableElement | null>
children?: ReactNode | ((DropIndicatorRenderProps & {
defaultChildren: ReactNode | undefined
})) => ReactNode
className?: string | ((DropIndicatorRenderProps & {
})) => string
style?: CSSProperties | ((DropIndicatorRenderProps & {
defaultStyle: CSSProperties
})) => CSSProperties | undefined
target: DropTarget
}/react-aria-components:DropZoneProps DropZoneProps {
aria-describedby?: string
aria-details?: string
aria-label?: string
aria-labelledby?: string
children?: ReactNode | ((DropZoneRenderProps & {
defaultChildren: ReactNode | undefined
})) => ReactNode
className?: string | ((DropZoneRenderProps & {
defaultClassName: string | undefined
})) => string
getDropOperation?: (DragTypes, Array<DropOperation>) => DropOperation
isDisabled?: boolean
onDrop?: (DropEvent) => void
+ onDropActivate?: (DropActivateEvent) => void
onDropEnter?: (DropEnterEvent) => void
onDropExit?: (DropExitEvent) => void
onDropMove?: (DropMoveEvent) => void
onHoverChange?: (boolean) => void
onHoverStart?: (HoverEvent) => void
slot?: string | null
style?: CSSProperties | ((DropZoneRenderProps & {
defaultStyle: CSSProperties
})) => CSSProperties | undefined
}/react-aria-components:TreeProps TreeProps <T> {
aria-describedby?: string
aria-details?: string
aria-label?: string
aria-labelledby?: string
autoFocus?: boolean | FocusStrategy
children?: ReactNode | (T) => ReactNode
className?: string | ((TreeRenderProps & {
defaultClassName: string | undefined
})) => string
defaultExpandedKeys?: Iterable<Key>
defaultSelectedKeys?: 'all' | Iterable<Key>
dependencies?: ReadonlyArray<any>
disabledBehavior?: DisabledBehavior = 'all'
disabledKeys?: Iterable<Key>
disallowEmptySelection?: boolean
+ dragAndDropHooks?: DragAndDropHooks
escapeKeyBehavior?: 'clearSelection' | 'none' = 'clearSelection'
expandedKeys?: Iterable<Key>
id?: string
items?: Iterable<T>
+ keyboardDelegate?: KeyboardDelegate
onAction?: (Key) => void
onExpandedChange?: (Set<Key>) => any
onScroll?: (UIEvent<Element>) => void
onSelectionChange?: (Selection) => void
selectedKeys?: 'all' | Iterable<Key>
selectionBehavior?: SelectionBehavior
selectionMode?: SelectionMode
shouldSelectOnPressUp?: boolean
slot?: string | null
style?: CSSProperties | ((TreeRenderProps & {
defaultStyle: CSSProperties
})) => CSSProperties | undefined
}/react-aria-components:TreeItemRenderProps TreeItemRenderProps {
+ allowsDragging?: boolean
hasChildItems: boolean
id: Key
isDisabled: boolean
+ isDragging?: boolean
+ isDropTarget?: boolean
isExpanded: boolean
isFocusVisible: boolean
isFocusVisibleWithin: boolean
isFocused: boolean
isPressed: boolean
isSelected: boolean
level: number
selectionBehavior: SelectionBehavior
selectionMode: SelectionMode
state: TreeState<unknown>
}/react-aria-components:TreeItemContentRenderProps TreeItemContentRenderProps {
+ allowsDragging?: boolean
hasChildItems: boolean
id: Key
isDisabled: boolean
+ isDragging?: boolean
+ isDropTarget?: boolean
isExpanded: boolean
isFocusVisible: boolean
isFocusVisibleWithin: boolean
isFocused: boolean
isPressed: boolean
isSelected: boolean
level: number
selectionBehavior: SelectionBehavior
selectionMode: SelectionMode
state: TreeState<unknown>
}/react-aria-components:DragAndDropOptions DragAndDropOptions {
acceptedDragTypes?: 'all' | Array<string | symbol> = 'all'
dropTargetDelegate?: DropTargetDelegate
getAllowedDropOperations?: () => Array<DropOperation>
getDropOperation?: (DropTarget, DragTypes, Array<DropOperation>) => DropOperation
getItems?: (Set<Key>) => Array<DragItem> = () => []
isDisabled?: boolean
onDragEnd?: (DraggableCollectionEndEvent) => void
onDragMove?: (DraggableCollectionMoveEvent) => void
onDragStart?: (DraggableCollectionStartEvent) => void
onDrop?: (DroppableCollectionDropEvent) => void
+ onDropActivate?: (DroppableCollectionActivateEvent) => void
onDropEnter?: (DroppableCollectionEnterEvent) => void
onDropExit?: (DroppableCollectionExitEvent) => void
onInsert?: (DroppableCollectionInsertDropEvent) => void
onItemDrop?: (DroppableCollectionOnItemDropEvent) => void
+ onMove?: (DroppableCollectionReorderEvent) => void
onReorder?: (DroppableCollectionReorderEvent) => void
onRootDrop?: (DroppableCollectionRootDropEvent) => void
renderDragPreview?: (Array<DragItem>) => JSX.Element
renderDropIndicator?: (DropTarget) => JSX.Element
}/react-aria-components:DropIndicatorProps DropIndicatorProps {
+ activateButtonRef?: RefObject<FocusableElement | null>
children?: ReactNode | ((DropIndicatorRenderProps & {
defaultChildren: ReactNode | undefined
})) => ReactNode
className?: string | ((DropIndicatorRenderProps & {
})) => string
style?: CSSProperties | ((DropIndicatorRenderProps & {
defaultStyle: CSSProperties
})) => CSSProperties | undefined
target: DropTarget
}@react-aria/dnd/@react-aria/dnd:DroppableCollectionOptions DroppableCollectionOptions {
acceptedDragTypes?: 'all' | Array<string | symbol> = 'all'
dropTargetDelegate: DropTargetDelegate
getDropOperation?: (DropTarget, DragTypes, Array<DropOperation>) => DropOperation
keyboardDelegate: KeyboardDelegate
onDrop?: (DroppableCollectionDropEvent) => void
+ onDropActivate?: (DroppableCollectionActivateEvent) => void
onDropEnter?: (DroppableCollectionEnterEvent) => void
onDropExit?: (DroppableCollectionExitEvent) => void
onInsert?: (DroppableCollectionInsertDropEvent) => void
onItemDrop?: (DroppableCollectionOnItemDropEvent) => void
+ onKeyDown?: (KeyboardEvent) => void
+ onMove?: (DroppableCollectionReorderEvent) => void
onReorder?: (DroppableCollectionReorderEvent) => void
onRootDrop?: (DroppableCollectionRootDropEvent) => void
shouldAcceptItemDrop?: (ItemDropTarget, DragTypes) => boolean
}/@react-aria/dnd:DroppableItemOptions DroppableItemOptions {
+ activateButtonRef?: RefObject<FocusableElement | null>
target: DropTarget
}/@react-aria/dnd:DropIndicatorProps DropIndicatorProps {
+ activateButtonRef?: RefObject<FocusableElement | null>
target: DropTarget
}/@react-aria/dnd:DropOptions DropOptions {
getDropOperation?: (DragTypes, Array<DropOperation>) => DropOperation
getDropOperationForPoint?: (DragTypes, Array<DropOperation>, number, number) => DropOperation
hasDropButton?: boolean
isDisabled?: boolean
onDrop?: (DropEvent) => void
+ onDropActivate?: (DropActivateEvent) => void
onDropEnter?: (DropEnterEvent) => void
onDropExit?: (DropExitEvent) => void
onDropMove?: (DropMoveEvent) => void
ref: RefObject<FocusableElement | null>@react-spectrum/dnd/@react-spectrum/dnd:DragAndDropOptions DragAndDropOptions {
acceptedDragTypes?: 'all' | Array<string | symbol> = 'all'
getAllowedDropOperations?: () => Array<DropOperation>
getDropOperation?: (DropTarget, DragTypes, Array<DropOperation>) => DropOperation
getItems?: (Set<Key>) => Array<DragItem> = () => []
onDragEnd?: (DraggableCollectionEndEvent) => void
onDragMove?: (DraggableCollectionMoveEvent) => void
onDragStart?: (DraggableCollectionStartEvent) => void
onDrop?: (DroppableCollectionDropEvent) => void
+ onDropActivate?: (DroppableCollectionActivateEvent) => void
onDropEnter?: (DroppableCollectionEnterEvent) => void
onDropExit?: (DroppableCollectionExitEvent) => void
onInsert?: (DroppableCollectionInsertDropEvent) => void
onItemDrop?: (DroppableCollectionOnItemDropEvent) => void
+ onMove?: (DroppableCollectionReorderEvent) => void
onReorder?: (DroppableCollectionReorderEvent) => void
onRootDrop?: (DroppableCollectionRootDropEvent) => void
renderPreview?: (Set<Key>, Key) => JSX.Element
shouldAcceptItemDrop?: (ItemDropTarget, DragTypes) => boolean@react-spectrum/dropzone/@react-spectrum/dropzone:DropZone DropZone {
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: ReactNode
end?: Responsive<DimensionValue>
flex?: Responsive<string | number | boolean>
flexBasis?: Responsive<number | string>
flexGrow?: Responsive<number>
flexShrink?: Responsive<number>
getDropOperation?: (DragTypes, Array<DropOperation>) => DropOperation
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
isFilled?: boolean
isHidden?: Responsive<boolean>
justifySelf?: Responsive<'auto' | 'normal' | 'start' | 'end' | 'flex-start' | 'flex-end' | 'self-start' | 'self-end' | 'center' | 'left' | 'right' | 'stretch'>
left?: Responsive<DimensionValue>
margin?: Responsive<DimensionValue>
marginBottom?: Responsive<DimensionValue>
marginEnd?: Responsive<DimensionValue>
marginStart?: Responsive<DimensionValue>
marginTop?: Responsive<DimensionValue>
marginX?: Responsive<DimensionValue>
marginY?: Responsive<DimensionValue>
maxHeight?: Responsive<DimensionValue>
maxWidth?: Responsive<DimensionValue>
minHeight?: Responsive<DimensionValue>
minWidth?: Responsive<DimensionValue>
onDrop?: (DropEvent) => void
+ onDropActivate?: (DropActivateEvent) => void
onDropEnter?: (DropEnterEvent) => void
onDropExit?: (DropExitEvent) => void
onDropMove?: (DropMoveEvent) => void
order?: Responsive<number>
replaceMessage?: string
right?: Responsive<DimensionValue>
slot?: string | null
start?: Responsive<DimensionValue>
top?: Responsive<DimensionValue>
width?: Responsive<DimensionValue>
zIndex?: Responsive<number>
}/@react-spectrum/dropzone:SpectrumDropZoneProps SpectrumDropZoneProps {
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: ReactNode
end?: Responsive<DimensionValue>
flex?: Responsive<string | number | boolean>
flexBasis?: Responsive<number | string>
flexGrow?: Responsive<number>
flexShrink?: Responsive<number>
getDropOperation?: (DragTypes, Array<DropOperation>) => DropOperation
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
isFilled?: boolean
isHidden?: Responsive<boolean>
justifySelf?: Responsive<'auto' | 'normal' | 'start' | 'end' | 'flex-start' | 'flex-end' | 'self-start' | 'self-end' | 'center' | 'left' | 'right' | 'stretch'>
left?: Responsive<DimensionValue>
margin?: Responsive<DimensionValue>
marginBottom?: Responsive<DimensionValue>
marginEnd?: Responsive<DimensionValue>
marginStart?: Responsive<DimensionValue>
marginTop?: Responsive<DimensionValue>
marginX?: Responsive<DimensionValue>
marginY?: Responsive<DimensionValue>
maxHeight?: Responsive<DimensionValue>
maxWidth?: Responsive<DimensionValue>
minHeight?: Responsive<DimensionValue>
minWidth?: Responsive<DimensionValue>
onDrop?: (DropEvent) => void
+ onDropActivate?: (DropActivateEvent) => void
onDropEnter?: (DropEnterEvent) => void
onDropExit?: (DropExitEvent) => void
onDropMove?: (DropMoveEvent) => void
order?: Responsive<number>
replaceMessage?: string
right?: Responsive<DimensionValue>
slot?: string | null
start?: Responsive<DimensionValue>
top?: Responsive<DimensionValue>
width?: Responsive<DimensionValue>
zIndex?: Responsive<number>
}@react-spectrum/s2/@react-spectrum/s2:DropZone DropZone {
UNSAFE_className?: UnsafeClassName
UNSAFE_style?: CSSProperties
aria-describedby?: string
aria-details?: string
aria-label?: string
aria-labelledby?: string
children: ReactNode
getDropOperation?: (DragTypes, Array<DropOperation>) => DropOperation
id?: string
isFilled?: boolean
onDrop?: (DropEvent) => void
+ onDropActivate?: (DropActivateEvent) => void
onDropEnter?: (DropEnterEvent) => void
onDropExit?: (DropExitEvent) => void
onDropMove?: (DropMoveEvent) => void
replaceMessage?: string
slot?: string | null
styles?: StylesPropWithHeight
}/@react-spectrum/s2:TreeView TreeView {
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>
id?: string
isDetached?: boolean
isEmphasized?: boolean
items?: Iterable<T>
+ keyboardDelegate?: KeyboardDelegate
onAction?: (Key) => void
onExpandedChange?: (Set<Key>) => any
onSelectionChange?: (Selection) => void
renderEmptyState?: (TreeEmptyStateRenderProps) => ReactNode
selectionMode?: SelectionMode
shouldSelectOnPressUp?: boolean
slot?: string | null
styles?: StylesPropWithHeight
}/@react-spectrum/s2:DropZoneProps DropZoneProps {
UNSAFE_className?: UnsafeClassName
UNSAFE_style?: CSSProperties
aria-describedby?: string
aria-details?: string
aria-label?: string
aria-labelledby?: string
children: ReactNode
getDropOperation?: (DragTypes, Array<DropOperation>) => DropOperation
id?: string
isFilled?: boolean
onDrop?: (DropEvent) => void
+ onDropActivate?: (DropActivateEvent) => void
onDropEnter?: (DropEnterEvent) => void
onDropExit?: (DropExitEvent) => void
onDropMove?: (DropMoveEvent) => void
replaceMessage?: string
slot?: string | null
styles?: StylesPropWithHeight
}/@react-spectrum/s2:TreeViewProps TreeViewProps {
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>
id?: string
isDetached?: boolean
isEmphasized?: boolean
items?: Iterable<T>
+ keyboardDelegate?: KeyboardDelegate
onAction?: (Key) => void
onExpandedChange?: (Set<Key>) => any
onSelectionChange?: (Selection) => void
renderEmptyState?: (TreeEmptyStateRenderProps) => ReactNode
selectionMode?: SelectionMode
shouldSelectOnPressUp?: boolean
slot?: string | null
styles?: StylesPropWithHeight
}@react-stately/dnd/@react-stately/dnd:DroppableCollectionStateOptions DroppableCollectionStateOptions {
acceptedDragTypes?: 'all' | Array<string | symbol> = 'all'
collection: Collection<Node<unknown>>
getDropOperation?: (DropTarget, DragTypes, Array<DropOperation>) => DropOperation
isDisabled?: boolean
onDrop?: (DroppableCollectionDropEvent) => void
onDropEnter?: (DroppableCollectionEnterEvent) => void
onDropExit?: (DroppableCollectionExitEvent) => void
onInsert?: (DroppableCollectionInsertDropEvent) => void
onItemDrop?: (DroppableCollectionOnItemDropEvent) => void
+ onMove?: (DroppableCollectionReorderEvent) => void
onReorder?: (DroppableCollectionReorderEvent) => void
onRootDrop?: (DroppableCollectionRootDropEvent) => void
selectionManager: MultipleSelectionManager
shouldAcceptItemDrop?: (ItemDropTarget, DragTypes) => boolean |
snowystinger
approved these changes
May 16, 2025
LFDanLu
approved these changes
May 16, 2025
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Updates the S2 migration guide and codemods to be up to date for the upcoming release including:
onLoadmoreandloadingStateare no longer commented outonLoadmoreandisLoadingare no longer commented outisPendingis no longer commented outonLoadmoreandloadingStatemove from TableBody to TableView✅ Pull Request Checklist:
📝 Test Instructions:
🧢 Your Project: