playbook_ui 15.6.0.pre.alpha.play266013023 → 15.6.0.pre.rc.0

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

@@ -1,4 +1,4 @@
-import React, { createContext, useReducer, useContext, useEffect, useMemo, useRef } from "react";
+import React, { createContext, useReducer, useContext, useEffect, useMemo } from "react";
 import { InitialStateType, ActionType, DraggableProviderType } from "./types";
 
 const initialState: InitialStateType = {
@@ -39,88 +39,6 @@ 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 and position (e.g., when drag ends without valid drop)
-    case "RESET_DRAG_CONTAINER": {
-      const { itemId, originalContainer, originalIndex } = action.payload;
-      const newItems = [...state.items];
-      const draggedItem = newItems.find(item => item && item.id === itemId);
-      
-      if (!draggedItem) return state;
-      
-      const currentIndex = newItems.indexOf(draggedItem);
-      
-      // Remove from current position
-      newItems.splice(currentIndex, 1);
-      
-      // Restore container property and insert at original index
-      const restoredItem = { ...draggedItem, container: originalContainer };
-      
-      // Insert at original index, or at end if index is invalid
-      if (originalIndex !== undefined && originalIndex >= 0) {
-        newItems.splice(originalIndex, 0, restoredItem);
-      } else {
-        newItems.push(restoredItem);
-      }
-      
-      return {
-        ...state,
-        items: newItems
-      };
-    }
-
     default:
       return state;
   }
@@ -143,34 +61,9 @@ export const DraggableProvider = ({
   onDrop,
   onDragOver,
   dropZone = { type: 'ghost', color: 'neutral', direction: 'vertical' },
-  providerId = 'default', // fallback provided for backward compatibility
-  // Opt-in flag for cross-container preview
-  enableCrossContainerPreview = false,
+  providerId = 'default', // fallback provided for backward compatibility, so this does not become a required prop
 }: DraggableProviderType) => {
   const [state, dispatch] = useReducer(reducer, initialState);
-  
-  // Track drag state for global listener
-  const dragStateRef = useRef<{
-    isDragging: boolean;
-    draggedItemId: string;
-    originalContainer: string;
-    originalIndex: number;
-    currentContainer: string;
-    dropOccurred: boolean;
-  }>({
-    isDragging: false,
-    draggedItemId: '',
-    originalContainer: '',
-    originalIndex: -1,
-    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';
@@ -200,209 +93,7 @@ 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,
-          originalIndex: dragStateRef.current.originalIndex,
-        },
-      });
-      
-      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: '',
-        originalIndex: -1,
-        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,
-                  originalIndex: dragStateRef.current.originalIndex,
-                },
-              });
-            }
-            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: '',
-              originalIndex: -1,
-              currentContainer: '',
-              dropOccurred: false,
-            };
-          }
-        }, 50); // Small delay to let drop event fire if it's going to
-      }
-    };
-
-    // Detect when drag leaves document boundaries
-    const handleDragLeave = (e: DragEvent) => {
-      // Check if we're leaving the document (relatedTarget will be null)
-      if (!e.relatedTarget && dragStateRef.current.isDragging && !dragStateRef.current.dropOccurred) {
-        // Drag left the document: reset to original container immediately
-        dispatch({
-          type: 'RESET_DRAG_CONTAINER',
-          payload: {
-            itemId: dragStateRef.current.draggedItemId,
-            originalContainer: dragStateRef.current.originalContainer,
-            originalIndex: dragStateRef.current.originalIndex,
-          },
-        });
-        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: '',
-          originalIndex: -1,
-          currentContainer: '',
-          dropOccurred: false,
-        };
-      }
-    };
-
-    document.addEventListener('dragover', handleGlobalDragOver);
-    document.addEventListener('drop', handleGlobalDrop);
-    document.addEventListener('dragleave', handleDragLeave);
-    document.addEventListener('mouseup', handleGlobalMouseUp);
-    document.addEventListener('pointerup', handleGlobalMouseUp);
-    
-    return () => {
-      document.removeEventListener('dragover', handleGlobalDragOver);
-      document.removeEventListener('drop', handleGlobalDrop);
-      document.removeEventListener('dragleave', handleDragLeave);
-      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,
-            originalIndex: dragStateRef.current.originalIndex,
-          },
-        });
-      }
-      
-      // Clear drag state
-      dragStateRef.current = {
-        isDragging: false,
-        draggedItemId: '',
-        originalContainer: '',
-        originalIndex: -1,
-        currentContainer: '',
-        dropOccurred: false,
-      };
-    }
-    
-    prevIsDraggingRef.current = isNowDragging;
-  }, [state.isDragging, enableCrossContainerPreview]);
-
   const handleDragStart = (id: string, container: string) => {
-    // Track drag in ref for global listener
-    if (enableCrossContainerPreview) {
-      // Find the original index of the item
-      const originalIndex = state.items.findIndex(item => item && item.id === id);
-      
-      dragStateRef.current = {
-        isDragging: true,
-        draggedItemId: id,
-        originalContainer: container,
-        originalIndex: originalIndex,
-        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);
@@ -412,93 +103,17 @@ export const DraggableProvider = ({
     if (state.dragData.originId !== providerId) return; // Ignore drag events from other providers
 
     if (state.dragData.id !== id) {
-      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}});
+      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 (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, originalIndex: dragStateRef.current.originalIndex } });
-    }
-    
     dispatch({ type: 'SET_IS_DRAGGING', payload: "" });
     dispatch({ type: 'SET_ACTIVE_CONTAINER', payload: "" });
     dispatch({ type: 'SET_DRAG_DATA', payload: { id: "", initialGroup: "", originId: "" } });
-    
-    // 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
-        );
-      }
-    }
+    if (onDragEnd) onDragEnd();
   };
 
   const changeCategory = (itemId: string, container: string) => {
@@ -508,60 +123,10 @@ 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) {
-      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
-      );
-    }
+    if (onDrop) onDrop(container);
   };
 
   const handleDragOver = (e: Event, container: string) => {
@@ -569,22 +134,6 @@ 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);
   };
 
@@ -608,4 +157,4 @@ export const DraggableProvider = ({
   return (
     <DragContext.Provider value={contextValue}>{children}</DragContext.Provider>
   );
-};
+};

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

@@ -18,12 +18,8 @@ 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_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, originalIndex: number } };
+  | { type: 'REORDER_ITEMS'; payload: { dragId: string; targetId: string } };
 
   export interface DropZoneConfig {
     type?: 'ghost' | 'outline' | 'shadow' | 'line';
@@ -37,10 +33,9 @@ export type ActionType =
     onReorder: (items: ItemType[]) => void;
     onDragStart?: (id: string, container: string) => void;
     onDragEnter?: (id: string, container: string) => void;
-    onDragEnd?: (...args: any[]) => void;
-    onDrop?: (...args: any[]) => void;
+    onDragEnd?: () => void;
+    onDrop?: (container: string) => 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/example.yml

@@ -5,12 +5,11 @@ examples:
   - draggable_with_selectable_list: Draggable with SelectableList Kit
   - draggable_with_cards: Draggable with Cards
   - draggable_with_table: Draggable with Table
+  - draggable_multiple_containers: Dragging Across Multiple Containers
   - draggable_drop_zones: Draggable Drop Zones
   - draggable_drop_zones_colors: Draggable Drop Zones Colors
   - draggable_drop_zones_line: Draggable Drop Zones Line
   - draggable_event_listeners: Draggable Event Listeners
-  - draggable_multiple_containers: Dragging Across Multiple Containers
-  - draggable_multiple_containers_dropzone: Dragging Across Multiple Containers with Dropzones
 
   rails:
   - draggable_default: Default
@@ -18,8 +17,8 @@ examples:
   - draggable_with_selectable_list: Draggable with SelectableList Kit
   - draggable_with_cards: Draggable with Cards
   - draggable_with_table: Draggable with Table
+  - draggable_multiple_containers: Dragging Across Multiple Containers
   - draggable_drop_zones: Draggable Drop Zones
   - draggable_drop_zones_colors: Draggable Drop Zones Colors
   - draggable_drop_zones_line: Draggable Drop Zones Line
   - draggable_event_listeners: Draggable Event Listeners
-  - draggable_multiple_containers: Dragging Across Multiple Containers

data/app/pb_kits/playbook/pb_draggable/docs/index.js

@@ -7,5 +7,4 @@ export { default as DraggableWithTable } from './_draggable_with_table.jsx'
 export { default as DraggableDropZones } from './_draggable_drop_zones.jsx'
 export { default as DraggableDropZonesColors } from './_draggable_drop_zones_colors.jsx'
 export { default as DraggableDropZonesLine } from './_draggable_drop_zones_line.jsx'
-export { default as DraggableEventListeners } from './_draggable_event_listeners.jsx'
-export { default as DraggableMultipleContainersDropzone } from './_draggable_multiple_containers_dropzone.jsx'
+export { default as DraggableEventListeners } from './_draggable_event_listeners.jsx'

data/app/pb_kits/playbook/pb_draggable/draggable.test.jsx

@@ -255,80 +255,4 @@ test("line dropZone with horizontal direction applies 'line_horizontal' class to
   const container = kit.querySelector(".pb_draggable_container");
   
   expect(container).toHaveClass("line_horizontal");
-});
-
-// Cross-container drag tests
-const multiContainerData = [
-  { id: "1", container: "To Do", text: "Task 1" },
-  { id: "2", container: "To Do", text: "Task 2" },
-  { id: "3", container: "In Progress", text: "Task 3" },
-  { id: "4", container: "Done", text: "Task 4" },
-];
-
-const containers = ["To Do", "In Progress", "Done"];
-
-const DraggableMultipleContainers = () => {
-  const [initialState, setInitialState] = useState(multiContainerData);
-
-  return (
-    <div data-testid={testId}>
-      <DraggableProvider
-          dropZone={{ type: "outline" }}
-          initialItems={multiContainerData}
-          onReorder={(items) => setInitialState(items)}
-      >
-        {containers.map((container) => (
-          <Draggable.Container
-              container={container}
-              data={{testid:`container-${container}`}}
-              key={container}
-          >
-            {initialState
-              .filter((item) => item.container === container)
-              .map(({ id, text }) => (
-                <Draggable.Item
-                    container={container}
-                    data-testid={`item-${id}`}
-                    dragId={id}
-                    key={id}
-                >
-                  {text}
-                </Draggable.Item>
-              ))}
-          </Draggable.Container>
-        ))}
-      </DraggableProvider>
-    </div>
-  );
-};
-
-test("renders multiple containers with correct items", () => {
-  render(<DraggableMultipleContainers />);
-  
-  const kit = screen.getByTestId(testId);
-  expect(kit).toBeInTheDocument();
-  
-  containers.forEach((container) => {
-    const containerEl = kit.querySelector(`[data-testid="container-${container}"]`);
-    expect(containerEl).toBeInTheDocument();
-  });
-  
-  // Check items are in correct containers
-  expect(screen.getByText("Task 1")).toBeInTheDocument();
-  expect(screen.getByText("Task 2")).toBeInTheDocument();
-  expect(screen.getByText("Task 3")).toBeInTheDocument();
-  expect(screen.getByText("Task 4")).toBeInTheDocument();
-});
-
-test("items have correct container association", () => {
-  const { container } = render(<DraggableMultipleContainers />);
-  
-  // items rendered within their respective containers
-  const todoContainer = container.querySelector('[data-testid="container-To Do"]');
-  const inProgressContainer = container.querySelector('[data-testid="container-In Progress"]');
-  const doneContainer = container.querySelector('[data-testid="container-Done"]');
-  
-  expect(todoContainer.querySelectorAll('.pb_draggable_item')).toHaveLength(2);
-  expect(inProgressContainer.querySelectorAll('.pb_draggable_item')).toHaveLength(1);
-  expect(doneContainer.querySelectorAll('.pb_draggable_item')).toHaveLength(1);
-})
+});