packages/components/src/dnd/native/sortable-item.tsx (1)

352-356: Consider including setHasDragHandle in the dependency array for completeness.

While setHasDragHandle is a stable React setState function and won't cause issues, including it in the dependency array aligns with exhaustive-deps best practices and makes the intent clearer.

♻️ Suggested fix

 	const dragHandleContextValue = React.useMemo(
 		() => ({ panGesture, setHasDragHandle }),
-		[panGesture]
+		[panGesture, setHasDragHandle]
 	);

packages/components/src/dnd/web/sortable-item.tsx (1)

226-250: Prefer className over inline style for the cursor.
Inline styles violate the styling guideline and make theme handling harder.

♻️ Suggested refactor

 	return {
 		dragHandleRef,
 		dragHandleProps: {
-			style: { cursor: 'grab' },
+			className: 'cursor-grab',
 		},
 	};
 }
@@
 	return (
-		<div ref={dragHandleRef} className={className} style={dragHandleProps.style}>
+		<div
+			ref={dragHandleRef}
+			className={`${dragHandleProps.className ?? ''} ${className}`.trim()}
+		>
 			{children}
 		</div>
 	);
 }

As per coding guidelines, prefer className over inline styles.

packages/components/src/dnd/web/sortable-item.tsx (1)

73-75: **Drag handle changes after mount won't rebind the draggable.**The dragHandle option in draggable() is captured once when the effect runs. draggable is called during effect setup and returns a cleanup function. Since registerDragHandle only sets dragHandleRef.current without triggering the effect to re-run, dynamic handle registration (e.g., a DragHandle mounted after SortableItem) won't take effect.

Currently safe in the codebase (handles are statically rendered in columns-form.tsx), but this is fragile for dynamic scenarios.

🔧 Suggested fix: Trigger rebind when handle changes

+	// Track handle registration version to trigger rebind
+	const [handleVersion, setHandleVersion] = React.useState(0);
+
 	// Callback for drag handle registration
 	const registerDragHandle = React.useCallback((element: HTMLElement | null) => {
 		dragHandleRef.current = element;
+		// Trigger effect re-run when handle is registered/unregistered
+		setHandleVersion((v) => v + 1);
 	}, []);

 	// Setup drag and drop behavior - required to attach pragmatic-drag-and-drop to DOM
 	React.useEffect(() => {
 		// ... existing setup code ...
-	}, [id, listId, axis, disabled]);
+	}, [id, listId, axis, disabled, handleVersion]);

Also applies to: 84-98

packages/components/src/dnd/web/drop-indicator.tsx (1)

42-47: Consider semantic color for theme compatibility (optional).

The drop indicator uses hardcoded bg-blue-700 and border-blue-700. While this is likely intentional to ensure visibility (matching Atlaskit's original styling), consider using a semantic color class (e.g., bg-primary or a dedicated bg-drop-indicator) for better theme compatibility if the design system supports it.

This is a minor consideration since drop indicators often intentionally use a distinct, fixed color for consistent visibility.

packages/components/src/dnd/native/context.tsx (1)

85-98: Consider enhancing the useEffect comment to explain WHY it's necessary.

Per coding guidelines, useEffect comments should explain WHY it's necessary, not just what it does. The current comment describes the action but could clarify why an effect is required here (e.g., "useEffect required because shared values must be updated on UI thread in response to external prop changes, which cannot be done during render").

The implementation itself is sound—passing newPositions as an argument to scheduleOnUI rather than capturing it in the worklet closure is the correct approach.

packages/components/src/dnd/web/sortable-list.tsx (1)

41-116: Add a comment explaining WHY useEffect is necessary.

Per coding guidelines, when using useEffect, add a comment explaining why it is necessary. The effect synchronizes with an external system (monitorForElements), which is a valid use case, but the reasoning should be documented.

♻️ Suggested fix

-	React.useEffect(() => {
+	// Effect required: Subscribe to pragmatic-drag-and-drop monitor for cross-item drag events.
+	// This external subscription cannot be handled during render or via event handlers.
+	React.useEffect(() => {

packages/components/src/dnd/web/sortable-item.tsx (1)

239-253: Prefer className over inline style for the cursor.

Per coding guidelines, prefer className over inline styles to ensure proper theme switching and avoid CSS variable lag. The cursor: grab could be moved to a utility class.

♻️ Suggested fix

 export function DragHandle({
 	children,
 	className = '',
 }: {
 	children: React.ReactNode;
 	className?: string;
 }) {
 	const { dragHandleRef, dragHandleProps } = useDragHandle();

 	return (
-		<div ref={dragHandleRef} className={className} style={dragHandleProps.style}>
+		<div ref={dragHandleRef} className={`cursor-grab ${className}`}>
 			{children}
 		</div>
 	);
 }

And update useDragHandle to remove the style from dragHandleProps:

 	return {
 		dragHandleRef,
-		dragHandleProps: {
-			style: { cursor: 'grab' },
-		},
+		dragHandleProps: {},
 	};