Single-item GridList with DragAndDrop reorder caveats

[jgarplind]

Provide your feedback here.

We're using GridList with drag and drop for re-ordering. Depending on the dynamically sourced data, it happens that the GridList only contains one GridListItem.

When that happens, we would prefer not to have to render a <Button slot="drag">. However, this warning is emitted, causing us to reconsider:

react-spectrum/packages/react-aria-components/src/GridList.tsx

Lines 337 to 342 in d8161f6

	useEffect(() => {
	if (dragState && !dragButtonRef.current) {
	console.warn('Draggable items in a GridList must contain a <Button slot="drag"> element so that keyboard and screen reader users can drag them.');
	}
	// eslint-disable-next-line
	}, []);

I tried following the logic and found myself at

react-spectrum/packages/react-aria-components/src/useDragAndDrop.tsx

Line 114 in 69109f0

let isDraggable = !!getItems;

I could easily do (and tried) something like getItems: myList.length <= 1 ? undefined : regularLogic, and that worked fine, except, the behavior was not disabled. In other words, I could still reach the reordering state with keyboard interactions, I just couldn't see where the focus went when it would previously have gone to the drag handle.

In the end, combining isDisabled: myList.length <= 1 with the getItems-shenanigans from above seems to seal the deal, but it left me with a feeling of having battled rather than collaborated with the library.

I think there are a few different approaches here, and would be happy to learn which you think is most in line with how this library is intended to function:

1. Bypass this whole issue by conditionally rendering a GridList if there are 2+ items in the list, opting for other solutions otherwise.
2. Just accept that the drag handle is visible even when it has no functionality.
3. Do something like what was described above.

🔦 Context

We're just battling some warnings trying to write maintainable, user friendly code.

💻 Code Sample

No response

Version

react-aria-components 1.4.1

What browsers are you seeing the problem on?

No response

If other, please specify

No response

What operating system are you using?

No response