Skip to main content

DragnDrop (DnDBoard)

Status: No dedicated documentation exists in design-system-docs (checked main + all open PRs, verified 2026-08-19). This is a factual scaffold, not real guidance — every qualitative section below is an explicit placeholder for a human writer. Nothing has been invented.

Source: DTSL/design-system → packages/product/organisms/dragnDrop/src/DnDBoard.tsx (package @dtsl/naos-drag-n-drop, main export DnDBoard)

Props (verbatim from source)​

interface DnDBoardProps {
	style?: React.CSSProperties
	className?: string
	data?: BoardData
	boardId?: InstanceId
	nonGrabbables?: NonGrabbablesRef
	onColumnDrop?: (result: DropResult) => void
	onCardDrop?: (result: DropResult) => void
	isVirtualized?: boolean
	virtualizationOptions?: Record<string, unknown>
	showGhost?: boolean
	showGrabHandle?: boolean
	showDropIndicator?: boolean
	grabHandleDirection?: GrabHandleDirection
	[key: string]: unknown
}

Board/column/card kanban-style drag-and-drop, with nonGrabbables for locking specific items and isVirtualized/virtualizationOptions for large boards.

When to Use​

TODO — no existing UX/product guidance found in source, Storybook, or docs. Needs input from design/PM.

When NOT to Use​

TODO — needs UX/product input.

Decision Logic​

TODO — needs UX/product input on showGrabHandle/grabHandleDirection/showDropIndicator configuration choices.

Accessibility​

TODO — needs UX/product input. Drag-and-drop interfaces typically need a genuine keyboard-operable fallback — needs verification against the actual implementation, not assumed here.

Common Mistakes​

TODO — needs UX/product input.