Add disabled prop to <DragOverlay>

Author: clauderic

.changeset/disabled-drag-overlay.md

@@ -0,0 +1,5 @@
+---
+'@dnd-kit/react': patch
+---
+
+**<DragOverlay>**: Added `disabled` prop to temporarily disable `<DragOverlay>` without unmounting it. The `disabled` prop accepts either a `boolean` or function that receives the `source` as input and returns a `boolean`, which can be useful to disable the `<DragOverlay>` based on the `type` or `data` of the `source`.

packages/react/src/core/draggable/DragOverlay.tsx

@@ -11,23 +11,27 @@ export interface Props<T extends Data, U extends Draggable<T>> {
   children: ReactNode | ((source: U) => ReactNode);
   style?: React.CSSProperties;
   tag?: string;
+  disabled?: boolean | ((source: U) => boolean);
 }
 
 export function DragOverlay<T extends Data, U extends Draggable<T>>({
   children,
   className,
   style,
   tag,
+  disabled,
 }: Props<T, U>) {
   const ref = useRef<HTMLDivElement | null>(null);
   const manager = useDragDropManager();
   const source = useComputed(
     () => manager?.dragOperation.source,
     [manager]
   ).value;
+  const isDisabled =
+    typeof disabled === 'function' ? disabled(source) : disabled;
 
   useEffect(() => {
-    if (!ref.current || !manager) return;
+    if (!ref.current || !manager || isDisabled) return;
 
     const feedback = manager.plugins.find(
       (plugin) => plugin instanceof Feedback
@@ -40,7 +44,7 @@ export function DragOverlay<T extends Data, U extends Draggable<T>>({
     return () => {
       feedback.overlay = undefined;
     };
-  }, [manager]);
+  }, [manager, isDisabled]);
 
   // Prevent children of the overlay from registering themselves as draggables or droppables
   const patchedManager = useMemo(() => {
@@ -79,7 +83,7 @@ export function DragOverlay<T extends Data, U extends Draggable<T>>({
   );
 
   function renderChildren() {
-    if (!source) return null;
+    if (!source || isDisabled) return null;
 
     if (typeof children === 'function') {
       return <Children source={source}>{children}</Children>;