@patternfly/react-core 4.208.1 → 4.208.2

package/CHANGELOG.md

@@ -3,6 +3,14 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## 4.208.2 (2022-05-03)
+
+**Note:** Version bump only for package @patternfly/react-core
+
+
+
+
+
 ## 4.208.1 (2022-05-03)
 
 **Note:** Version bump only for package @patternfly/react-core

package/dist/umd/react-core.css

@@ -22630,6 +22630,75 @@ svg.pf-c-spinner.pf-m-xl {
     direction: ltr;
   }
 }
+.pf-l-gallery {
+  --pf-l-gallery--m-gutter--GridGap: var(--pf-global--gutter);
+  --pf-l-gallery--GridTemplateColumns--min: 250px;
+  --pf-l-gallery--GridTemplateColumns--minmax--min: var(--pf-l-gallery--GridTemplateColumns--min);
+  --pf-l-gallery--GridTemplateColumns--max: 1fr;
+  --pf-l-gallery--GridTemplateColumns--minmax--max: var(--pf-l-gallery--GridTemplateColumns--max);
+  --pf-l-gallery--GridTemplateColumns: repeat(auto-fill, minmax(var(--pf-l-gallery--GridTemplateColumns--minmax--min), var(--pf-l-gallery--GridTemplateColumns--minmax--max)));
+  --pf-l-gallery--GridTemplateRows: auto;
+  display: grid;
+  grid-template-columns: var(--pf-l-gallery--GridTemplateColumns);
+  grid-template-rows: var(--pf-l-gallery--GridTemplateRows);
+  --pf-l-gallery--GridTemplateColumns--minmax--min: var(--pf-l-gallery--GridTemplateColumns--min);
+  --pf-l-gallery--GridTemplateColumns--minmax--max: var(--pf-l-gallery--GridTemplateColumns--max);
+}
+
+.pf-l-gallery.pf-m-gutter {
+  grid-gap: var(--pf-l-gallery--m-gutter--GridGap);
+}
+
+@media (min-width: 576px) {
+  .pf-l-gallery {
+    --pf-l-gallery--GridTemplateColumns--minmax--min: var(--pf-l-gallery--GridTemplateColumns--min-on-sm, var(--pf-l-gallery--GridTemplateColumns--min));
+  }
+}
+@media (min-width: 768px) {
+  .pf-l-gallery {
+    --pf-l-gallery--GridTemplateColumns--minmax--min: var(--pf-l-gallery--GridTemplateColumns--min-on-md, var(--pf-l-gallery--GridTemplateColumns--min-on-sm, var(--pf-l-gallery--GridTemplateColumns--min)));
+  }
+}
+@media (min-width: 992px) {
+  .pf-l-gallery {
+    --pf-l-gallery--GridTemplateColumns--minmax--min: var(--pf-l-gallery--GridTemplateColumns--min-on-lg, var(--pf-l-gallery--GridTemplateColumns--min-on-md, var(--pf-l-gallery--GridTemplateColumns--min-on-sm, var(--pf-l-gallery--GridTemplateColumns--min))));
+  }
+}
+@media (min-width: 1200px) {
+  .pf-l-gallery {
+    --pf-l-gallery--GridTemplateColumns--minmax--min: var(--pf-l-gallery--GridTemplateColumns--min-on-xl, var(--pf-l-gallery--GridTemplateColumns--min-on-lg, var(--pf-l-gallery--GridTemplateColumns--min-on-md, var(--pf-l-gallery--GridTemplateColumns--min-on-sm, var(--pf-l-gallery--GridTemplateColumns--min)))));
+  }
+}
+@media (min-width: 1450px) {
+  .pf-l-gallery {
+    --pf-l-gallery--GridTemplateColumns--minmax--min: var(--pf-l-gallery--GridTemplateColumns--min-on-2xl, var(--pf-l-gallery--GridTemplateColumns--min-on-xl, var(--pf-l-gallery--GridTemplateColumns--min-on-lg, var(--pf-l-gallery--GridTemplateColumns--min-on-md, var(--pf-l-gallery--GridTemplateColumns--min-on-sm, var(--pf-l-gallery--GridTemplateColumns--min))))));
+  }
+}
+@media (min-width: 576px) {
+  .pf-l-gallery {
+    --pf-l-gallery--GridTemplateColumns--minmax--max: var(--pf-l-gallery--GridTemplateColumns--max-on-sm, var(--pf-l-gallery--GridTemplateColumns--max));
+  }
+}
+@media (min-width: 768px) {
+  .pf-l-gallery {
+    --pf-l-gallery--GridTemplateColumns--minmax--max: var(--pf-l-gallery--GridTemplateColumns--max-on-md, var(--pf-l-gallery--GridTemplateColumns--max-on-sm, var(--pf-l-gallery--GridTemplateColumns--max)));
+  }
+}
+@media (min-width: 992px) {
+  .pf-l-gallery {
+    --pf-l-gallery--GridTemplateColumns--minmax--max: var(--pf-l-gallery--GridTemplateColumns--max-on-lg, var(--pf-l-gallery--GridTemplateColumns--max-on-md, var(--pf-l-gallery--GridTemplateColumns--max-on-sm, var(--pf-l-gallery--GridTemplateColumns--max))));
+  }
+}
+@media (min-width: 1200px) {
+  .pf-l-gallery {
+    --pf-l-gallery--GridTemplateColumns--minmax--max: var(--pf-l-gallery--GridTemplateColumns--max-on-xl, var(--pf-l-gallery--GridTemplateColumns--max-on-lg, var(--pf-l-gallery--GridTemplateColumns--max-on-md, var(--pf-l-gallery--GridTemplateColumns--max-on-sm, var(--pf-l-gallery--GridTemplateColumns--max)))));
+  }
+}
+@media (min-width: 1450px) {
+  .pf-l-gallery {
+    --pf-l-gallery--GridTemplateColumns--minmax--max: var(--pf-l-gallery--GridTemplateColumns--max-on-2xl, var(--pf-l-gallery--GridTemplateColumns--max-on-xl, var(--pf-l-gallery--GridTemplateColumns--max-on-lg, var(--pf-l-gallery--GridTemplateColumns--max-on-md, var(--pf-l-gallery--GridTemplateColumns--max-on-sm, var(--pf-l-gallery--GridTemplateColumns--max))))));
+  }
+}
 .pf-l-flex {
   --pf-l-flex--Display: flex;
   --pf-l-flex--FlexWrap: wrap;
@@ -24706,75 +24775,6 @@ svg.pf-c-spinner.pf-m-xl {
     --pf-l-flex--spacer: var(--pf-l-flex--spacer--4xl);
   }
 }
-.pf-l-gallery {
-  --pf-l-gallery--m-gutter--GridGap: var(--pf-global--gutter);
-  --pf-l-gallery--GridTemplateColumns--min: 250px;
-  --pf-l-gallery--GridTemplateColumns--minmax--min: var(--pf-l-gallery--GridTemplateColumns--min);
-  --pf-l-gallery--GridTemplateColumns--max: 1fr;
-  --pf-l-gallery--GridTemplateColumns--minmax--max: var(--pf-l-gallery--GridTemplateColumns--max);
-  --pf-l-gallery--GridTemplateColumns: repeat(auto-fill, minmax(var(--pf-l-gallery--GridTemplateColumns--minmax--min), var(--pf-l-gallery--GridTemplateColumns--minmax--max)));
-  --pf-l-gallery--GridTemplateRows: auto;
-  display: grid;
-  grid-template-columns: var(--pf-l-gallery--GridTemplateColumns);
-  grid-template-rows: var(--pf-l-gallery--GridTemplateRows);
-  --pf-l-gallery--GridTemplateColumns--minmax--min: var(--pf-l-gallery--GridTemplateColumns--min);
-  --pf-l-gallery--GridTemplateColumns--minmax--max: var(--pf-l-gallery--GridTemplateColumns--max);
-}
-
-.pf-l-gallery.pf-m-gutter {
-  grid-gap: var(--pf-l-gallery--m-gutter--GridGap);
-}
-
-@media (min-width: 576px) {
-  .pf-l-gallery {
-    --pf-l-gallery--GridTemplateColumns--minmax--min: var(--pf-l-gallery--GridTemplateColumns--min-on-sm, var(--pf-l-gallery--GridTemplateColumns--min));
-  }
-}
-@media (min-width: 768px) {
-  .pf-l-gallery {
-    --pf-l-gallery--GridTemplateColumns--minmax--min: var(--pf-l-gallery--GridTemplateColumns--min-on-md, var(--pf-l-gallery--GridTemplateColumns--min-on-sm, var(--pf-l-gallery--GridTemplateColumns--min)));
-  }
-}
-@media (min-width: 992px) {
-  .pf-l-gallery {
-    --pf-l-gallery--GridTemplateColumns--minmax--min: var(--pf-l-gallery--GridTemplateColumns--min-on-lg, var(--pf-l-gallery--GridTemplateColumns--min-on-md, var(--pf-l-gallery--GridTemplateColumns--min-on-sm, var(--pf-l-gallery--GridTemplateColumns--min))));
-  }
-}
-@media (min-width: 1200px) {
-  .pf-l-gallery {
-    --pf-l-gallery--GridTemplateColumns--minmax--min: var(--pf-l-gallery--GridTemplateColumns--min-on-xl, var(--pf-l-gallery--GridTemplateColumns--min-on-lg, var(--pf-l-gallery--GridTemplateColumns--min-on-md, var(--pf-l-gallery--GridTemplateColumns--min-on-sm, var(--pf-l-gallery--GridTemplateColumns--min)))));
-  }
-}
-@media (min-width: 1450px) {
-  .pf-l-gallery {
-    --pf-l-gallery--GridTemplateColumns--minmax--min: var(--pf-l-gallery--GridTemplateColumns--min-on-2xl, var(--pf-l-gallery--GridTemplateColumns--min-on-xl, var(--pf-l-gallery--GridTemplateColumns--min-on-lg, var(--pf-l-gallery--GridTemplateColumns--min-on-md, var(--pf-l-gallery--GridTemplateColumns--min-on-sm, var(--pf-l-gallery--GridTemplateColumns--min))))));
-  }
-}
-@media (min-width: 576px) {
-  .pf-l-gallery {
-    --pf-l-gallery--GridTemplateColumns--minmax--max: var(--pf-l-gallery--GridTemplateColumns--max-on-sm, var(--pf-l-gallery--GridTemplateColumns--max));
-  }
-}
-@media (min-width: 768px) {
-  .pf-l-gallery {
-    --pf-l-gallery--GridTemplateColumns--minmax--max: var(--pf-l-gallery--GridTemplateColumns--max-on-md, var(--pf-l-gallery--GridTemplateColumns--max-on-sm, var(--pf-l-gallery--GridTemplateColumns--max)));
-  }
-}
-@media (min-width: 992px) {
-  .pf-l-gallery {
-    --pf-l-gallery--GridTemplateColumns--minmax--max: var(--pf-l-gallery--GridTemplateColumns--max-on-lg, var(--pf-l-gallery--GridTemplateColumns--max-on-md, var(--pf-l-gallery--GridTemplateColumns--max-on-sm, var(--pf-l-gallery--GridTemplateColumns--max))));
-  }
-}
-@media (min-width: 1200px) {
-  .pf-l-gallery {
-    --pf-l-gallery--GridTemplateColumns--minmax--max: var(--pf-l-gallery--GridTemplateColumns--max-on-xl, var(--pf-l-gallery--GridTemplateColumns--max-on-lg, var(--pf-l-gallery--GridTemplateColumns--max-on-md, var(--pf-l-gallery--GridTemplateColumns--max-on-sm, var(--pf-l-gallery--GridTemplateColumns--max)))));
-  }
-}
-@media (min-width: 1450px) {
-  .pf-l-gallery {
-    --pf-l-gallery--GridTemplateColumns--minmax--max: var(--pf-l-gallery--GridTemplateColumns--max-on-2xl, var(--pf-l-gallery--GridTemplateColumns--max-on-xl, var(--pf-l-gallery--GridTemplateColumns--max-on-lg, var(--pf-l-gallery--GridTemplateColumns--max-on-md, var(--pf-l-gallery--GridTemplateColumns--max-on-sm, var(--pf-l-gallery--GridTemplateColumns--max))))));
-  }
-}
 .pf-l-grid {
   --pf-l-grid--m-gutter--GridGap: var(--pf-global--gutter);
   --pf-l-grid__item--GridColumnStart: auto;
@@ -26001,21 +26001,6 @@ svg.pf-c-spinner.pf-m-xl {
   margin-right: var(--pf-l-level--m-gutter--MarginRight);
 }
 
-.pf-l-stack {
-  --pf-l-stack--m-gutter--MarginBottom: var(--pf-global--gutter);
-  display: flex;
-  flex-direction: column;
-  height: 100%;
-}
-
-.pf-l-stack__item.pf-m-fill {
-  flex-grow: 1;
-}
-
-.pf-l-stack.pf-m-gutter > *:not(:last-child) {
-  margin-bottom: var(--pf-l-stack--m-gutter--MarginBottom);
-}
-
 .pf-l-split {
   --pf-l-split--m-gutter--MarginRight: var(--pf-global--gutter);
   display: flex;
@@ -26035,6 +26020,21 @@ svg.pf-c-spinner.pf-m-xl {
   margin-right: var(--pf-l-split--m-gutter--MarginRight);
 }
 
+.pf-l-stack {
+  --pf-l-stack--m-gutter--MarginBottom: var(--pf-global--gutter);
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+}
+
+.pf-l-stack__item.pf-m-fill {
+  flex-grow: 1;
+}
+
+.pf-l-stack.pf-m-gutter > *:not(:last-child) {
+  margin-bottom: var(--pf-l-stack--m-gutter--MarginBottom);
+}
+
 .pf-c-alert-group {
   --pf-c-alert-group__item--MarginTop: var(--pf-global--spacer--sm);
   --pf-c-alert-group--m-toast--Top: var(--pf-global--spacer--2xl);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@patternfly/react-core",
-  "version": "4.208.1",
+  "version": "4.208.2",
   "description": "This library provides a set of common React components for use with the PatternFly reference implementation.",
   "main": "dist/js/index.js",
   "module": "dist/esm/index.js",
@@ -34,9 +34,9 @@
     "generate": "node scripts/copyStyles.js"
   },
   "dependencies": {
-    "@patternfly/react-icons": "^4.59.1",
-    "@patternfly/react-styles": "^4.58.1",
-    "@patternfly/react-tokens": "^4.60.1",
+    "@patternfly/react-icons": "^4.59.2",
+    "@patternfly/react-styles": "^4.58.2",
+    "@patternfly/react-tokens": "^4.60.2",
     "focus-trap": "6.2.2",
     "react-dropzone": "9.0.0",
     "tippy.js": "5.1.2",
@@ -60,5 +60,5 @@
     "react": "^16.8.0 || ^17.0.0",
     "react-dom": "^16.8.0 || ^17.0.0"
   },
-  "gitHead": "5daa1759676939afef88d0f21e5e014fb6900743"
+  "gitHead": "657b6120e44b7d79febe3164284e7444efd385be"
 }

package/src/components/DragDrop/examples/DragDrop.md

@@ -1,175 +1,43 @@
 ---
 id: Drag and drop
 section: components
-propComponents: [
-  DragDrop,
-  Draggable,
-  Droppable,
-  DraggableItemPosition
-]
+propComponents: [DragDrop, Draggable, Droppable, DraggableItemPosition]
 beta: true
 ---
 
-You can use `DragDrop` to move items in or between lists. `DragDrop`s should contain `Droppable`s which contain `Draggable`s.
+You can use the `DragDrop` component to move items in or between lists. The `DragDrop` component should contain `Droppable` components which contain `Draggable` components.
 
-```js noLive
+```ts noLive
 import React from 'react';
 import { DragDrop, Draggable, Droppable } from '@patternfly/react-core';
 
-<DragDrop> {/* DragDrop houses the context for dragging and dropping */}
-  <Droppable>
-    <Draggable>
-      You can put anything here! It will be wrapped in a styled div.
-    </Draggable>
-    <Draggable>
-      You can have as many Draggables as you like.
-    </Draggable>
-  </Droppable>
-  <Droppable> {/* You can also have many droppables! */}
-    <Draggable />
-  </Droppable>
-</DragDrop>
+const DragDropCodeSample: React.FunctionComponent = () => (
+  <DragDrop>
+    {' '}
+    {/* DragDrop houses the context for dragging and dropping */}
+    <Droppable>
+      <Draggable>You can put anything here! It will be wrapped in a styled div.</Draggable>
+      <Draggable>You can have as many Draggables as you like.</Draggable>
+    </Droppable>
+    <Droppable>
+      {' '}
+      {/* You can also have many droppables! */}
+      <Draggable />
+    </Droppable>
+  </DragDrop>
+);
 ```
+
 Note: Keyboard accessibility and screen reader accessibility are still in development.
 
 ## Examples
-### Basic
-
-```js
-import React from 'react';
-import { DragDrop, Draggable, Droppable } from '@patternfly/react-core';
-
-const getItems = count =>
-  Array.from({ length: count }, (v, k) => k).map(k => ({
-    id: `item-${k}`,
-    content: `item ${k} `.repeat(k === 4 ? 20 : 1)
-  }));
-
-const reorder = (list, startIndex, endIndex) => {
-  const result = Array.from(list);
-  const [removed] = result.splice(startIndex, 1);
-  result.splice(endIndex, 0, removed);
-  return result;
-};
-
-Basic = () => {
-  const [items, setItems] = React.useState(getItems(10));
-
-  function onDrop(source, dest) {
-    if (dest) {
-      const newItems = reorder(
-        items,
-        source.index,
-        dest.index
-      );
-      setItems(newItems);
 
-      return true;
-    }
-    return false;
-  }
+### Basic
 
-  return (
-    <DragDrop onDrop={onDrop}>
-      <Droppable>
-        {items.map(({ id, content }, i) =>
-          <Draggable key={i} style={{ padding: '8px' }}>
-            {content}
-          </Draggable>
-        )}
-      </Droppable>
-    </DragDrop>
-  );
-}
+```ts file="./DragDropBasic.tsx"
 ```
 
 ### Multiple lists
 
-```js
-import React from 'react';
-import { DragDrop, Draggable, Droppable, Split, SplitItem } from '@patternfly/react-core';
-
-const getItems = (count, start) =>
-  Array.from({ length: count }, (v, k) => k).map(k => ({
-    id: `item-${k + start}`,
-    content: `item ${k + start} `.repeat(k === 4 ? 20 : 1)
-  }));
-
-const reorder = (list, startIndex, endIndex) => {
-  const result = Array.from(list);
-  const [removed] = result.splice(startIndex, 1);
-  result.splice(endIndex, 0, removed);
-  return result;
-};
-
-const move = (source, destination, sourceIndex, destIndex) => {
-  const sourceClone = Array.from(source);
-  const destClone = Array.from(destination);
-  const [removed] = sourceClone.splice(sourceIndex, 1);
-  destClone.splice(destIndex, 0, removed);
-  return [sourceClone, destClone];
-};
-
-MultiList = () => {
-  const [items, setItems] = React.useState({
-    items1: getItems(10, 0),
-    items2: getItems(5, 10)
-  });
-
-  function onDrop(source, dest) {
-    console.log(source, dest);
-    if (dest) {
-      if (source.droppableId === dest.droppableId) {
-        const newItems = reorder(
-          source.droppableId === 'items1' ? items.items1 : items.items2,
-          source.index,
-          dest.index
-        );
-        if (source.droppableId === 'items1') {
-          setItems({
-            items1: newItems,
-            items2: items.items2
-          });
-        } else {
-          setItems({
-            items1: items.items1,
-            items2: newItems
-          });
-        }
-      } else {
-        const [newItems1, newItems2] = move(
-          source.droppableId === 'items1' ? items.items1 : items.items2,
-          dest.droppableId   === 'items1' ? items.items1 : items.items2,
-          source.index,
-          dest.index
-        );
-        setItems({
-          items1: source.droppableId === 'items1' ? newItems1 : newItems2,
-          items2: dest.droppableId   === 'items1' ? newItems1 : newItems2
-        });
-      }
-      return true;
-    }
-    return false;
-  }
-
-  return (
-    <DragDrop onDrop={onDrop}>
-      <Split hasGutter>
-        {Object.entries(items).map(([key, subitems]) =>
-          <SplitItem key={key} style={{ flex: 1 }}>
-            <Droppable zone="multizone" droppableId={key}>
-              {subitems.map(({ id, content }, i) =>
-                <Draggable key={id} style={{ padding: '8px' }}>
-                  {content}
-                </Draggable>
-              )}
-            </Droppable>
-          </SplitItem>
-        )}
-      </Split>
-    </DragDrop>
-  );
-}
+```ts file="./DragDropMultipleLists.tsx"
 ```
-

package/src/components/DragDrop/examples/DragDropBasic.tsx

@@ -0,0 +1,53 @@
+import React from 'react';
+import { DragDrop, Draggable, Droppable } from '@patternfly/react-core';
+
+interface ItemType {
+  id: string;
+  content: string;
+}
+
+interface SourceType {
+  droppableId: string;
+  index: number;
+}
+
+interface DestinationType extends SourceType {}
+
+const getItems = (count: number) =>
+  Array.from({ length: count }, (_, idx) => idx).map(idx => ({
+    id: `item-${idx}`,
+    content: `item ${idx} `.repeat(idx === 4 ? 20 : 1)
+  }));
+
+const reorder = (list: ItemType[], startIndex: number, endIndex: number) => {
+  const result = list;
+  const [removed] = result.splice(startIndex, 1);
+  result.splice(endIndex, 0, removed);
+  return result;
+};
+
+export const DragDropBasic: React.FunctionComponent = () => {
+  const [items, setItems] = React.useState(getItems(10));
+
+  function onDrop(source: SourceType, dest: DestinationType) {
+    if (dest) {
+      const newItems = reorder(items, source.index, dest.index);
+      setItems(newItems);
+
+      return true;
+    }
+    return false;
+  }
+
+  return (
+    <DragDrop onDrop={onDrop}>
+      <Droppable>
+        {items.map(({ content }, i) => (
+          <Draggable key={i} style={{ padding: '8px' }}>
+            {content}
+          </Draggable>
+        ))}
+      </Droppable>
+    </DragDrop>
+  );
+};

package/src/components/DragDrop/examples/DragDropMultipleLists.tsx

@@ -0,0 +1,98 @@
+import React from 'react';
+import { DragDrop, Draggable, Droppable, Split, SplitItem } from '@patternfly/react-core';
+
+interface ItemType {
+  id: string;
+  content: string;
+}
+
+interface SourceType {
+  droppableId: string;
+  index: number;
+}
+
+interface DestinationType extends SourceType {}
+
+const getItems = (count: number, startIndex: number) =>
+  Array.from({ length: count }, (_, idx) => idx + startIndex).map(idx => ({
+    id: `item-${idx}`,
+    content: `item ${idx} `.repeat(idx === 4 ? 20 : 1)
+  }));
+
+const reorder = (list: ItemType[], startIndex: number, endIndex: number) => {
+  const result = list;
+  const [removed] = result.splice(startIndex, 1);
+  result.splice(endIndex, 0, removed);
+  return result;
+};
+
+const move = (source: ItemType[], destination: ItemType[], sourceIndex: number, destIndex: number) => {
+  const sourceClone = source;
+  const destClone = destination;
+  const [removed] = sourceClone.splice(sourceIndex, 1);
+  destClone.splice(destIndex, 0, removed);
+  return [sourceClone, destClone];
+};
+
+export const DragDropMultipleLists: React.FunctionComponent = () => {
+  const [items, setItems] = React.useState({
+    items1: getItems(10, 0),
+    items2: getItems(5, 10)
+  });
+
+  function onDrop(source: SourceType, dest: DestinationType) {
+    // eslint-disable-next-line no-console
+    console.log(source, dest);
+    if (dest) {
+      if (source.droppableId === dest.droppableId) {
+        const newItems = reorder(
+          source.droppableId === 'items1' ? items.items1 : items.items2,
+          source.index,
+          dest.index
+        );
+        if (source.droppableId === 'items1') {
+          setItems({
+            items1: newItems,
+            items2: items.items2
+          });
+        } else {
+          setItems({
+            items1: items.items1,
+            items2: newItems
+          });
+        }
+      } else {
+        const [newItems1, newItems2] = move(
+          source.droppableId === 'items1' ? items.items1 : items.items2,
+          dest.droppableId === 'items1' ? items.items1 : items.items2,
+          source.index,
+          dest.index
+        );
+        setItems({
+          items1: source.droppableId === 'items1' ? newItems1 : newItems2,
+          items2: dest.droppableId === 'items1' ? newItems1 : newItems2
+        });
+      }
+      return true;
+    }
+    return false;
+  }
+
+  return (
+    <DragDrop onDrop={onDrop}>
+      <Split hasGutter>
+        {Object.entries(items).map(([key, subitems]) => (
+          <SplitItem key={key} style={{ flex: 1 }}>
+            <Droppable zone="multizone" droppableId={key}>
+              {subitems.map(({ id, content }) => (
+                <Draggable key={id} style={{ padding: '8px' }}>
+                  {content}
+                </Draggable>
+              ))}
+            </Droppable>
+          </SplitItem>
+        ))}
+      </Split>
+    </DragDrop>
+  );
+};