* Refactor DnDList to use unique droppable IDs, fixed the top and left position of the draggable element.

* Added fallback IDs to page layout element which should only exist once in the DOM

Author: marcus-wishes

library/src/components/dnd/DnDList.tsx

@@ -43,17 +43,19 @@ export function DnDList<T>({
 			} box-border border`}
 		>
 			<DragDropContext onDragEnd={onDragEnd}>
-				<Droppable droppableId="droppable">
-					{(provided) => (
-						<div
-							{...provided.droppableProps}
-							ref={provided.innerRef}
-							className="flex flex-col w-full"
-						>
-							{children}
-							{provided.placeholder}
-						</div>
-					)}
+				<Droppable droppableId={`droppable-${crypto.randomUUID()}`}>
+					{(provided) => {
+						return (
+							<div
+								{...provided.droppableProps}
+								ref={provided.innerRef}
+								className="flex flex-col w-full"
+							>
+								{children}
+								{provided.placeholder}
+							</div>
+						)
+					}}
 				</Droppable>
 			</DragDropContext>
 		</div>

library/src/components/dnd/DragItem.tsx

@@ -12,6 +12,20 @@ export type DragItemProps = {
 	style?: React.CSSProperties
 }
 
+function findClosestScrollContainer(element: HTMLElement | null) {
+	if (!element) {
+		return null
+	}
+	let parent = element.parentElement
+	while (parent) {
+		if (parent.scrollHeight > parent.clientHeight) {
+			return parent
+		}
+		parent = parent.parentElement
+	}
+	return null
+}
+
 export function DragItem({
 	draggableId,
 	index,
@@ -20,16 +34,22 @@ export function DragItem({
 	style,
 	thin = false,
 }: DragItemProps) {
-	const draggableRef = React.useRef(null)
+	const draggableRef = React.useRef<HTMLDivElement>(null)
 	return (
 		<Draggable draggableId={draggableId} index={index}>
 			{({ innerRef, draggableProps, dragHandleProps }) => {
 				// offset bug workaround:  https://github.com/atlassian/react-beautiful-dnd/issues/1881
+
+				const draggableRect =
+					draggableRef.current?.getBoundingClientRect()
+				const draggableTop = draggableRect?.top ?? 0
+				const draggableLeft = draggableRect?.left ?? 0
+
 				const dragStyle = {
 					...style,
 					...draggableProps.style,
-					top: "auto",
-					left: "auto",
+					top: `${draggableTop}px`,
+					left: `${draggableLeft}px`,
 				}
 				//
 				return (

library/src/layouting/PageLayout.tsx

@@ -72,7 +72,7 @@ const PageHeaderTitle = ({
 	return (
 		<div
 			className={twMerge("mb-2 flex items-center px-8", className)}
-			id={id}
+			id={id ?? "page-header-title"}
 			style={style}
 			data-testid={testId}
 		>
@@ -154,7 +154,7 @@ const PageBody = ({
 			className,
 		)}
 		style={style}
-		id={id}
+		id={id ?? "page-body"}
 		data-testid={testId}
 	>
 		{children}
@@ -179,7 +179,7 @@ const PageBodyContent = ({
 			"min-h-0 flex-1 overflow-y-auto px-6 py-3",
 			className,
 		)}
-		id={id}
+		id={id ?? "page-body-content"}
 		style={style}
 		data-testid={testId}
 	>
@@ -205,7 +205,7 @@ const PageBodyHeader = ({
 			"bg-surface-raised shadow-overflow z-0 px-8 py-1",
 			className,
 		)}
-		id={id}
+		id={id ?? "page-body-header"}
 		style={style}
 		data-testid={testId}
 	>
@@ -231,7 +231,7 @@ const PageBodyFooter = ({
 			"bg-surface-raised border-border shadow-strong z-0 flex justify-center border-t p-1.5",
 			className,
 		)}
-		id={id}
+		id={id ?? "page-body-footer"}
 		style={style}
 		data-testid={testId}
 	>

library/src/utils/getPortal.ts

@@ -1,6 +1,9 @@
 export const portalContainerID = "uikts-portal" as const
 
 export function getPortal(insidePortalContainerID: string) {
+	if (!portalContainerID) {
+		throw new Error("No portal container id provided")
+	}
 	let portalNode = document.getElementById(portalContainerID)
 	if (!portalNode) {
 		console.log("creating portal node with id:", portalContainerID)