playbook_ui 15.5.0 → 15.6.0.pre.alpha.draggableask12906

data/app/pb_kits/playbook/pb_draggable/context/index.tsx

@@ -1,4 +1,4 @@
-import React, { createContext, useReducer, useContext, useEffect, useMemo } from "react";
+import React, { createContext, useReducer, useContext, useEffect, useMemo, useRef } from "react";
 import { InitialStateType, ActionType, DraggableProviderType } from "./types";
 
 const initialState: InitialStateType = {
@@ -39,6 +39,72 @@ const reducer = (state: InitialStateType, action: ActionType) => {
 
       return { ...state, items: newItems };
     }
+
+    // Used only when enableCrossContainerPreview is true
+    case "REORDER_ITEMS_CROSS_CONTAINER": {
+      const { dragId, targetId, newContainer } = action.payload;
+      const newItems = [...state.items];
+      const draggedItem = newItems.find((item) => item && item.id === dragId);
+
+      if (!draggedItem) return state;
+
+      const draggedIndex = newItems.indexOf(draggedItem);
+      const targetIndex = newItems.findIndex(
+        (item) => item && item.id === targetId
+      );
+
+      if (draggedIndex === -1 || targetIndex === -1) return state;
+
+      const updatedItem = { ...draggedItem, container: newContainer };
+      newItems.splice(draggedIndex, 1);
+      newItems.splice(targetIndex, 0, updatedItem);
+
+      return { ...state, items: newItems };
+    }
+
+    // Used only when enableCrossContainerPreview is true
+    case "MOVE_TO_CONTAINER_END": {
+      const { dragId, newContainer } = action.payload;
+      const newItems = [...state.items];
+      const draggedItem = newItems.find((item) => item && item.id === dragId);
+
+      if (!draggedItem) return state;
+
+      const draggedIndex = newItems.indexOf(draggedItem);
+      if (draggedIndex === -1) return state;
+
+      const updatedItem = { ...draggedItem, container: newContainer };
+
+      // Remove from current position
+      newItems.splice(draggedIndex, 1);
+
+      // Insert at end of target container
+      const lastIndexInContainer = newItems
+        .map((item) => item && item.container)
+        .lastIndexOf(newContainer);
+
+      if (lastIndexInContainer === -1) {
+        newItems.push(updatedItem);
+      } else {
+        newItems.splice(lastIndexInContainer + 1, 0, updatedItem);
+      }
+
+      return { ...state, items: newItems };
+    }
+
+    // Reset item back to its original container (e.g., when drag ends without valid drop)
+    case "RESET_DRAG_CONTAINER": {
+      const { itemId, originalContainer } = action.payload;
+      return {
+        ...state,
+        items: state.items.map(item =>
+          item.id === itemId
+            ? { ...item, container: originalContainer }
+            : item
+        )
+      };
+    }
+
     default:
       return state;
   }
@@ -61,9 +127,32 @@ export const DraggableProvider = ({
   onDrop,
   onDragOver,
   dropZone = { type: 'ghost', color: 'neutral', direction: 'vertical' },
-  providerId = 'default', // fallback provided for backward compatibility, so this does not become a required prop
+  providerId = 'default', // fallback provided for backward compatibility
+  // Opt-in flag for cross-container preview
+  enableCrossContainerPreview = false,
 }: DraggableProviderType) => {
   const [state, dispatch] = useReducer(reducer, initialState);
+  
+  // Track drag state for global listener
+  const dragStateRef = useRef<{
+    isDragging: boolean;
+    draggedItemId: string;
+    originalContainer: string;
+    currentContainer: string;
+    dropOccurred: boolean;
+  }>({
+    isDragging: false,
+    draggedItemId: '',
+    originalContainer: '',
+    currentContainer: '',
+    dropOccurred: false,
+  });
+
+  // Track current state for use in gated event listeners (avoid stale closures)
+  const stateRef = useRef(state);
+  useEffect(() => {
+    stateRef.current = state;
+  }, [state]);
 
   // Parse dropZone prop - handle both string format (backward compatibility) and object format
   let dropZoneType = 'ghost';
@@ -93,7 +182,168 @@ export const DraggableProvider = ({
     onReorder(state.items);
   }, [state.items]);
 
+  // Monitor for failed drops by detecting mouse/pointer release during drag (this is needed for cross container preview)
+  useEffect(() => {
+    if (!enableCrossContainerPreview) return;
+
+    // Allow drops anywhere on the document by preventing default dragover
+    const handleGlobalDragOver = (e: DragEvent) => {
+      if (dragStateRef.current.isDragging) {
+        e.preventDefault();
+      }
+    };
+
+    // Handle drops anywhere on the document (including non-container areas)
+    const handleGlobalDrop = (e: DragEvent) => {
+      if (!dragStateRef.current.isDragging) return;
+      
+      // If a container already handled the drop, don't process again
+      if (dragStateRef.current.dropOccurred) return;
+      
+      e.preventDefault();
+      
+      // If we reach here, it means the drop was NOT on a valid container
+      // (otherwise the container's handleDrop would have set dropOccurred = true)
+      // So we should ALWAYS reset to original container for invalid drops
+      const originalContainer = dragStateRef.current.originalContainer;
+      
+      dispatch({
+        type: 'RESET_DRAG_CONTAINER',
+        payload: {
+          itemId: dragStateRef.current.draggedItemId,
+          originalContainer: originalContainer,
+        },
+      });
+      
+      dispatch({ type: 'SET_IS_DRAGGING', payload: "" });
+      dispatch({ type: 'SET_ACTIVE_CONTAINER', payload: "" });
+      dispatch({ type: 'SET_DRAG_DATA', payload: { id: "", initialGroup: "", originId: "" } });
+      
+      // Clear drag state
+      dragStateRef.current = {
+        isDragging: false,
+        draggedItemId: '',
+        originalContainer: '',
+        currentContainer: '',
+        dropOccurred: false,
+      };
+    };
+
+    const handleGlobalMouseUp = () => {
+      // If we're dragging and mouse is released, wait a bit to see if drop occurs
+      if (dragStateRef.current.isDragging) {
+        setTimeout(() => {
+          const currentContainer = dragStateRef.current.currentContainer;
+          
+          // If drop still hasn't occurred, check if item is in a different container
+          if (dragStateRef.current.isDragging && !dragStateRef.current.dropOccurred) {
+            // If item is in a different container than original, treat it as a successful drop
+            if (currentContainer && currentContainer !== dragStateRef.current.originalContainer) {
+              // Trigger onDrop callback with the current container
+              if (onDrop) {
+                const draggedItem = stateRef.current.items.find(item => item && item.id === dragStateRef.current.draggedItemId);
+                const updatedItem = draggedItem ? { ...draggedItem, container: currentContainer } : null;
+                const itemsInContainer = stateRef.current.items.filter(item => item && item.container === currentContainer);
+                const indexInContainer = itemsInContainer.findIndex(item => item && item.id === dragStateRef.current.draggedItemId);
+                const itemAbove = indexInContainer > 0 ? itemsInContainer[indexInContainer - 1] : null;
+                const itemBelow = indexInContainer < itemsInContainer.length - 1 ? itemsInContainer[indexInContainer + 1] : null;
+                
+                onDrop(
+                  dragStateRef.current.draggedItemId,
+                  currentContainer,
+                  dragStateRef.current.originalContainer,
+                  updatedItem,
+                  itemAbove,
+                  itemBelow
+                );
+              }
+            } else {
+              dispatch({
+                type: 'RESET_DRAG_CONTAINER',
+                payload: {
+                  itemId: dragStateRef.current.draggedItemId,
+                  originalContainer: dragStateRef.current.originalContainer,
+                },
+              });
+            }
+            dispatch({ type: 'SET_IS_DRAGGING', payload: "" });
+            dispatch({ type: 'SET_ACTIVE_CONTAINER', payload: "" });
+            dispatch({ type: 'SET_DRAG_DATA', payload: { id: "", initialGroup: "", originId: "" } });
+            
+            // Clear drag state
+            dragStateRef.current = {
+              isDragging: false,
+              draggedItemId: '',
+              originalContainer: '',
+              currentContainer: '',
+              dropOccurred: false,
+            };
+          }
+        }, 50); // Small delay to let drop event fire if it's going to
+      }
+    };
+
+    document.addEventListener('dragover', handleGlobalDragOver);
+    document.addEventListener('drop', handleGlobalDrop);
+    document.addEventListener('mouseup', handleGlobalMouseUp);
+    document.addEventListener('pointerup', handleGlobalMouseUp);
+    
+    return () => {
+      document.removeEventListener('dragover', handleGlobalDragOver);
+      document.removeEventListener('drop', handleGlobalDrop);
+      document.removeEventListener('mouseup', handleGlobalMouseUp);
+      document.removeEventListener('pointerup', handleGlobalMouseUp);
+    };
+  }, [enableCrossContainerPreview]);
+
+  // Detect when dragging stops (isDragging goes from truthy to empty)
+  const prevIsDraggingRef = useRef(state.isDragging);
+  
+  useEffect(() => {
+    if (!enableCrossContainerPreview) return;
+
+    const wasDragging = prevIsDraggingRef.current;
+    const isNowDragging = state.isDragging;
+
+    // Drag just ended (was dragging, now not)
+    if (wasDragging && !isNowDragging) {
+      
+      // If drop didn't occur, reset to original container
+      if (!dragStateRef.current.dropOccurred && dragStateRef.current.draggedItemId) {
+        dispatch({
+          type: 'RESET_DRAG_CONTAINER',
+          payload: {
+            itemId: dragStateRef.current.draggedItemId,
+            originalContainer: dragStateRef.current.originalContainer,
+          },
+        });
+      }
+      
+      // Clear drag state
+      dragStateRef.current = {
+        isDragging: false,
+        draggedItemId: '',
+        originalContainer: '',
+        currentContainer: '',
+        dropOccurred: false,
+      };
+    }
+    
+    prevIsDraggingRef.current = isNowDragging;
+  }, [state.isDragging, enableCrossContainerPreview]);
+
   const handleDragStart = (id: string, container: string) => {
+    // Track drag in ref for global listener
+    if (enableCrossContainerPreview) {
+      dragStateRef.current = {
+        isDragging: true,
+        draggedItemId: id,
+        originalContainer: container,
+        currentContainer: container,
+        dropOccurred: false,
+      };
+    }
+    
     dispatch({ type: 'SET_DRAG_DATA', payload: { id: id, initialGroup: container, originId: providerId } });
     dispatch({ type: 'SET_IS_DRAGGING', payload: id });
     if (onDragStart) onDragStart(id, container);
@@ -103,17 +353,93 @@ export const DraggableProvider = ({
     if (state.dragData.originId !== providerId) return; // Ignore drag events from other providers
 
     if (state.dragData.id !== id) {
-      dispatch({ type: 'REORDER_ITEMS', payload: { dragId: state.dragData.id, targetId: id } });
-      dispatch({ type: 'SET_DRAG_DATA', payload: { id: state.dragData.id, initialGroup: container, originId: providerId } });
+      if (enableCrossContainerPreview) {
+        // Used only when enableCrossContainerPreview is true
+        const draggedItem = state.items.find(
+          (item) => item && item.id === state.dragData.id
+        );
+        const currentContainer =
+          draggedItem && draggedItem.container
+            ? draggedItem.container
+            : state.dragData.initialGroup;
+
+        const isCrossContainer =
+          currentContainer !== container &&
+          (currentContainer !== undefined || container !== undefined);
+
+        if (isCrossContainer) {
+          dispatch({
+            type: "REORDER_ITEMS_CROSS_CONTAINER",
+            payload: {
+              dragId: state.dragData.id,
+              targetId: id,
+              newContainer: container,
+            },
+          });
+          // Update current container in ref
+          if (enableCrossContainerPreview) {
+            dragStateRef.current.currentContainer = container;
+          }
+        } else {
+          // Same container: keep original behavior
+          dispatch({
+            type: "REORDER_ITEMS",
+            payload: { dragId: state.dragData.id, targetId: id },
+          });
+        }
+      } else {
+        // Original behavior (no preview across containers)
+        dispatch({type: "REORDER_ITEMS", payload: { dragId: state.dragData.id, targetId: id }});
+      }
+
+      // When enableCrossContainerPreview is true, preserve the original initialGroup
+      // Otherwise, update it to track the current container
+      const newInitialGroup = enableCrossContainerPreview ? state.dragData.initialGroup : container;
+      dispatch({type: "SET_DRAG_DATA",payload: {id: state.dragData.id, initialGroup: newInitialGroup, originId: providerId}});
     }
     if (onDragEnter) onDragEnter(id, container);
   };
 
   const handleDragEnd = () => {
+    const draggedItemId = state.dragData.id;
+    const originalContainer = state.dragData.initialGroup;
+    
+    // If enableCrossContainerPreview is true and no drop occurred, reset item to original container
+    if (enableCrossContainerPreview && !dragStateRef.current.dropOccurred && draggedItemId && originalContainer) {
+      dispatch({ type: 'RESET_DRAG_CONTAINER', payload: { itemId: draggedItemId, originalContainer } });
+    }
+    
     dispatch({ type: 'SET_IS_DRAGGING', payload: "" });
     dispatch({ type: 'SET_ACTIVE_CONTAINER', payload: "" });
     dispatch({ type: 'SET_DRAG_DATA', payload: { id: "", initialGroup: "", originId: "" } });
-    if (onDragEnd) onDragEnd();
+    
+    // Only call onDragEnd if drop didn't already occur (for enableCrossContainerPreview)
+    // If drop occurred, handleDrop or global drop handler already called onDragEnd
+    if (enableCrossContainerPreview && dragStateRef.current.dropOccurred) {
+      return;
+    }
+    
+    if (onDragEnd) {
+      if (!enableCrossContainerPreview) {
+        onDragEnd();
+      } else {
+        const draggedItem = stateRef.current.items.find(item => item && item.id === draggedItemId);
+        const finalContainer = draggedItem ? draggedItem.container : originalContainer;
+        
+        const itemsInContainer = stateRef.current.items.filter(item => item && item.container === finalContainer);
+        const indexInContainer = itemsInContainer.findIndex(item => item && item.id === draggedItemId);
+        const itemAbove = indexInContainer > 0 ? itemsInContainer[indexInContainer - 1] : null;
+        const itemBelow = indexInContainer < itemsInContainer.length - 1 ? itemsInContainer[indexInContainer + 1] : null;
+        
+        onDragEnd(
+          draggedItemId,
+          finalContainer,
+          originalContainer,
+          itemAbove,
+          itemBelow
+        );
+      }
+    }
   };
 
   const changeCategory = (itemId: string, container: string) => {
@@ -123,10 +449,60 @@ export const DraggableProvider = ({
   const handleDrop = (container: string) => {
     if (state.dragData.originId !== providerId) return; // Ignore drop events from other providers
 
+    const draggedItemId = state.dragData.id;
+    const originalContainer = state.dragData.initialGroup;
+    
+    // Mark drop as successful in ref for global listener
+    if (enableCrossContainerPreview) {
+      dragStateRef.current.dropOccurred = true;
+    }
+
+    // Gather data for callbacks BEFORE clearing state
+    const isCrossContainer = container !== originalContainer;
+    let callbackData = null;
+    
+    if (enableCrossContainerPreview) {
+      const draggedItem = stateRef.current.items.find(item => item && item.id === draggedItemId);
+      const updatedItem = draggedItem ? { ...draggedItem, container } : null;
+      const itemsInContainer = stateRef.current.items.filter(item => item && item.container === container);
+      const indexInContainer = itemsInContainer.findIndex(item => item && item.id === draggedItemId);
+      const itemAbove = indexInContainer > 0 ? itemsInContainer[indexInContainer - 1] : null;
+      const itemBelow = indexInContainer < itemsInContainer.length - 1 ? itemsInContainer[indexInContainer + 1] : null;
+      
+      callbackData = { updatedItem, itemAbove, itemBelow };
+    }
+
     dispatch({ type: 'SET_IS_DRAGGING', payload: "" });
     dispatch({ type: 'SET_ACTIVE_CONTAINER', payload: "" });
+    dispatch({ type: 'SET_DRAG_DATA', payload: { id: "", initialGroup: "", originId: "" } });
     changeCategory(state.dragData.id, container);
-    if (onDrop) onDrop(container);
+    
+    if (onDrop) {
+      if (!enableCrossContainerPreview) {
+        onDrop(container);
+      } else {
+        onDrop(
+          draggedItemId,
+          container,
+          originalContainer,
+          callbackData.updatedItem,
+          callbackData.itemAbove,
+          callbackData.itemBelow
+        );
+      }
+    }
+    
+    // Trigger onDragEnd ONLY for cross-container drops (dragend doesn't fire reliably in that case)
+    // For same-container drops, handleDragEnd will be called normally
+    if (enableCrossContainerPreview && isCrossContainer && onDragEnd && callbackData) {
+      onDragEnd(
+        draggedItemId,
+        container,
+        originalContainer,
+        callbackData.itemAbove,
+        callbackData.itemBelow
+      );
+    }
   };
 
   const handleDragOver = (e: Event, container: string) => {
@@ -134,6 +510,22 @@ export const DraggableProvider = ({
 
     e.preventDefault();
     dispatch({ type: 'SET_ACTIVE_CONTAINER', payload: container });
+
+    if (enableCrossContainerPreview && state.dragData.id) {
+      // Only when enableCrossContainerPreview is true: when hovering over a different container, move item to end
+      const draggedItem = state.items.find(
+        (item) => item && item.id === state.dragData.id
+      );
+      if (draggedItem && draggedItem.container !== container) {
+        dispatch({
+          type: "MOVE_TO_CONTAINER_END",
+          payload: { dragId: state.dragData.id, newContainer: container },
+        });
+        // Update current container in ref
+        dragStateRef.current.currentContainer = container;
+      }
+    }
+
     if (onDragOver) onDragOver(e, container);
   };
 
@@ -157,4 +549,4 @@ export const DraggableProvider = ({
   return (
     <DragContext.Provider value={contextValue}>{children}</DragContext.Provider>
   );
-};
+};

data/app/pb_kits/playbook/pb_draggable/context/types.ts

@@ -18,8 +18,12 @@ export type ActionType =
 } }
   | { type: 'SET_IS_DRAGGING'; payload: string }
   | { type: 'SET_ACTIVE_CONTAINER'; payload: string }
+  | { type: 'SET_CROSS_CONTAINER_PREVIEW'; payload: boolean }
   | { type: 'CHANGE_CATEGORY'; payload: { itemId: string; container: string } }
-  | { type: 'REORDER_ITEMS'; payload: { dragId: string; targetId: string } };
+  | { type: 'REORDER_ITEMS'; payload: { dragId: string; targetId: string } }
+  | { type: 'REORDER_ITEMS_CROSS_CONTAINER'; payload: { dragId: string; targetId: string; newContainer: string } }
+  | { type: 'MOVE_TO_CONTAINER_END'; payload: { dragId: string; newContainer: string } }
+  | { type: 'RESET_DRAG_CONTAINER'; payload: { itemId: string; originalContainer: string } };
 
   export interface DropZoneConfig {
     type?: 'ghost' | 'outline' | 'shadow' | 'line';
@@ -33,9 +37,10 @@ export type ActionType =
     onReorder: (items: ItemType[]) => void;
     onDragStart?: (id: string, container: string) => void;
     onDragEnter?: (id: string, container: string) => void;
-    onDragEnd?: () => void;
-    onDrop?: (container: string) => void;
+    onDragEnd?: (...args: any[]) => void;
+    onDrop?: (...args: any[]) => void;
     onDragOver?: (e: Event, container: string) => void;
     dropZone?: DropZoneConfig | string; // Can accept string for backward compatibility
     providerId?: string;
+    enableCrossContainerPreview?: boolean;
   }

data/app/pb_kits/playbook/pb_draggable/docs/_draggable_multiple_containers_dropzone.jsx

@@ -0,0 +1,180 @@
+import React, { useState } from "react";
+
+import Flex from '../../pb_flex/_flex'
+import Draggable from '../../pb_draggable/_draggable'
+import { DraggableProvider } from '../../pb_draggable/context'
+import Badge from '../../pb_badge/_badge'
+import Title from '../../pb_title/_title'
+import Caption from '../../pb_caption/_caption'
+import Card from '../../pb_card/_card'
+import FlexItem from '../../pb_flex/_flex_item'
+import Avatar from '../../pb_avatar/_avatar'
+import Body from '../../pb_body/_body'
+
+// Initial groups to drag between
+const containers = ["To Do", "In Progress", "Done"];
+
+// Initial items to be dragged
+const data = [
+  {
+    id: "11",
+    container: "To Do",
+    title: "Task 1",
+    description: "Bug fixes",
+    assignee_name: "Terry Miles",
+    assignee_img: "https://randomuser.me/api/portraits/men/44.jpg",
+  },
+  {
+    id: "12",
+    container: "To Do",
+    title: "Task 2",
+    description: "Documentation",
+    assignee_name: "Sophia Miles",
+    assignee_img: "https://randomuser.me/api/portraits/women/8.jpg",
+  },
+  {
+    id: "13",
+    container: "In Progress",
+    title: "Task 3",
+    description: "Add a variant",
+    assignee_name: "Alice Jones",
+    assignee_img: "https://randomuser.me/api/portraits/women/10.jpg",
+  },
+  {
+    id: "14",
+    container: "To Do",
+    title: "Task 4",
+    description: "Add jest tests",
+    assignee_name: "Mike James",
+    assignee_img: "https://randomuser.me/api/portraits/men/8.jpg",
+  },
+  {
+    id: "15",
+    container: "Done",
+    title: "Task 5",
+    description: "Alpha testing",
+    assignee_name: "James Guy",
+    assignee_img: "https://randomuser.me/api/portraits/men/18.jpg",
+  },
+  {
+    id: "16",
+    container: "In Progress",
+    title: "Task 6",
+    description: "Release",
+    assignee_name: "Sally Jones",
+    assignee_img: "https://randomuser.me/api/portraits/women/28.jpg",
+  },
+];
+
+const DraggableMultipleContainersDropzone = (props) => {
+  const [initialState, setInitialState] = useState(data);
+
+  const badgeProperties = (container) => {
+    switch (container) {
+      case "To Do":
+        return { text: "queue", color: "warning" };
+      case "In Progress":
+        return { text: "progress", color: "primary" };
+      default:
+        return { text: "done", color: "success" };
+    }
+  };
+
+  return (
+    <DraggableProvider 
+        dropZone={{type: "outline"}}
+        enableCrossContainerPreview
+        initialItems={data}
+        onDragEnd={(draggedItemId, finalContainer, originalContainer, itemAbove, itemBelow) => {
+          console.log(`Dragged Item ID: ${draggedItemId}`);
+          console.log(`Final Container: ${finalContainer}`);
+          console.log(`Original Container: ${originalContainer}`);
+          console.log('Item Above:', itemAbove);
+          console.log('Item Below:', itemBelow);
+        }}
+        onDrop={(draggedItemId, droppedContainer, originalContainer, item, itemAbove, itemBelow) => {
+          console.log(`Dragged Item ID: ${draggedItemId}`);
+          console.log(`Dropped Container: ${droppedContainer}`);
+          console.log(`Original Container: ${originalContainer}`);
+          console.log('Dropped Item:', item);
+          console.log('Item Above:', itemAbove);
+          console.log('Item Below:', itemBelow);
+        }}
+        onReorder={(items) => setInitialState(items)}
+    >
+      <Flex
+          justifyContent="center"
+          {...props}
+      >
+          {containers?.map((container) => (
+            <Draggable.Container 
+                container={container}
+                htmlOptions={{style:{ width: "200px", height: "70vh"}}}
+                key={container} 
+                padding="sm"
+            >
+                <Caption textAlign="center">{container}</Caption>
+                <Flex 
+                    alignItems="stretch"
+                    gap="sm"
+                    orientation="column" 
+                >
+                  {initialState
+                    .filter((item) => item.container === container)
+                    .map(
+                      ({
+                        assignee_img,
+                        assignee_name,
+                        description,
+                        id,
+                        title,
+                      }) => (
+                        <Draggable.Item 
+                            container={container}
+                            dragId={id} 
+                            key={id}
+                        >
+                          <Card
+                              padding="sm"
+                              {...props}
+                          >
+                            <Flex justify="between">
+                              <FlexItem>
+                                <Flex>
+                                  <Avatar
+                                      imageUrl={assignee_img}
+                                      name={assignee_name}
+                                      size="xxs"
+                                  />
+                                  <Title paddingLeft="xs" 
+                                      size={4}
+                                      text={title}
+                                      {...props}
+                                  />
+                                </Flex>
+                              </FlexItem>
+                              <Badge
+                                  marginLeft="sm"
+                                  rounded
+                                  text={badgeProperties(container).text}
+                                  variant={badgeProperties(container).color}
+                                  {...props}
+                              />
+                            </Flex>
+                            <Body paddingTop="xs"
+                                text={description} 
+                                {...props}
+                            />
+                          </Card>
+                        </Draggable.Item>
+                      )
+                    )}
+                </Flex>
+            </Draggable.Container>
+          ))}
+      </Flex>
+    </DraggableProvider>
+  );
+};
+
+export default DraggableMultipleContainersDropzone;