diff --git a/packages/react-drag-drop/src/components/DragDrop/DragDropContainer.tsx b/packages/react-drag-drop/src/components/DragDrop/DragDropContainer.tsx index 9abfabbadd1..6e34564218a 100644 --- a/packages/react-drag-drop/src/components/DragDrop/DragDropContainer.tsx +++ b/packages/react-drag-drop/src/components/DragDrop/DragDropContainer.tsx @@ -111,7 +111,7 @@ export const DragDropContainer: React.FunctionComponent const collisionDetectionStrategy: CollisionDetection = useCallback( (args) => { - if (activeId && activeId in items) { + if (activeId != null && activeId in items) { return closestCenter({ ...args, droppableContainers: args.droppableContainers.filter((container) => container.id in items) @@ -144,7 +144,7 @@ export const DragDropContainer: React.FunctionComponent if (hasRecentlyMovedContainer.current) { lastOverId.current = activeId; } - return lastOverId.current ? [{ id: lastOverId.current }] : []; + return lastOverId.current != null ? [{ id: lastOverId.current }] : []; }, [activeId, items] ); @@ -168,7 +168,7 @@ export const DragDropContainer: React.FunctionComponent const { id: activeId } = active; const { id: overId } = over; - if (!overId || activeId in items) { + if (overId == null || activeId in items) { return; } @@ -240,7 +240,7 @@ export const DragDropContainer: React.FunctionComponent }; const getDragOverlay = () => { - if (!activeId) { + if (activeId == null) { return; } const item = findItem(activeId, findContainer(activeId)); @@ -290,7 +290,7 @@ export const DragDropContainer: React.FunctionComponent ); }; - const dragOverlay = {activeId && getDragOverlay()}; + const dragOverlay = {activeId != null && getDragOverlay()}; const portalTarget = typeof appendTo === 'function' ? appendTo() : appendTo || document.body; diff --git a/packages/react-drag-drop/src/components/DragDrop/Draggable.tsx b/packages/react-drag-drop/src/components/DragDrop/Draggable.tsx index 71b2bcf2c98..ed9da5ca880 100644 --- a/packages/react-drag-drop/src/components/DragDrop/Draggable.tsx +++ b/packages/react-drag-drop/src/components/DragDrop/Draggable.tsx @@ -13,6 +13,8 @@ export interface DraggableProps extends React.HTMLProps { id?: string; /** Flag indicating the draggable element should include a drag button. */ useDragButton?: boolean; + /** Accessible name of the drag button. */ + dragButtonAriaLabel?: string; } export const Draggable: React.FunctionComponent = ({ @@ -20,6 +22,7 @@ export const Draggable: React.FunctionComponent = ({ id, className, useDragButton = false, + dragButtonAriaLabel, ...props }: DraggableProps) => { const { attributes, listeners, setNodeRef, transform, transition, isDragging } = useSortable({ @@ -38,7 +41,7 @@ export const Draggable: React.FunctionComponent = ({ style={style} {...props} > - + {children} ) : (