EuiDroppable now accepts multiple children (TypeScript) (#2634)

CHANGELOG.md

@@ -8,6 +8,7 @@ No public interface changes since `17.1.2`.
 
 - Fixed `EuiCodeEditor` custom mode file error by initializing with existing mode ([#2616](https://github.com/elastic/eui/pull/2616))
 - Removed `EuiIcon` default titles ([#2632](https://github.com/elastic/eui/pull/2632))
+- Fixed `EuiDroppable` not accepting multiple children when using TypeScript ([#2634](https://github.com/elastic/eui/pull/2634))
 
 ## [`17.1.1`](https://github.com/elastic/eui/tree/v17.1.1)
 

src/components/drag_and_drop/__snapshots__/droppable.test.tsx.snap

@@ -13,6 +13,21 @@ exports[`EuiDroppable can be given ReactElement children 1`] = `
 </div>
 `;
 
+exports[`EuiDroppable can be given multiple ReactElement children 1`] = `
+<div
+  class="euiDroppable euiDroppable--noGrow"
+  data-react-beautiful-dnd-droppable="3"
+  data-test-subj="droppable"
+>
+  <div />
+  <div />
+  <div />
+  <div
+    class="euiDroppable__placeholder"
+  />
+</div>
+`;
+
 exports[`EuiDroppable is rendered 1`] = `
 <div
   class="euiDroppable euiDroppable--noGrow"

src/components/drag_and_drop/droppable.test.tsx

@@ -32,6 +32,21 @@ describe('EuiDroppable', () => {
     expect(component).toMatchSnapshot();
   });
 
+  test('can be given multiple ReactElement children', () => {
+    const handler = jest.fn();
+    const component = render(
+      <EuiDragDropContext onDragEnd={handler} {...requiredProps}>
+        <EuiDroppable droppableId="testDroppable">
+          <div />
+          <div />
+          <div />
+        </EuiDroppable>
+      </EuiDragDropContext>
+    );
+
+    expect(component).toMatchSnapshot();
+  });
+
   describe('custom behavior', () => {
     describe('cloneDraggables', () => {
       const handler = jest.fn();

src/components/drag_and_drop/droppable.tsx

@@ -21,7 +21,7 @@ export type EuiDroppableSpacing = keyof typeof spacingToClassNameMap;
 export interface EuiDroppableProps
   extends CommonProps,
     Omit<DroppableProps, 'children'> {
-  children: ReactElement | DroppableProps['children'];
+  children: ReactElement | ReactElement[] | DroppableProps['children'];
   className?: string;
   /**
    * Makes its items immutable. Dragging creates cloned items that can be dropped elsewhere.