Add conditional DnD support to Table component
Closes https://github.com/adobe/react-spectrum/issues/5609
โ Pull Request Checklist:
- [x] Included link to corresponding React Spectrum GitHub Issue.
- [x] Added/updated unit tests and storybook for this change (for new code or code which already has tests).
- [x] Filled out test instructions.
- [ ] Updated documentation (if it already exists for this component).
- [ ] Looked at the Accessibility Practices for this feature - Aria Practices
๐ Test Instructions:
- Go to http://localhost:9003/?path=/story/react-aria-components--dnd-table-example&args=isDisabledFirstTable:true;isDisabledSecondTable:true&providerSwitcher-express=false&strict=true
- Open the Controls tab in Storybook and set isDisabledFirstTable to true.
- Verify that the table on the left side cannot perform drag and drop actions.
๐งข Your Project:
GET_BUILD
Build successful! ๐
GET_BUILD
Build successful! ๐
GET_BUILD
Build successful! ๐
## API Changes
unknown top level export { type: 'any' } unknown top level export { type: 'any' } unknown top level export { type: 'any' } unknown top level export { type: 'any' } unknown top level export { type: 'any', access: 'private' } unknown top level export { type: 'any', access: 'private' } unknown top level export { type: 'any' } unknown top level export { type: 'any' } unknown top level export { type: 'any' } unknown top level export { type: 'any' } unknown top level export { type: 'any' } unknown top level export { type: 'any' } unknown top level export { type: 'identifier', name: 'Column' } unknown top level export { type: 'identifier', name: 'Column' } unknown type { type: 'link' } unknown type { type: 'link' } unknown type { type: 'link' } unknown type { type: 'link' } unknown type { type: 'link' } unknown type { type: 'link' } unknown top level export { type: 'any' } unknown top level export { type: 'any' } unknown top level export { type: 'any' } unknown top level export { type: 'any' } unknown top level export { type: 'any' } unknown top level export { type: 'any' }
@react-stately/dnd
DraggableCollectionStateOptions
DraggableCollectionStateOptions {
collection: Collection<Node<unknown>>
+ isDisabled?: boolean
selectionManager: MultipleSelectionManager
}
it changed:
- useDraggableCollectionState
DraggableCollectionState
DraggableCollectionState {
collection: Collection<Node<unknown>>
draggedKey: Key | null
draggingKeys: Set<Key>
endDrag: (DraggableCollectionEndEvent) => void
getAllowedDropOperations?: () => Array<DropOperation>
getItems: (Key) => Array<DragItem>
getKeysForDrag: (Key) => Set<Key>
+ isDisabled?: boolean
isDragging: (Key) => boolean
moveDrag: (DragMoveEvent) => void
preview?: RefObject<DragPreviewRenderer>
selectionManager: MultipleSelectionManager
}
it changed:
- useDraggableCollectionState
DroppableCollectionStateOptions
DroppableCollectionStateOptions {
collection: Collection<Node<unknown>>
+ isDisabled?: boolean
selectionManager: MultipleSelectionManager
}
it changed:
- useDroppableCollectionState
DroppableCollectionState
DroppableCollectionState {
collection: Collection<Node<unknown>>
getDropOperation: (DropOperationEvent) => DropOperation
+ isDisabled?: boolean
isDropTarget: (DropTarget) => boolean
selectionManager: MultipleSelectionManager
setTarget: (DropTarget) => void
target: DropTarget | null
it changed:
- useDroppableCollectionState