@pega/cosmos-react-dnd 4.0.0-dev.5.1 → 4.0.0-dev.6.1

package/lib/components/DragDropList/DragDropList.d.ts

@@ -1,6 +1,6 @@
 /// <reference types="react" />
 import { ForwardProps } from '@pega/cosmos-react-core';
 import { DragDropListProps } from './DragDropList.types';
-declare const DragDropList: <T extends object = object>({ accept, items, itemRenderer: ItemRenderer, emptyRenderer: EmptyRenderer, onChange, onEnter, pullMode, pushMode, as: Component, ...restProps }: DragDropListProps<T> & ForwardProps) => JSX.Element;
+declare const DragDropList: <T extends object = object>({ id: idProp, accept, items, itemRenderer: ItemRenderer, emptyRenderer: EmptyRenderer, onChange, onEnter, pullMode, pushMode, dragToRemove, as: Component, ...restProps }: DragDropListProps<T> & ForwardProps) => JSX.Element;
 export default DragDropList;
 //# sourceMappingURL=DragDropList.d.ts.map

package/lib/components/DragDropList/DragDropList.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"DragDropList.d.ts","sourceRoot":"","sources":["../../../src/components/DragDropList/DragDropList.tsx"],"names":[],"mappings":";AAGA,OAAO,EAIL,YAAY,EAEb,MAAM,yBAAyB,CAAC;AAKjC,OAAO,EAAE,iBAAiB,EAAE,MAAM,sBAAsB,CAAC;AAezD,QAAA,MAAM,YAAY,kOAqQjB,CAAC;AAEF,eAAe,YAAY,CAAC"}
+{"version":3,"file":"DragDropList.d.ts","sourceRoot":"","sources":["../../../src/components/DragDropList/DragDropList.tsx"],"names":[],"mappings":";AAGA,OAAO,EAIL,YAAY,EAGb,MAAM,yBAAyB,CAAC;AAKjC,OAAO,EAAE,iBAAiB,EAAE,MAAM,sBAAsB,CAAC;AAgBzD,QAAA,MAAM,YAAY,4PAwRjB,CAAC;AAEF,eAAe,YAAY,CAAC"}

package/lib/components/DragDropList/DragDropList.js

@@ -1,14 +1,16 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { useCallback, useState, useRef } from 'react';
-import { useElement, useAfterInitialEffect, useTriggerableEffect } from '@pega/cosmos-react-core';
+import { useElement, useAfterInitialEffect, useTriggerableEffect, useUID } from '@pega/cosmos-react-core';
 import Draggable from '../Draggable';
 import Droppable from '../Droppable';
 const middleYOfRect = ({ top, bottom }) => top + (bottom - top) / 2;
-const DragDropList = ({ accept, items, itemRenderer: ItemRenderer, emptyRenderer: EmptyRenderer, onChange, onEnter, pullMode = 'remove', pushMode = 'insert', as: Component = 'ul', ...restProps }) => {
+const DragDropList = ({ id: idProp, accept, items, itemRenderer: ItemRenderer, emptyRenderer: EmptyRenderer, onChange, onEnter, pullMode = 'remove', pushMode = 'insert', dragToRemove = false, as: Component = 'ul', ...restProps }) => {
     const [internalItems, setInternalItems] = useState(items);
     const itemRectsRef = useRef(null);
     const transformedItem = useRef(null);
     const [listEl, setListEl] = useElement();
+    const uniqueId = useUID();
+    const listId = idProp ?? uniqueId;
     const getItemRects = useCallback(() => {
         if (!listEl || listEl.children.length === 0)
             return null;
@@ -32,12 +34,23 @@ const DragDropList = ({ accept, items, itemRenderer: ItemRenderer, emptyRenderer
         if (transformedItem.current)
             return transformedItem.current;
         const newItem = {
+            ...item,
             ...onEnter(item),
             id: item.id
         };
         transformedItem.current = newItem;
         return newItem;
     }, [onEnter]);
+    const changeSource = useCallback((itemId, destinationId) => {
+        const sourcePullMode = typeof pullMode === 'function' ? pullMode(destinationId) : pullMode;
+        if (sourcePullMode === 'remove') {
+            const newList = internalItems.filter(({ id }) => id !== itemId);
+            triggerOnChange(newList);
+        }
+        else {
+            setInternalItems(items);
+        }
+    }, [pullMode, items, internalItems, triggerOnChange]);
     const getInsertIndex = useCallback((item, monitor) => {
         itemRectsRef.current = getItemRects();
         const { current: itemRects } = itemRectsRef;
@@ -77,10 +90,8 @@ const DragDropList = ({ accept, items, itemRenderer: ItemRenderer, emptyRenderer
         return insertIndex;
     }, [getItemRects, internalItems]);
     const removeById = useCallback((itemId) => {
-        if (pullMode === 'remove') {
-            setInternalItems(currentItems => currentItems.filter(({ id }) => id !== itemId));
-        }
-    }, [pullMode]);
+        setInternalItems(currentItems => currentItems.filter(({ id }) => id !== itemId));
+    }, []);
     const normalizeItems = useCallback(() => {
         setInternalItems(currentItems => currentItems.map(({ id, data, type }) => ({
             id,
@@ -97,11 +108,12 @@ const DragDropList = ({ accept, items, itemRenderer: ItemRenderer, emptyRenderer
             item.removeFromCurrent = () => {
                 removeById(item.id);
             };
-            item.normalizeDestination = normalizeItems;
-            item.changeDestination = triggerOnChange;
-            item.destinationItemsRef = internalItemsRef;
-            item.transformedItemCache?.add(transformedItem);
         }
+        item.normalizeDestination = normalizeItems;
+        item.changeDestination = triggerOnChange;
+        item.destinationItemsRef = internalItemsRef;
+        item.transformedItemCache?.add(transformedItem);
+        item.destinationId = listId;
         let insertIndex = 0;
         if (pushMode === 'insert')
             insertIndex = getInsertIndex(item, monitor);
@@ -127,15 +139,12 @@ const DragDropList = ({ accept, items, itemRenderer: ItemRenderer, emptyRenderer
             else
                 setInternalItems(newItems);
         }
-    }, [internalItems, pushMode, getInsertIndex, normalizeItems, triggerOnChange, removeById]);
+    }, [internalItems, pushMode, getInsertIndex, normalizeItems, triggerOnChange, removeById, listId]);
     const onHover = positionItems;
     const onDrop = positionItems;
     const onBegin = useCallback((itemId) => () => {
         const initialIndex = internalItems.findIndex(({ id }) => id === itemId);
         return {
-            removeFromCurrent: () => {
-                removeById(itemId);
-            },
             returnToSource: (item) => {
                 setInternalItems(currentItems => {
                     const newItems = currentItems.filter(({ id }) => id !== itemId);
@@ -145,35 +154,41 @@ const DragDropList = ({ accept, items, itemRenderer: ItemRenderer, emptyRenderer
                 normalizeItems();
             },
             normalizeDestination: normalizeItems,
-            changeSource: triggerOnChange,
-            sourceItemsRef: internalItemsRef,
+            changeSource,
             changeDestination: triggerOnChange,
             destinationItemsRef: internalItemsRef,
-            transformedItemCache: new Set([transformedItem])
+            transformedItemCache: new Set([transformedItem]),
+            sourceId: listId,
+            destinationId: listId
         };
-    }, [internalItems, normalizeItems, triggerOnChange, removeById]);
+    }, [internalItems, normalizeItems, triggerOnChange, changeSource, removeById, listId]);
     const onEnd = useCallback((item, monitor) => {
         if (!item)
             return;
         if (monitor.didDrop()) {
-            const sourceItems = item.sourceItemsRef.current;
-            const destinationItems = item.destinationItemsRef.current;
-            item.normalizeDestination?.();
+            const { id: itemId, sourceId, destinationId } = item;
             let insertIndex;
-            if (item.changeSource !== item.changeDestination) {
-                item.changeSource?.(sourceItems);
-                insertIndex = destinationItems.findIndex(({ id }) => id === item.id);
+            item.normalizeDestination?.();
+            const destinationItems = item.destinationItemsRef.current;
+            if (sourceId && destinationId && sourceId !== destinationId) {
+                item.changeSource?.(itemId, destinationId);
+                insertIndex = destinationItems.findIndex(({ id }) => id === itemId);
             }
             item.changeDestination?.(destinationItems, insertIndex);
         }
         else {
             item.removeFromCurrent?.();
-            item.returnToSource?.(item);
+            if (dragToRemove) {
+                removeById(item.id);
+            }
+            else {
+                item.returnToSource?.(item);
+            }
         }
         item.transformedItemCache?.forEach(ref => {
             ref.current = null;
         });
-    }, []);
+    }, [dragToRemove]);
     const emptyContent = EmptyRenderer ? _jsx(EmptyRenderer, {}) : null;
     return (_jsx(Droppable, { accept: accept, onHover: onHover, onDrop: onDrop, children: ({ dropRef }) => {
             return (_jsx(Component, { ref: (el) => {
@@ -188,7 +203,7 @@ const DragDropList = ({ accept, items, itemRenderer: ItemRenderer, emptyRenderer
                                         dragRef,
                                         previewRef,
                                         ...collected,
-                                        isDragging: collected.isDragging || !!item.removeFromCurrent
+                                        isDragging: !!item.sourceId
                                     } }));
                             } }, item.id));
                     }) }));

package/lib/components/DragDropList/DragDropList.js.map

@@ -1 +1 @@
-{"version":3,"file":"DragDropList.js","sourceRoot":"","sources":["../../../src/components/DragDropList/DragDropList.tsx"],"names":[],"mappings":"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","sourcesContent":["import { useCallback, useState, useRef, RefObject, MutableRefObject } from 'react';\nimport { DragSourceMonitor, DropTargetMonitor } from 'react-dnd';\n\nimport {\n  useElement,\n  useAfterInitialEffect,\n  useTriggerableEffect,\n  ForwardProps,\n  OmitStrict\n} from '@pega/cosmos-react-core';\n\nimport Draggable, { DraggableItem } from '../Draggable';\nimport Droppable from '../Droppable';\n\nimport { DragDropListProps } from './DragDropList.types';\n\ninterface DragDropListItem<T extends object = object> extends DraggableItem<T> {\n  removeFromCurrent?: () => void;\n  returnToSource?: (item: DraggableItem<T>) => void;\n  normalizeDestination?: () => void;\n  changeSource?: (items: DragDropListItem<T>[]) => void;\n  sourceItemsRef?: RefObject<DragDropListItem<T>[]>;\n  changeDestination?: (items: DragDropListItem<T>[], insertIndex?: number) => void;\n  destinationItemsRef?: RefObject<DragDropListItem<T>[]>;\n  transformedItemCache?: Set<MutableRefObject<DraggableItem<T> | null>>;\n}\n\nconst middleYOfRect = ({ top, bottom }: DOMRect): number => top + (bottom - top) / 2;\n\nconst DragDropList = <T extends object = object>({\n  accept,\n  items,\n  itemRenderer: ItemRenderer,\n  emptyRenderer: EmptyRenderer,\n  onChange,\n  onEnter,\n  pullMode = 'remove',\n  pushMode = 'insert',\n  as: Component = 'ul',\n  ...restProps\n}: DragDropListProps<T> & ForwardProps) => {\n  const [internalItems, setInternalItems] = useState<DragDropListItem<T>[]>(items);\n  const itemRectsRef = useRef<DOMRect[] | null>(null);\n  const transformedItem = useRef<DraggableItem<T> | null>(null);\n  const [listEl, setListEl] = useElement<HTMLElement>();\n\n  const getItemRects = useCallback((): DOMRect[] | null => {\n    if (!listEl || listEl.children.length === 0) return null;\n    return [...listEl.children].map(itemEl => {\n      return itemEl.getBoundingClientRect();\n    });\n  }, [listEl]);\n\n  useAfterInitialEffect(() => {\n    setInternalItems(items);\n  }, [items]);\n\n  const internalItemsRef = useRef(internalItems);\n  internalItemsRef.current = internalItems;\n\n  const triggerOnChange = useTriggerableEffect(\n    useCallback(\n      (newItems: DragDropListItem<T>[], insertIndex?: number) => {\n        onChange(newItems, insertIndex);\n      },\n      [onChange]\n    )\n  );\n\n  const getTransformedItem = useCallback(\n    (item: DragDropListItem<T>) => {\n      if (!onEnter) {\n        transformedItem.current = null;\n        return item;\n      }\n\n      if (transformedItem.current) return transformedItem.current;\n\n      const newItem = {\n        ...onEnter(item),\n        id: item.id\n      };\n      transformedItem.current = newItem;\n      return newItem;\n    },\n    [onEnter]\n  );\n\n  const getInsertIndex = useCallback(\n    (item: DraggableItem<T>, monitor: DropTargetMonitor | DragSourceMonitor): number => {\n      itemRectsRef.current = getItemRects();\n      const { current: itemRects } = itemRectsRef;\n      let insertIndex = -1;\n      const prevIndex = internalItems.findIndex(({ id }) => id === item.id);\n\n      const clientXY = monitor.getClientOffset();\n      if (!itemRects || !clientXY) return insertIndex;\n\n      const dragPreviewRectTop = clientXY.y;\n      const atHead = dragPreviewRectTop < middleYOfRect(itemRects[0]);\n      const atTail = dragPreviewRectTop >= middleYOfRect(itemRects[itemRects.length - 1]);\n\n      if (atHead) {\n        insertIndex = 0;\n      } else if (atTail) {\n        insertIndex = prevIndex === itemRects.length - 1 ? prevIndex : itemRects.length;\n      } else {\n        itemRects.some((rect, i, rects) => {\n          if (i === rects.length - 1) {\n            if (prevIndex === i) insertIndex = i;\n            return true;\n          }\n          const belowCurrent = dragPreviewRectTop >= middleYOfRect(rect);\n          const aboveNext = dragPreviewRectTop < middleYOfRect(rects[i + 1]);\n          if (belowCurrent && aboveNext) {\n            if (prevIndex !== -1 && i >= prevIndex) insertIndex = i;\n            else insertIndex = i + 1;\n            return true;\n          }\n          return false;\n        });\n      }\n\n      return insertIndex;\n    },\n    [getItemRects, internalItems]\n  );\n\n  const removeById = useCallback(\n    (itemId: DraggableItem<T>['id']): void => {\n      if (pullMode === 'remove') {\n        setInternalItems(currentItems => currentItems.filter(({ id }) => id !== itemId));\n      }\n    },\n    [pullMode]\n  );\n\n  const normalizeItems = useCallback(() => {\n    setInternalItems(currentItems =>\n      currentItems.map(({ id, data, type }) => ({\n        id,\n        data,\n        type\n      }))\n    );\n  }, []);\n\n  const positionItems = useCallback(\n    (item: DragDropListItem<T>, monitor: DropTargetMonitor): void => {\n      if (!monitor.canDrop() || !monitor.isOver({ shallow: true })) return;\n\n      const prevIndex = internalItems.findIndex(({ id }) => id === item.id);\n\n      if (prevIndex === -1) {\n        item.removeFromCurrent?.();\n        item.removeFromCurrent = () => {\n          removeById(item.id);\n        };\n        item.normalizeDestination = normalizeItems;\n        item.changeDestination = triggerOnChange;\n        item.destinationItemsRef = internalItemsRef;\n        item.transformedItemCache?.add(transformedItem);\n      }\n\n      let insertIndex = 0;\n      if (pushMode === 'insert') insertIndex = getInsertIndex(item, monitor);\n      if (pushMode === 'append') insertIndex = internalItems.length + 1;\n\n      let newItems: DraggableItem<T>[];\n\n      // Is the current being dragged is within its own list\n      if (prevIndex !== -1) {\n        if (insertIndex === prevIndex || pushMode !== 'insert') return;\n\n        newItems = internalItems.filter(({ id }) => id !== item.id);\n        newItems.splice(insertIndex, 0, transformedItem.current ?? item);\n\n        if (typeof pushMode === 'function') setInternalItems(newItems.sort(pushMode));\n        else setInternalItems(newItems);\n      } else {\n        newItems = [...internalItems];\n        newItems.splice(insertIndex, 0, getTransformedItem(item));\n\n        if (typeof pushMode === 'function') setInternalItems(newItems.sort(pushMode));\n        else setInternalItems(newItems);\n      }\n    },\n    [internalItems, pushMode, getInsertIndex, normalizeItems, triggerOnChange, removeById]\n  );\n\n  const onHover = positionItems;\n  const onDrop = positionItems;\n\n  const onBegin = useCallback(\n    (itemId: DraggableItem<T>['id']) =>\n      (): OmitStrict<DragDropListItem<T>, keyof DraggableItem<T>> => {\n        const initialIndex = internalItems.findIndex(({ id }) => id === itemId);\n\n        return {\n          removeFromCurrent: () => {\n            removeById(itemId);\n          },\n          returnToSource: (item: DraggableItem<T>) => {\n            setInternalItems(currentItems => {\n              const newItems = currentItems.filter(({ id }) => id !== itemId);\n              newItems.splice(initialIndex, 0, item);\n              return newItems;\n            });\n            normalizeItems();\n          },\n          normalizeDestination: normalizeItems,\n          changeSource: triggerOnChange,\n          sourceItemsRef: internalItemsRef,\n          changeDestination: triggerOnChange,\n          destinationItemsRef: internalItemsRef,\n          transformedItemCache: new Set([transformedItem])\n        };\n      },\n    [internalItems, normalizeItems, triggerOnChange, removeById]\n  );\n\n  const onEnd = useCallback((item: DragDropListItem<T> | undefined, monitor: DragSourceMonitor) => {\n    if (!item) return;\n\n    if (monitor.didDrop()) {\n      const sourceItems = item.sourceItemsRef!.current!;\n      const destinationItems = item.destinationItemsRef!.current!;\n\n      item.normalizeDestination?.();\n      let insertIndex;\n      if (item.changeSource !== item.changeDestination) {\n        item.changeSource?.(sourceItems);\n        insertIndex = destinationItems.findIndex(({ id }) => id === item.id);\n      }\n      item.changeDestination?.(destinationItems, insertIndex);\n    } else {\n      item.removeFromCurrent?.();\n      item.returnToSource?.(item);\n    }\n    item.transformedItemCache?.forEach(ref => {\n      ref.current = null;\n    });\n  }, []);\n\n  const emptyContent = EmptyRenderer ? <EmptyRenderer /> : null;\n\n  return (\n    <Droppable accept={accept} onHover={onHover} onDrop={onDrop}>\n      {({ dropRef }) => {\n        return (\n          <Component\n            ref={(el: HTMLElement) => {\n              dropRef(el);\n              setListEl(el);\n            }}\n            {...restProps}\n          >\n            {internalItems.length === 0\n              ? emptyContent\n              : internalItems.map(item => {\n                  return (\n                    <Draggable\n                      key={item.id}\n                      id={item.id}\n                      type={item.type}\n                      data={item.data}\n                      onBegin={onBegin(item.id)}\n                      onEnd={onEnd}\n                    >\n                      {({ dragRef, previewRef, collected }) => {\n                        return (\n                          <ItemRenderer\n                            {...{\n                              ...item,\n                              dragRef,\n                              previewRef,\n                              ...collected,\n                              isDragging: collected.isDragging || !!item.removeFromCurrent\n                            }}\n                          />\n                        );\n                      }}\n                    </Draggable>\n                  );\n                })}\n          </Component>\n        );\n      }}\n    </Droppable>\n  );\n};\n\nexport default DragDropList;\n"]}
+{"version":3,"file":"DragDropList.js","sourceRoot":"","sources":["../../../src/components/DragDropList/DragDropList.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,WAAW,EAAE,QAAQ,EAAE,MAAM,EAA+B,MAAM,OAAO,CAAC;AAGnF,OAAO,EACL,UAAU,EACV,qBAAqB,EACrB,oBAAoB,EAGpB,MAAM,EACP,MAAM,yBAAyB,CAAC;AAEjC,OAAO,SAA4B,MAAM,cAAc,CAAC;AACxD,OAAO,SAAS,MAAM,cAAc,CAAC;AAgBrC,MAAM,aAAa,GAAG,CAAC,EAAE,GAAG,EAAE,MAAM,EAAW,EAAU,EAAE,CAAC,GAAG,GAAG,CAAC,MAAM,GAAG,GAAG,CAAC,GAAG,CAAC,CAAC;AAErF,MAAM,YAAY,GAAG,CAA4B,EAC/C,EAAE,EAAE,MAAM,EACV,MAAM,EACN,KAAK,EACL,YAAY,EAAE,YAAY,EAC1B,aAAa,EAAE,aAAa,EAC5B,QAAQ,EACR,OAAO,EACP,QAAQ,GAAG,QAAQ,EACnB,QAAQ,GAAG,QAAQ,EACnB,YAAY,GAAG,KAAK,EACpB,EAAE,EAAE,SAAS,GAAG,IAAI,EACpB,GAAG,SAAS,EACwB,EAAE,EAAE;IACxC,MAAM,CAAC,aAAa,EAAE,gBAAgB,CAAC,GAAG,QAAQ,CAAwB,KAAK,CAAC,CAAC;IACjF,MAAM,YAAY,GAAG,MAAM,CAAmB,IAAI,CAAC,CAAC;IACpD,MAAM,eAAe,GAAG,MAAM,CAA0B,IAAI,CAAC,CAAC;IAC9D,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,GAAG,UAAU,EAAe,CAAC;IACtD,MAAM,QAAQ,GAAG,MAAM,EAAE,CAAC;IAC1B,MAAM,MAAM,GAAG,MAAM,IAAI,QAAQ,CAAC;IAElC,MAAM,YAAY,GAAG,WAAW,CAAC,GAAqB,EAAE;QACtD,IAAI,CAAC,MAAM,IAAI,MAAM,CAAC,QAAQ,CAAC,MAAM,KAAK,CAAC;YAAE,OAAO,IAAI,CAAC;QACzD,OAAO,CAAC,GAAG,MAAM,CAAC,QAAQ,CAAC,CAAC,GAAG,CAAC,MAAM,CAAC,EAAE;YACvC,OAAO,MAAM,CAAC,qBAAqB,EAAE,CAAC;QACxC,CAAC,CAAC,CAAC;IACL,CAAC,EAAE,CAAC,MAAM,CAAC,CAAC,CAAC;IAEb,qBAAqB,CAAC,GAAG,EAAE;QACzB,gBAAgB,CAAC,KAAK,CAAC,CAAC;IAC1B,CAAC,EAAE,CAAC,KAAK,CAAC,CAAC,CAAC;IAEZ,MAAM,gBAAgB,GAAG,MAAM,CAAC,aAAa,CAAC,CAAC;IAC/C,gBAAgB,CAAC,OAAO,GAAG,aAAa,CAAC;IAEzC,MAAM,eAAe,GAAG,oBAAoB,CAC1C,WAAW,CACT,CAAC,QAA+B,EAAE,WAAoB,EAAE,EAAE;QACxD,QAAQ,CAAC,QAAQ,EAAE,WAAW,CAAC,CAAC;IAClC,CAAC,EACD,CAAC,QAAQ,CAAC,CACX,CACF,CAAC;IAEF,MAAM,kBAAkB,GAAG,WAAW,CACpC,CAAC,IAAyB,EAAE,EAAE;QAC5B,IAAI,CAAC,OAAO,EAAE;YACZ,eAAe,CAAC,OAAO,GAAG,IAAI,CAAC;YAC/B,OAAO,IAAI,CAAC;SACb;QAED,IAAI,eAAe,CAAC,OAAO;YAAE,OAAO,eAAe,CAAC,OAAO,CAAC;QAE5D,MAAM,OAAO,GAAG;YACd,GAAG,IAAI;YACP,GAAG,OAAO,CAAC,IAAI,CAAC;YAChB,EAAE,EAAE,IAAI,CAAC,EAAE;SACZ,CAAC;QACF,eAAe,CAAC,OAAO,GAAG,OAAO,CAAC;QAClC,OAAO,OAAO,CAAC;IACjB,CAAC,EACD,CAAC,OAAO,CAAC,CACV,CAAC;IAEF,MAAM,YAAY,GAAG,WAAW,CAC9B,CAAC,MAA8B,EAAE,aAAqB,EAAE,EAAE;QACxD,MAAM,cAAc,GAAG,OAAO,QAAQ,KAAK,UAAU,CAAC,CAAC,CAAC,QAAQ,CAAC,aAAa,CAAC,CAAC,CAAC,CAAC,QAAQ,CAAC;QAC3F,IAAI,cAAc,KAAK,QAAQ,EAAE;YAC/B,MAAM,OAAO,GAAG,aAAa,CAAC,MAAM,CAAC,CAAC,EAAE,EAAE,EAAE,EAAE,EAAE,CAAC,EAAE,KAAK,MAAM,CAAC,CAAC;YAChE,eAAe,CAAC,OAAO,CAAC,CAAC;SAC1B;aAAM;YACL,gBAAgB,CAAC,KAAK,CAAC,CAAC;SACzB;IACH,CAAC,EACD,CAAC,QAAQ,EAAE,KAAK,EAAE,aAAa,EAAE,eAAe,CAAC,CAClD,CAAC;IAEF,MAAM,cAAc,GAAG,WAAW,CAChC,CAAC,IAAsB,EAAE,OAA8C,EAAU,EAAE;QACjF,YAAY,CAAC,OAAO,GAAG,YAAY,EAAE,CAAC;QACtC,MAAM,EAAE,OAAO,EAAE,SAAS,EAAE,GAAG,YAAY,CAAC;QAC5C,IAAI,WAAW,GAAG,CAAC,CAAC,CAAC;QACrB,MAAM,SAAS,GAAG,aAAa,CAAC,SAAS,CAAC,CAAC,EAAE,EAAE,EAAE,EAAE,EAAE,CAAC,EAAE,KAAK,IAAI,CAAC,EAAE,CAAC,CAAC;QAEtE,MAAM,QAAQ,GAAG,OAAO,CAAC,eAAe,EAAE,CAAC;QAC3C,IAAI,CAAC,SAAS,IAAI,CAAC,QAAQ;YAAE,OAAO,WAAW,CAAC;QAEhD,MAAM,kBAAkB,GAAG,QAAQ,CAAC,CAAC,CAAC;QACtC,MAAM,MAAM,GAAG,kBAAkB,GAAG,aAAa,CAAC,SAAS,CAAC,CAAC,CAAC,CAAC,CAAC;QAChE,MAAM,MAAM,GAAG,kBAAkB,IAAI,aAAa,CAAC,SAAS,CAAC,SAAS,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC,CAAC;QAEpF,IAAI,MAAM,EAAE;YACV,WAAW,GAAG,CAAC,CAAC;SACjB;aAAM,IAAI,MAAM,EAAE;YACjB,WAAW,GAAG,SAAS,KAAK,SAAS,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,SAAS,CAAC,MAAM,CAAC;SACjF;aAAM;YACL,SAAS,CAAC,IAAI,CAAC,CAAC,IAAI,EAAE,CAAC,EAAE,KAAK,EAAE,EAAE;gBAChC,IAAI,CAAC,KAAK,KAAK,CAAC,MAAM,GAAG,CAAC,EAAE;oBAC1B,IAAI,SAAS,KAAK,CAAC;wBAAE,WAAW,GAAG,CAAC,CAAC;oBACrC,OAAO,IAAI,CAAC;iBACb;gBACD,MAAM,YAAY,GAAG,kBAAkB,IAAI,aAAa,CAAC,IAAI,CAAC,CAAC;gBAC/D,MAAM,SAAS,GAAG,kBAAkB,GAAG,aAAa,CAAC,KAAK,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC;gBACnE,IAAI,YAAY,IAAI,SAAS,EAAE;oBAC7B,IAAI,SAAS,KAAK,CAAC,CAAC,IAAI,CAAC,IAAI,SAAS;wBAAE,WAAW,GAAG,CAAC,CAAC;;wBACnD,WAAW,GAAG,CAAC,GAAG,CAAC,CAAC;oBACzB,OAAO,IAAI,CAAC;iBACb;gBACD,OAAO,KAAK,CAAC;YACf,CAAC,CAAC,CAAC;SACJ;QAED,OAAO,WAAW,CAAC;IACrB,CAAC,EACD,CAAC,YAAY,EAAE,aAAa,CAAC,CAC9B,CAAC;IAEF,MAAM,UAAU,GAAG,WAAW,CAAC,CAAC,MAA8B,EAAQ,EAAE;QACtE,gBAAgB,CAAC,YAAY,CAAC,EAAE,CAAC,YAAY,CAAC,MAAM,CAAC,CAAC,EAAE,EAAE,EAAE,EAAE,EAAE,CAAC,EAAE,KAAK,MAAM,CAAC,CAAC,CAAC;IACnF,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,MAAM,cAAc,GAAG,WAAW,CAAC,GAAG,EAAE;QACtC,gBAAgB,CAAC,YAAY,CAAC,EAAE,CAC9B,YAAY,CAAC,GAAG,CAAC,CAAC,EAAE,EAAE,EAAE,IAAI,EAAE,IAAI,EAAE,EAAE,EAAE,CAAC,CAAC;YACxC,EAAE;YACF,IAAI;YACJ,IAAI;SACL,CAAC,CAAC,CACJ,CAAC;IACJ,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,MAAM,aAAa,GAAG,WAAW,CAC/B,CAAC,IAAyB,EAAE,OAA0B,EAAQ,EAAE;QAC9D,IAAI,CAAC,OAAO,CAAC,OAAO,EAAE,IAAI,CAAC,OAAO,CAAC,MAAM,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;YAAE,OAAO;QAErE,MAAM,SAAS,GAAG,aAAa,CAAC,SAAS,CAAC,CAAC,EAAE,EAAE,EAAE,EAAE,EAAE,CAAC,EAAE,KAAK,IAAI,CAAC,EAAE,CAAC,CAAC;QAEtE,IAAI,SAAS,KAAK,CAAC,CAAC,EAAE;YACpB,IAAI,CAAC,iBAAiB,EAAE,EAAE,CAAC;YAC3B,IAAI,CAAC,iBAAiB,GAAG,GAAG,EAAE;gBAC5B,UAAU,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;YACtB,CAAC,CAAC;SACH;QAED,IAAI,CAAC,oBAAoB,GAAG,cAAc,CAAC;QAC3C,IAAI,CAAC,iBAAiB,GAAG,eAAe,CAAC;QACzC,IAAI,CAAC,mBAAmB,GAAG,gBAAgB,CAAC;QAC5C,IAAI,CAAC,oBAAoB,EAAE,GAAG,CAAC,eAAe,CAAC,CAAC;QAChD,IAAI,CAAC,aAAa,GAAG,MAAM,CAAC;QAE5B,IAAI,WAAW,GAAG,CAAC,CAAC;QACpB,IAAI,QAAQ,KAAK,QAAQ;YAAE,WAAW,GAAG,cAAc,CAAC,IAAI,EAAE,OAAO,CAAC,CAAC;QACvE,IAAI,QAAQ,KAAK,QAAQ;YAAE,WAAW,GAAG,aAAa,CAAC,MAAM,GAAG,CAAC,CAAC;QAElE,IAAI,QAA4B,CAAC;QAEjC,sDAAsD;QACtD,IAAI,SAAS,KAAK,CAAC,CAAC,EAAE;YACpB,IAAI,WAAW,KAAK,SAAS,IAAI,QAAQ,KAAK,QAAQ;gBAAE,OAAO;YAE/D,QAAQ,GAAG,aAAa,CAAC,MAAM,CAAC,CAAC,EAAE,EAAE,EAAE,EAAE,EAAE,CAAC,EAAE,KAAK,IAAI,CAAC,EAAE,CAAC,CAAC;YAC5D,QAAQ,CAAC,MAAM,CAAC,WAAW,EAAE,CAAC,EAAE,eAAe,CAAC,OAAO,IAAI,IAAI,CAAC,CAAC;YAEjE,IAAI,OAAO,QAAQ,KAAK,UAAU;gBAAE,gBAAgB,CAAC,QAAQ,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC;;gBACzE,gBAAgB,CAAC,QAAQ,CAAC,CAAC;SACjC;aAAM;YACL,QAAQ,GAAG,CAAC,GAAG,aAAa,CAAC,CAAC;YAC9B,QAAQ,CAAC,MAAM,CAAC,WAAW,EAAE,CAAC,EAAE,kBAAkB,CAAC,IAAI,CAAC,CAAC,CAAC;YAE1D,IAAI,OAAO,QAAQ,KAAK,UAAU;gBAAE,gBAAgB,CAAC,QAAQ,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC;;gBACzE,gBAAgB,CAAC,QAAQ,CAAC,CAAC;SACjC;IACH,CAAC,EACD,CAAC,aAAa,EAAE,QAAQ,EAAE,cAAc,EAAE,cAAc,EAAE,eAAe,EAAE,UAAU,EAAE,MAAM,CAAC,CAC/F,CAAC;IAEF,MAAM,OAAO,GAAG,aAAa,CAAC;IAC9B,MAAM,MAAM,GAAG,aAAa,CAAC;IAE7B,MAAM,OAAO,GAAG,WAAW,CACzB,CAAC,MAA8B,EAAE,EAAE,CACjC,GAA4D,EAAE;QAC5D,MAAM,YAAY,GAAG,aAAa,CAAC,SAAS,CAAC,CAAC,EAAE,EAAE,EAAE,EAAE,EAAE,CAAC,EAAE,KAAK,MAAM,CAAC,CAAC;QAExE,OAAO;YACL,cAAc,EAAE,CAAC,IAAsB,EAAE,EAAE;gBACzC,gBAAgB,CAAC,YAAY,CAAC,EAAE;oBAC9B,MAAM,QAAQ,GAAG,YAAY,CAAC,MAAM,CAAC,CAAC,EAAE,EAAE,EAAE,EAAE,EAAE,CAAC,EAAE,KAAK,MAAM,CAAC,CAAC;oBAChE,QAAQ,CAAC,MAAM,CAAC,YAAY,EAAE,CAAC,EAAE,IAAI,CAAC,CAAC;oBACvC,OAAO,QAAQ,CAAC;gBAClB,CAAC,CAAC,CAAC;gBACH,cAAc,EAAE,CAAC;YACnB,CAAC;YACD,oBAAoB,EAAE,cAAc;YACpC,YAAY;YACZ,iBAAiB,EAAE,eAAe;YAClC,mBAAmB,EAAE,gBAAgB;YACrC,oBAAoB,EAAE,IAAI,GAAG,CAAC,CAAC,eAAe,CAAC,CAAC;YAChD,QAAQ,EAAE,MAAM;YAChB,aAAa,EAAE,MAAM;SACtB,CAAC;IACJ,CAAC,EACH,CAAC,aAAa,EAAE,cAAc,EAAE,eAAe,EAAE,YAAY,EAAE,UAAU,EAAE,MAAM,CAAC,CACnF,CAAC;IAEF,MAAM,KAAK,GAAG,WAAW,CACvB,CAAC,IAAqC,EAAE,OAA0B,EAAE,EAAE;QACpE,IAAI,CAAC,IAAI;YAAE,OAAO;QAElB,IAAI,OAAO,CAAC,OAAO,EAAE,EAAE;YACrB,MAAM,EAAE,EAAE,EAAE,MAAM,EAAE,QAAQ,EAAE,aAAa,EAAE,GAAG,IAAI,CAAC;YACrD,IAAI,WAAW,CAAC;YAChB,IAAI,CAAC,oBAAoB,EAAE,EAAE,CAAC;YAC9B,MAAM,gBAAgB,GAAG,IAAI,CAAC,mBAAoB,CAAC,OAAQ,CAAC;YAC5D,IAAI,QAAQ,IAAI,aAAa,IAAI,QAAQ,KAAK,aAAa,EAAE;gBAC3D,IAAI,CAAC,YAAY,EAAE,CAAC,MAAM,EAAE,aAAa,CAAC,CAAC;gBAC3C,WAAW,GAAG,gBAAgB,CAAC,SAAS,CAAC,CAAC,EAAE,EAAE,EAAE,EAAE,EAAE,CAAC,EAAE,KAAK,MAAM,CAAC,CAAC;aACrE;YACD,IAAI,CAAC,iBAAiB,EAAE,CAAC,gBAAgB,EAAE,WAAW,CAAC,CAAC;SACzD;aAAM;YACL,IAAI,CAAC,iBAAiB,EAAE,EAAE,CAAC;YAC3B,IAAI,YAAY,EAAE;gBAChB,UAAU,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;aACrB;iBAAM;gBACL,IAAI,CAAC,cAAc,EAAE,CAAC,IAAI,CAAC,CAAC;aAC7B;SACF;QACD,IAAI,CAAC,oBAAoB,EAAE,OAAO,CAAC,GAAG,CAAC,EAAE;YACvC,GAAG,CAAC,OAAO,GAAG,IAAI,CAAC;QACrB,CAAC,CAAC,CAAC;IACL,CAAC,EACD,CAAC,YAAY,CAAC,CACf,CAAC;IAEF,MAAM,YAAY,GAAG,aAAa,CAAC,CAAC,CAAC,KAAC,aAAa,KAAG,CAAC,CAAC,CAAC,IAAI,CAAC;IAE9D,OAAO,CACL,KAAC,SAAS,IAAC,MAAM,EAAE,MAAM,EAAE,OAAO,EAAE,OAAO,EAAE,MAAM,EAAE,MAAM,YACxD,CAAC,EAAE,OAAO,EAAE,EAAE,EAAE;YACf,OAAO,CACL,KAAC,SAAS,IACR,GAAG,EAAE,CAAC,EAAe,EAAE,EAAE;oBACvB,OAAO,CAAC,EAAE,CAAC,CAAC;oBACZ,SAAS,CAAC,EAAE,CAAC,CAAC;gBAChB,CAAC,KACG,SAAS,YAEZ,aAAa,CAAC,MAAM,KAAK,CAAC;oBACzB,CAAC,CAAC,YAAY;oBACd,CAAC,CAAC,aAAa,CAAC,GAAG,CAAC,IAAI,CAAC,EAAE;wBACvB,OAAO,CACL,KAAC,SAAS,IAER,EAAE,EAAE,IAAI,CAAC,EAAE,EACX,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,OAAO,EAAE,OAAO,CAAC,IAAI,CAAC,EAAE,CAAC,EACzB,KAAK,EAAE,KAAK,YAEX,CAAC,EAAE,OAAO,EAAE,UAAU,EAAE,SAAS,EAAE,EAAE,EAAE;gCACtC,OAAO,CACL,KAAC,YAAY,OACP;wCACF,GAAG,IAAI;wCACP,OAAO;wCACP,UAAU;wCACV,GAAG,SAAS;wCACZ,UAAU,EAAE,CAAC,CAAC,IAAI,CAAC,QAAQ;qCAC5B,GACD,CACH,CAAC;4BACJ,CAAC,IAnBI,IAAI,CAAC,EAAE,CAoBF,CACb,CAAC;oBACJ,CAAC,CAAC,GACI,CACb,CAAC;QACJ,CAAC,GACS,CACb,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,YAAY,CAAC","sourcesContent":["import { useCallback, useState, useRef, RefObject, MutableRefObject } from 'react';\nimport { DragSourceMonitor, DropTargetMonitor } from 'react-dnd';\n\nimport {\n  useElement,\n  useAfterInitialEffect,\n  useTriggerableEffect,\n  ForwardProps,\n  OmitStrict,\n  useUID\n} from '@pega/cosmos-react-core';\n\nimport Draggable, { DraggableItem } from '../Draggable';\nimport Droppable from '../Droppable';\n\nimport { DragDropListProps } from './DragDropList.types';\n\ninterface DragDropListItem<T extends object = object> extends DraggableItem<T> {\n  removeFromCurrent?: () => void;\n  returnToSource?: (item: DraggableItem<T>) => void;\n  normalizeDestination?: () => void;\n  changeSource?: (itemId: DraggableItem<T>['id'], destinationId: string) => void;\n  changeDestination?: (items: DragDropListItem<T>[], insertIndex?: number) => void;\n  destinationItemsRef?: RefObject<DragDropListItem<T>[]>;\n  transformedItemCache?: Set<MutableRefObject<DraggableItem<T> | null>>;\n  sourceId?: string;\n  destinationId?: string;\n}\n\nconst middleYOfRect = ({ top, bottom }: DOMRect): number => top + (bottom - top) / 2;\n\nconst DragDropList = <T extends object = object>({\n  id: idProp,\n  accept,\n  items,\n  itemRenderer: ItemRenderer,\n  emptyRenderer: EmptyRenderer,\n  onChange,\n  onEnter,\n  pullMode = 'remove',\n  pushMode = 'insert',\n  dragToRemove = false,\n  as: Component = 'ul',\n  ...restProps\n}: DragDropListProps<T> & ForwardProps) => {\n  const [internalItems, setInternalItems] = useState<DragDropListItem<T>[]>(items);\n  const itemRectsRef = useRef<DOMRect[] | null>(null);\n  const transformedItem = useRef<DraggableItem<T> | null>(null);\n  const [listEl, setListEl] = useElement<HTMLElement>();\n  const uniqueId = useUID();\n  const listId = idProp ?? uniqueId;\n\n  const getItemRects = useCallback((): DOMRect[] | null => {\n    if (!listEl || listEl.children.length === 0) return null;\n    return [...listEl.children].map(itemEl => {\n      return itemEl.getBoundingClientRect();\n    });\n  }, [listEl]);\n\n  useAfterInitialEffect(() => {\n    setInternalItems(items);\n  }, [items]);\n\n  const internalItemsRef = useRef(internalItems);\n  internalItemsRef.current = internalItems;\n\n  const triggerOnChange = useTriggerableEffect(\n    useCallback(\n      (newItems: DragDropListItem<T>[], insertIndex?: number) => {\n        onChange(newItems, insertIndex);\n      },\n      [onChange]\n    )\n  );\n\n  const getTransformedItem = useCallback(\n    (item: DragDropListItem<T>) => {\n      if (!onEnter) {\n        transformedItem.current = null;\n        return item;\n      }\n\n      if (transformedItem.current) return transformedItem.current;\n\n      const newItem = {\n        ...item,\n        ...onEnter(item),\n        id: item.id\n      };\n      transformedItem.current = newItem;\n      return newItem;\n    },\n    [onEnter]\n  );\n\n  const changeSource = useCallback(\n    (itemId: DraggableItem<T>['id'], destinationId: string) => {\n      const sourcePullMode = typeof pullMode === 'function' ? pullMode(destinationId) : pullMode;\n      if (sourcePullMode === 'remove') {\n        const newList = internalItems.filter(({ id }) => id !== itemId);\n        triggerOnChange(newList);\n      } else {\n        setInternalItems(items);\n      }\n    },\n    [pullMode, items, internalItems, triggerOnChange]\n  );\n\n  const getInsertIndex = useCallback(\n    (item: DraggableItem<T>, monitor: DropTargetMonitor | DragSourceMonitor): number => {\n      itemRectsRef.current = getItemRects();\n      const { current: itemRects } = itemRectsRef;\n      let insertIndex = -1;\n      const prevIndex = internalItems.findIndex(({ id }) => id === item.id);\n\n      const clientXY = monitor.getClientOffset();\n      if (!itemRects || !clientXY) return insertIndex;\n\n      const dragPreviewRectTop = clientXY.y;\n      const atHead = dragPreviewRectTop < middleYOfRect(itemRects[0]);\n      const atTail = dragPreviewRectTop >= middleYOfRect(itemRects[itemRects.length - 1]);\n\n      if (atHead) {\n        insertIndex = 0;\n      } else if (atTail) {\n        insertIndex = prevIndex === itemRects.length - 1 ? prevIndex : itemRects.length;\n      } else {\n        itemRects.some((rect, i, rects) => {\n          if (i === rects.length - 1) {\n            if (prevIndex === i) insertIndex = i;\n            return true;\n          }\n          const belowCurrent = dragPreviewRectTop >= middleYOfRect(rect);\n          const aboveNext = dragPreviewRectTop < middleYOfRect(rects[i + 1]);\n          if (belowCurrent && aboveNext) {\n            if (prevIndex !== -1 && i >= prevIndex) insertIndex = i;\n            else insertIndex = i + 1;\n            return true;\n          }\n          return false;\n        });\n      }\n\n      return insertIndex;\n    },\n    [getItemRects, internalItems]\n  );\n\n  const removeById = useCallback((itemId: DraggableItem<T>['id']): void => {\n    setInternalItems(currentItems => currentItems.filter(({ id }) => id !== itemId));\n  }, []);\n\n  const normalizeItems = useCallback(() => {\n    setInternalItems(currentItems =>\n      currentItems.map(({ id, data, type }) => ({\n        id,\n        data,\n        type\n      }))\n    );\n  }, []);\n\n  const positionItems = useCallback(\n    (item: DragDropListItem<T>, monitor: DropTargetMonitor): void => {\n      if (!monitor.canDrop() || !monitor.isOver({ shallow: true })) return;\n\n      const prevIndex = internalItems.findIndex(({ id }) => id === item.id);\n\n      if (prevIndex === -1) {\n        item.removeFromCurrent?.();\n        item.removeFromCurrent = () => {\n          removeById(item.id);\n        };\n      }\n\n      item.normalizeDestination = normalizeItems;\n      item.changeDestination = triggerOnChange;\n      item.destinationItemsRef = internalItemsRef;\n      item.transformedItemCache?.add(transformedItem);\n      item.destinationId = listId;\n\n      let insertIndex = 0;\n      if (pushMode === 'insert') insertIndex = getInsertIndex(item, monitor);\n      if (pushMode === 'append') insertIndex = internalItems.length + 1;\n\n      let newItems: DraggableItem<T>[];\n\n      // Is the current being dragged is within its own list\n      if (prevIndex !== -1) {\n        if (insertIndex === prevIndex || pushMode !== 'insert') return;\n\n        newItems = internalItems.filter(({ id }) => id !== item.id);\n        newItems.splice(insertIndex, 0, transformedItem.current ?? item);\n\n        if (typeof pushMode === 'function') setInternalItems(newItems.sort(pushMode));\n        else setInternalItems(newItems);\n      } else {\n        newItems = [...internalItems];\n        newItems.splice(insertIndex, 0, getTransformedItem(item));\n\n        if (typeof pushMode === 'function') setInternalItems(newItems.sort(pushMode));\n        else setInternalItems(newItems);\n      }\n    },\n    [internalItems, pushMode, getInsertIndex, normalizeItems, triggerOnChange, removeById, listId]\n  );\n\n  const onHover = positionItems;\n  const onDrop = positionItems;\n\n  const onBegin = useCallback(\n    (itemId: DraggableItem<T>['id']) =>\n      (): OmitStrict<DragDropListItem<T>, keyof DraggableItem<T>> => {\n        const initialIndex = internalItems.findIndex(({ id }) => id === itemId);\n\n        return {\n          returnToSource: (item: DraggableItem<T>) => {\n            setInternalItems(currentItems => {\n              const newItems = currentItems.filter(({ id }) => id !== itemId);\n              newItems.splice(initialIndex, 0, item);\n              return newItems;\n            });\n            normalizeItems();\n          },\n          normalizeDestination: normalizeItems,\n          changeSource,\n          changeDestination: triggerOnChange,\n          destinationItemsRef: internalItemsRef,\n          transformedItemCache: new Set([transformedItem]),\n          sourceId: listId,\n          destinationId: listId\n        };\n      },\n    [internalItems, normalizeItems, triggerOnChange, changeSource, removeById, listId]\n  );\n\n  const onEnd = useCallback(\n    (item: DragDropListItem<T> | undefined, monitor: DragSourceMonitor) => {\n      if (!item) return;\n\n      if (monitor.didDrop()) {\n        const { id: itemId, sourceId, destinationId } = item;\n        let insertIndex;\n        item.normalizeDestination?.();\n        const destinationItems = item.destinationItemsRef!.current!;\n        if (sourceId && destinationId && sourceId !== destinationId) {\n          item.changeSource?.(itemId, destinationId);\n          insertIndex = destinationItems.findIndex(({ id }) => id === itemId);\n        }\n        item.changeDestination?.(destinationItems, insertIndex);\n      } else {\n        item.removeFromCurrent?.();\n        if (dragToRemove) {\n          removeById(item.id);\n        } else {\n          item.returnToSource?.(item);\n        }\n      }\n      item.transformedItemCache?.forEach(ref => {\n        ref.current = null;\n      });\n    },\n    [dragToRemove]\n  );\n\n  const emptyContent = EmptyRenderer ? <EmptyRenderer /> : null;\n\n  return (\n    <Droppable accept={accept} onHover={onHover} onDrop={onDrop}>\n      {({ dropRef }) => {\n        return (\n          <Component\n            ref={(el: HTMLElement) => {\n              dropRef(el);\n              setListEl(el);\n            }}\n            {...restProps}\n          >\n            {internalItems.length === 0\n              ? emptyContent\n              : internalItems.map(item => {\n                  return (\n                    <Draggable\n                      key={item.id}\n                      id={item.id}\n                      type={item.type}\n                      data={item.data}\n                      onBegin={onBegin(item.id)}\n                      onEnd={onEnd}\n                    >\n                      {({ dragRef, previewRef, collected }) => {\n                        return (\n                          <ItemRenderer\n                            {...{\n                              ...item,\n                              dragRef,\n                              previewRef,\n                              ...collected,\n                              isDragging: !!item.sourceId\n                            }}\n                          />\n                        );\n                      }}\n                    </Draggable>\n                  );\n                })}\n          </Component>\n        );\n      }}\n    </Droppable>\n  );\n};\n\nexport default DragDropList;\n"]}

package/lib/components/DragDropList/DragDropList.types.d.ts

@@ -7,6 +7,8 @@ export interface ItemRendererProps<T extends object = object> extends DraggableI
     previewRef: RefCallback<HTMLElement>;
 }
 export interface DragDropListProps<T extends object = object> extends AsProp, BaseProps, NoChildrenProp {
+    /** Unique identifier for the list */
+    id?: string;
     /** Type of item allowed to be dropped on this list (useful when there is multiple lists that share data). */
     accept: DroppableProps['accept'];
     /** Array of data objects used for the list. */
@@ -14,7 +16,7 @@ export interface DragDropListProps<T extends object = object> extends AsProp, Ba
     /**
      * @default "remove"
      */
-    pullMode?: 'clone' | 'remove';
+    pullMode?: 'clone' | 'remove' | ((destinationId: string) => 'clone' | 'remove');
     /**
      * @default "insert"
      */
@@ -26,6 +28,11 @@ export interface DragDropListProps<T extends object = object> extends AsProp, Ba
      * @default false
      */
     dragHandles?: boolean;
+    /**
+     * Enables "Drag to remove from list" behavior
+     * @default false
+     */
+    dragToRemove?: boolean;
     /** User defined function(Component) that should return content for when the list is empty. */
     emptyRenderer?: ComponentType;
     /** Called when list data is updated. "insertIndex" is only defined when a new item has been added to the list. */

package/lib/components/DragDropList/DragDropList.types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"DragDropList.types.d.ts","sourceRoot":"","sources":["../../../src/components/DragDropList/DragDropList.types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,aAAa,EAAE,MAAM,OAAO,CAAC;AAEnD,OAAO,EAAE,MAAM,EAAE,SAAS,EAAE,cAAc,EAAE,MAAM,yBAAyB,CAAC;AAE5E,OAAO,EAAE,aAAa,EAAE,uBAAuB,EAAE,MAAM,cAAc,CAAC;AACtE,OAAO,EAAE,cAAc,EAAE,MAAM,cAAc,CAAC;AAE9C,MAAM,WAAW,iBAAiB,CAAC,CAAC,SAAS,MAAM,GAAG,MAAM,CAC1D,SAAQ,aAAa,CAAC,CAAC,CAAC,EACtB,uBAAuB;IACzB,OAAO,EAAE,WAAW,CAAC,WAAW,CAAC,CAAC;IAClC,UAAU,EAAE,WAAW,CAAC,WAAW,CAAC,CAAC;CACtC;AAED,MAAM,WAAW,iBAAiB,CAAC,CAAC,SAAS,MAAM,GAAG,MAAM,CAC1D,SAAQ,MAAM,EACZ,SAAS,EACT,cAAc;IAChB,6GAA6G;IAC7G,MAAM,EAAE,cAAc,CAAC,QAAQ,CAAC,CAAC;IACjC,+CAA+C;IAC/C,KAAK,EAAE,aAAa,CAAC,CAAC,CAAC,EAAE,CAAC;IAC1B;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,GAAG,QAAQ,CAAC;IAC9B;;OAEG;IACH,QAAQ,CAAC,EACL,QAAQ,GACR,SAAS,GACT,QAAQ,GACR,CAAC,CAAC,CAAC,EAAE,aAAa,CAAC,CAAC,CAAC,EAAE,CAAC,EAAE,aAAa,CAAC,CAAC,CAAC,KAAK,MAAM,CAAC,CAAC;IAC3D,kFAAkF;IAClF,YAAY,EAAE,aAAa,CAAC,iBAAiB,CAAC,CAAC,CAAC,CAAC,CAAC;IAClD;;;OAGG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,8FAA8F;IAC9F,aAAa,CAAC,EAAE,aAAa,CAAC;IAC9B,kHAAkH;IAClH,QAAQ,EAAE,CAAC,KAAK,EAAE,iBAAiB,CAAC,CAAC,CAAC,CAAC,OAAO,CAAC,EAAE,WAAW,CAAC,EAAE,MAAM,KAAK,IAAI,CAAC;IAC/E,oGAAoG;IACpG,OAAO,CAAC,EAAE,CAAC,IAAI,EAAE,aAAa,CAAC,CAAC,CAAC,KAAK,aAAa,CAAC,CAAC,CAAC,CAAC;CACxD"}
+{"version":3,"file":"DragDropList.types.d.ts","sourceRoot":"","sources":["../../../src/components/DragDropList/DragDropList.types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,aAAa,EAAE,MAAM,OAAO,CAAC;AAEnD,OAAO,EAAE,MAAM,EAAE,SAAS,EAAE,cAAc,EAAE,MAAM,yBAAyB,CAAC;AAE5E,OAAO,EAAE,aAAa,EAAE,uBAAuB,EAAE,MAAM,cAAc,CAAC;AACtE,OAAO,EAAE,cAAc,EAAE,MAAM,cAAc,CAAC;AAE9C,MAAM,WAAW,iBAAiB,CAAC,CAAC,SAAS,MAAM,GAAG,MAAM,CAC1D,SAAQ,aAAa,CAAC,CAAC,CAAC,EACtB,uBAAuB;IACzB,OAAO,EAAE,WAAW,CAAC,WAAW,CAAC,CAAC;IAClC,UAAU,EAAE,WAAW,CAAC,WAAW,CAAC,CAAC;CACtC;AAED,MAAM,WAAW,iBAAiB,CAAC,CAAC,SAAS,MAAM,GAAG,MAAM,CAC1D,SAAQ,MAAM,EACZ,SAAS,EACT,cAAc;IAChB,qCAAqC;IACrC,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,6GAA6G;IAC7G,MAAM,EAAE,cAAc,CAAC,QAAQ,CAAC,CAAC;IACjC,+CAA+C;IAC/C,KAAK,EAAE,aAAa,CAAC,CAAC,CAAC,EAAE,CAAC;IAC1B;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,CAAC,CAAC,aAAa,EAAE,MAAM,KAAK,OAAO,GAAG,QAAQ,CAAC,CAAC;IAChF;;OAEG;IACH,QAAQ,CAAC,EACL,QAAQ,GACR,SAAS,GACT,QAAQ,GACR,CAAC,CAAC,CAAC,EAAE,aAAa,CAAC,CAAC,CAAC,EAAE,CAAC,EAAE,aAAa,CAAC,CAAC,CAAC,KAAK,MAAM,CAAC,CAAC;IAC3D,kFAAkF;IAClF,YAAY,EAAE,aAAa,CAAC,iBAAiB,CAAC,CAAC,CAAC,CAAC,CAAC;IAClD;;;OAGG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB;;;OAGG;IACH,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,8FAA8F;IAC9F,aAAa,CAAC,EAAE,aAAa,CAAC;IAC9B,kHAAkH;IAClH,QAAQ,EAAE,CAAC,KAAK,EAAE,iBAAiB,CAAC,CAAC,CAAC,CAAC,OAAO,CAAC,EAAE,WAAW,CAAC,EAAE,MAAM,KAAK,IAAI,CAAC;IAC/E,oGAAoG;IACpG,OAAO,CAAC,EAAE,CAAC,IAAI,EAAE,aAAa,CAAC,CAAC,CAAC,KAAK,aAAa,CAAC,CAAC,CAAC,CAAC;CACxD"}

package/lib/components/DragDropList/DragDropList.types.js.map

@@ -1 +1 @@
-{"version":3,"file":"DragDropList.types.js","sourceRoot":"","sources":["../../../src/components/DragDropList/DragDropList.types.ts"],"names":[],"mappings":"","sourcesContent":["import { RefCallback, ComponentType } from 'react';\n\nimport { AsProp, BaseProps, NoChildrenProp } from '@pega/cosmos-react-core';\n\nimport { DraggableItem, DraggableCollectedProps } from '../Draggable';\nimport { DroppableProps } from '../Droppable';\n\nexport interface ItemRendererProps<T extends object = object>\n  extends DraggableItem<T>,\n    DraggableCollectedProps {\n  dragRef: RefCallback<HTMLElement>;\n  previewRef: RefCallback<HTMLElement>;\n}\n\nexport interface DragDropListProps<T extends object = object>\n  extends AsProp,\n    BaseProps,\n    NoChildrenProp {\n  /** Type of item allowed to be dropped on this list (useful when there is multiple lists that share data). */\n  accept: DroppableProps['accept'];\n  /** Array of data objects used for the list. */\n  items: DraggableItem<T>[];\n  /**\n   * @default \"remove\"\n   */\n  pullMode?: 'clone' | 'remove';\n  /**\n   * @default \"insert\"\n   */\n  pushMode?:\n    | 'insert'\n    | 'prepend'\n    | 'append'\n    | ((a: DraggableItem<T>, b: DraggableItem<T>) => number);\n  /** User defined function that should return content for the draggable element. */\n  itemRenderer: ComponentType<ItemRendererProps<T>>;\n  /**\n   * Enable drag handle elements for each of the list items. By default the entire element is draggable.\n   * @default false\n   */\n  dragHandles?: boolean;\n  /** User defined function(Component) that should return content for when the list is empty. */\n  emptyRenderer?: ComponentType;\n  /** Called when list data is updated. \"insertIndex\" is only defined when a new item has been added to the list. */\n  onChange: (items: DragDropListProps<T>['items'], insertIndex?: number) => void;\n  /** Called when an item enters a list. Allows for transformation of the item to fit the new list. */\n  onEnter?: (item: DraggableItem<T>) => DraggableItem<T>;\n}\n"]}
+{"version":3,"file":"DragDropList.types.js","sourceRoot":"","sources":["../../../src/components/DragDropList/DragDropList.types.ts"],"names":[],"mappings":"","sourcesContent":["import { RefCallback, ComponentType } from 'react';\n\nimport { AsProp, BaseProps, NoChildrenProp } from '@pega/cosmos-react-core';\n\nimport { DraggableItem, DraggableCollectedProps } from '../Draggable';\nimport { DroppableProps } from '../Droppable';\n\nexport interface ItemRendererProps<T extends object = object>\n  extends DraggableItem<T>,\n    DraggableCollectedProps {\n  dragRef: RefCallback<HTMLElement>;\n  previewRef: RefCallback<HTMLElement>;\n}\n\nexport interface DragDropListProps<T extends object = object>\n  extends AsProp,\n    BaseProps,\n    NoChildrenProp {\n  /** Unique identifier for the list */\n  id?: string;\n  /** Type of item allowed to be dropped on this list (useful when there is multiple lists that share data). */\n  accept: DroppableProps['accept'];\n  /** Array of data objects used for the list. */\n  items: DraggableItem<T>[];\n  /**\n   * @default \"remove\"\n   */\n  pullMode?: 'clone' | 'remove' | ((destinationId: string) => 'clone' | 'remove');\n  /**\n   * @default \"insert\"\n   */\n  pushMode?:\n    | 'insert'\n    | 'prepend'\n    | 'append'\n    | ((a: DraggableItem<T>, b: DraggableItem<T>) => number);\n  /** User defined function that should return content for the draggable element. */\n  itemRenderer: ComponentType<ItemRendererProps<T>>;\n  /**\n   * Enable drag handle elements for each of the list items. By default the entire element is draggable.\n   * @default false\n   */\n  dragHandles?: boolean;\n  /**\n   * Enables \"Drag to remove from list\" behavior\n   * @default false\n   */\n  dragToRemove?: boolean;\n  /** User defined function(Component) that should return content for when the list is empty. */\n  emptyRenderer?: ComponentType;\n  /** Called when list data is updated. \"insertIndex\" is only defined when a new item has been added to the list. */\n  onChange: (items: DragDropListProps<T>['items'], insertIndex?: number) => void;\n  /** Called when an item enters a list. Allows for transformation of the item to fit the new list. */\n  onEnter?: (item: DraggableItem<T>) => DraggableItem<T>;\n}\n"]}

package/lib/components/DragDropManager/DragDropManager.d.ts

@@ -1,6 +1,7 @@
 import { FunctionComponent, ReactNode } from 'react';
 export interface DragDropManagerProps {
     children: ReactNode;
+    rootElement?: Node;
 }
 declare const DragDropManager: FunctionComponent<DragDropManagerProps>;
 export default DragDropManager;

package/lib/components/DragDropManager/DragDropManager.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"DragDropManager.d.ts","sourceRoot":"","sources":["../../../src/components/DragDropManager/DragDropManager.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAIrD,MAAM,WAAW,oBAAoB;IACnC,QAAQ,EAAE,SAAS,CAAC;CACrB;AAED,QAAA,MAAM,eAAe,EAAE,iBAAiB,CAAC,oBAAoB,CAI5D,CAAC;AAEF,eAAe,eAAe,CAAC"}
+{"version":3,"file":"DragDropManager.d.ts","sourceRoot":"","sources":["../../../src/components/DragDropManager/DragDropManager.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAIrD,MAAM,WAAW,oBAAoB;IACnC,QAAQ,EAAE,SAAS,CAAC;IACpB,WAAW,CAAC,EAAE,IAAI,CAAC;CACpB;AAED,QAAA,MAAM,eAAe,EAAE,iBAAiB,CAAC,oBAAoB,CAS5D,CAAC;AAEF,eAAe,eAAe,CAAC"}

package/lib/components/DragDropManager/DragDropManager.js

@@ -1,8 +1,8 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { DndProvider } from 'react-dnd';
 import { HTML5Backend } from 'react-dnd-html5-backend';
-const DragDropManager = ({ children }) => {
-    return _jsx(DndProvider, { backend: HTML5Backend, children: children });
+const DragDropManager = ({ children, rootElement }) => {
+    return (_jsx(DndProvider, { backend: HTML5Backend, options: { rootElement }, children: children }));
 };
 export default DragDropManager;
 //# sourceMappingURL=DragDropManager.js.map

package/lib/components/DragDropManager/DragDropManager.js.map

@@ -1 +1 @@
-{"version":3,"file":"DragDropManager.js","sourceRoot":"","sources":["../../../src/components/DragDropManager/DragDropManager.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,WAAW,EAAE,MAAM,WAAW,CAAC;AACxC,OAAO,EAAE,YAAY,EAAE,MAAM,yBAAyB,CAAC;AAMvD,MAAM,eAAe,GAA4C,CAAC,EAChE,QAAQ,EACa,EAAE,EAAE;IACzB,OAAO,KAAC,WAAW,IAAC,OAAO,EAAE,YAAY,YAAG,QAAQ,GAAe,CAAC;AACtE,CAAC,CAAC;AAEF,eAAe,eAAe,CAAC","sourcesContent":["import { FunctionComponent, ReactNode } from 'react';\nimport { DndProvider } from 'react-dnd';\nimport { HTML5Backend } from 'react-dnd-html5-backend';\n\nexport interface DragDropManagerProps {\n  children: ReactNode;\n}\n\nconst DragDropManager: FunctionComponent<DragDropManagerProps> = ({\n  children\n}: DragDropManagerProps) => {\n  return <DndProvider backend={HTML5Backend}>{children}</DndProvider>;\n};\n\nexport default DragDropManager;\n"]}
+{"version":3,"file":"DragDropManager.js","sourceRoot":"","sources":["../../../src/components/DragDropManager/DragDropManager.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,WAAW,EAAE,MAAM,WAAW,CAAC;AACxC,OAAO,EAAE,YAAY,EAAE,MAAM,yBAAyB,CAAC;AAOvD,MAAM,eAAe,GAA4C,CAAC,EAChE,QAAQ,EACR,WAAW,EACU,EAAE,EAAE;IACzB,OAAO,CACL,KAAC,WAAW,IAAC,OAAO,EAAE,YAAY,EAAE,OAAO,EAAE,EAAE,WAAW,EAAE,YACzD,QAAQ,GACG,CACf,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,eAAe,CAAC","sourcesContent":["import { FunctionComponent, ReactNode } from 'react';\nimport { DndProvider } from 'react-dnd';\nimport { HTML5Backend } from 'react-dnd-html5-backend';\n\nexport interface DragDropManagerProps {\n  children: ReactNode;\n  rootElement?: Node;\n}\n\nconst DragDropManager: FunctionComponent<DragDropManagerProps> = ({\n  children,\n  rootElement\n}: DragDropManagerProps) => {\n  return (\n    <DndProvider backend={HTML5Backend} options={{ rootElement }}>\n      {children}\n    </DndProvider>\n  );\n};\n\nexport default DragDropManager;\n"]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pega/cosmos-react-dnd",
-  "version": "4.0.0-dev.5.1",
+  "version": "4.0.0-dev.6.1",
   "author": "Pegasystems",
   "license": "SEE LICENSE IN LICENSE",
   "repository": {
@@ -20,7 +20,7 @@
     "build": "tsc -b"
   },
   "dependencies": {
-    "@pega/cosmos-react-core": "4.0.0-dev.5.1",
+    "@pega/cosmos-react-core": "4.0.0-dev.6.1",
     "@types/react": "^16.14.24 || ^17.0.38",
     "@types/react-dom": "^16.9.14 || ^17.0.11",
     "@types/styled-components": "^5.1.26",