From ae4d6f36dec16c43b323ace605000f118913cbb7 Mon Sep 17 00:00:00 2001
From: Titani Labaj <39532947+tlabaj@users.noreply.github.com>
Date: Tue, 16 Jul 2024 11:17:03 -0400
Subject: [PATCH] chore(Drag and drop): Updated example for multi list to use
 flex  (#10692)

* chore(Drag and drop): Updated example for multilist to use flex so that target list will maintain size when empty

* remove null check
---
 .../react-core/src/components/DragDrop/Draggable.tsx |  2 +-
 .../DragDrop/examples/DragDropMultipleLists.tsx      | 12 ++++++------
 2 files changed, 7 insertions(+), 7 deletions(-)

diff --git a/packages/react-core/src/components/DragDrop/Draggable.tsx b/packages/react-core/src/components/DragDrop/Draggable.tsx
index 4b84b95fd6f..8cf152a851d 100644
--- a/packages/react-core/src/components/DragDrop/Draggable.tsx
+++ b/packages/react-core/src/components/DragDrop/Draggable.tsx
@@ -117,7 +117,7 @@ export const Draggable: React.FunctionComponent<DraggableProps> = ({
       index
     };
     const dest =
-      hoveringDroppableId !== null && hoveringIndex !== null
+      hoveringDroppableId !== null
         ? {
             droppableId: hoveringDroppableId,
             index: hoveringIndex
diff --git a/packages/react-core/src/components/DragDrop/examples/DragDropMultipleLists.tsx b/packages/react-core/src/components/DragDrop/examples/DragDropMultipleLists.tsx
index 0400633987f..4a02ec361b0 100644
--- a/packages/react-core/src/components/DragDrop/examples/DragDropMultipleLists.tsx
+++ b/packages/react-core/src/components/DragDrop/examples/DragDropMultipleLists.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import { DragDrop, Draggable, Droppable, Split, SplitItem } from '@patternfly/react-core';
+import { DragDrop, Draggable, Droppable, Flex } from '@patternfly/react-core';
 
 interface ItemType {
   id: string;
@@ -85,19 +85,19 @@ export const DragDropMultipleLists: React.FunctionComponent = () => {
 
   return (
     <DragDrop onDrop={onDrop}>
-      <Split hasGutter>
+      <Flex alignItems={{ default: 'alignItemsStretch' }} flexWrap={{ default: 'nowrap' }}>
         {Object.entries(items).map(([key, subitems]) => (
-          <SplitItem key={key} style={{ flex: 1 }}>
-            <Droppable zone="multizone" droppableId={key}>
+          <Flex key={key} fullWidth={{ default: 'fullWidth' }} alignItems={{ default: 'alignItemsStretch' }}>
+            <Droppable zone="multizone" droppableId={key} style={{ flexGrow: '1' }}>
               {(subitems as ItemType[]).map(({ id, content }) => (
                 <Draggable key={id} style={{ padding: '8px' }}>
                   {content}
                 </Draggable>
               ))}
             </Droppable>
-          </SplitItem>
+          </Flex>
         ))}
-      </Split>
+      </Flex>
     </DragDrop>
   );
 };