@pega/cosmos-react-dnd 2.0.0-dev.2.1 → 2.0.0-dev.20.0

package/lib/components/{DragDrop → DragDropList}/DragDropList.d.ts

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

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

@@ -0,0 +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;AAYzD,QAAA,MAAM,YAAY,yNA2NjB,CAAC;AAEF,eAAe,YAAY,CAAC"}

package/lib/components/{DragDrop → DragDropList}/DragDropList.js

@@ -1,7 +1,8 @@
-import React, { useCallback, useState, useRef } from 'react';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useCallback, useState, useRef } from 'react';
 import { useElement, useAfterInitialEffect, useTriggerableLayoutEffect } from '@pega/cosmos-react-core';
-import Draggable from './Draggable';
-import Droppable from './Droppable';
+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, pullMode = 'remove', pushMode = 'insert', as: Component = 'ul', ...restProps }) => {
     const [internalItems, setInternalItems] = useState(items);
@@ -57,12 +58,12 @@ const DragDropList = ({ accept, items, itemRenderer: ItemRenderer, emptyRenderer
             });
         }
         return insertIndex;
-    }, [getItemRects, internalItems, itemRectsRef.current]);
+    }, [getItemRects, internalItems]);
     const removeById = useCallback((itemId) => {
         if (pullMode === 'remove') {
             setInternalItems(currentItems => currentItems.filter(({ id }) => id !== itemId));
         }
-    }, [internalItems, pullMode]);
+    }, [pullMode]);
     const normalizeItems = useCallback(() => {
         setInternalItems(currentItems => currentItems.map(({ id, data, type }) => ({
             id,
@@ -71,12 +72,11 @@ const DragDropList = ({ accept, items, itemRenderer: ItemRenderer, emptyRenderer
         })));
     }, []);
     const positionItems = useCallback((item, monitor) => {
-        var _a;
         if (!monitor.canDrop())
             return;
         const prevIndex = internalItems.findIndex(({ id }) => id === item.id);
         if (prevIndex === -1) {
-            (_a = item.removeFromCurrent) === null || _a === void 0 ? void 0 : _a.call(item);
+            item.removeFromCurrent?.();
             item.removeFromCurrent = () => {
                 removeById(item.id);
             };
@@ -108,7 +108,7 @@ const DragDropList = ({ accept, items, itemRenderer: ItemRenderer, emptyRenderer
             else
                 setInternalItems(newItems);
         }
-    }, [pushMode, getInsertIndex, internalItems, removeById]);
+    }, [internalItems, pushMode, getInsertIndex, normalizeItems, triggerOnChange, removeById]);
     const onHover = positionItems;
     const onDrop = positionItems;
     const onBegin = useCallback((itemId) => () => {
@@ -129,39 +129,40 @@ const DragDropList = ({ accept, items, itemRenderer: ItemRenderer, emptyRenderer
             changeSource: triggerOnChange,
             changeDestination: triggerOnChange
         };
-    }, [removeById, internalItems]);
+    }, [internalItems, normalizeItems, triggerOnChange, removeById]);
     const onEnd = useCallback((item, monitor) => {
-        var _a, _b, _c, _d, _e;
+        if (!item)
+            return;
         if (monitor.didDrop()) {
-            (_a = item.normalizeDestination) === null || _a === void 0 ? void 0 : _a.call(item);
+            item.normalizeDestination?.();
             if (item.changeSource !== item.changeDestination)
-                (_b = item.changeSource) === null || _b === void 0 ? void 0 : _b.call(item);
-            (_c = item.changeDestination) === null || _c === void 0 ? void 0 : _c.call(item);
+                item.changeSource?.();
+            item.changeDestination?.();
         }
         else {
-            (_d = item.removeFromCurrent) === null || _d === void 0 ? void 0 : _d.call(item);
-            (_e = item.returnToSource) === null || _e === void 0 ? void 0 : _e.call(item, item);
+            item.removeFromCurrent?.();
+            item.returnToSource?.(item);
         }
     }, []);
-    const emptyContent = EmptyRenderer ? React.createElement(EmptyRenderer, null) : null;
-    return (React.createElement(Droppable, { accept: accept, onHover: onHover, onDrop: onDrop }, ({ dropRef }) => {
-        return (React.createElement(Component, { ref: (el) => {
-                dropRef(el);
-                setListEl(el);
-            }, ...restProps }, internalItems.length === 0
-            ? emptyContent
-            : internalItems.map(item => {
-                return (React.createElement(Draggable, { key: item.id, id: item.id, type: item.type, data: item.data, onBegin: onBegin(item.id), onEnd: onEnd }, ({ dragRef, previewRef, collected }) => {
-                    return (React.createElement(ItemRenderer, { ...{
-                            ...item,
-                            dragRef,
-                            previewRef,
-                            ...collected,
-                            isDragging: collected.isDragging || !!item.removeFromCurrent
-                        } }));
-                }));
-            })));
-    }));
+    const emptyContent = EmptyRenderer ? _jsx(EmptyRenderer, {}, void 0) : null;
+    return (_jsx(Droppable, { accept: accept, onHover: onHover, onDrop: onDrop, children: ({ dropRef }) => {
+            return (_jsx(Component, { ref: (el) => {
+                    dropRef(el);
+                    setListEl(el);
+                }, ...restProps, children: internalItems.length === 0
+                    ? emptyContent
+                    : internalItems.map(item => {
+                        return (_jsx(Draggable, { id: item.id, type: item.type, data: item.data, onBegin: onBegin(item.id), onEnd: onEnd, children: ({ dragRef, previewRef, collected }) => {
+                                return (_jsx(ItemRenderer, { ...{
+                                        ...item,
+                                        dragRef,
+                                        previewRef,
+                                        ...collected,
+                                        isDragging: collected.isDragging || !!item.removeFromCurrent
+                                    } }, void 0));
+                            } }, item.id));
+                    }) }, void 0));
+        } }, void 0));
 };
 export default DragDropList;
 //# sourceMappingURL=DragDropList.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"DragDropList.js","sourceRoot":"","sources":["../../../src/components/DragDropList/DragDropList.tsx"],"names":[],"mappings":"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","sourcesContent":["import { useCallback, useState, useRef } from 'react';\nimport { DragSourceMonitor, DropTargetMonitor } from 'react-dnd';\n\nimport {\n  useElement,\n  useAfterInitialEffect,\n  useTriggerableLayoutEffect,\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?: () => void;\n  changeDestination?: () => void;\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  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 [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 triggerOnChange = useTriggerableLayoutEffect(\n    useCallback(() => {\n      onChange(internalItems);\n    }, [onChange, internalItems])\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()) 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      }\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, 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, 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          changeDestination: triggerOnChange\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      item.normalizeDestination?.();\n      if (item.changeSource !== item.changeDestination) item.changeSource?.();\n      item.changeDestination?.();\n    } else {\n      item.removeFromCurrent?.();\n      item.returnToSource?.(item);\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"]}

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

@@ -0,0 +1,34 @@
+import { RefCallback, ComponentType } from 'react';
+import { AsProp, BaseProps } from '@pega/cosmos-react-core';
+import { DraggableItem, DraggableCollectedProps } from '../Draggable';
+import { DroppableProps } from '../Droppable';
+export interface ItemRendererProps<T extends object = object> extends DraggableItem<T>, DraggableCollectedProps {
+    dragRef: RefCallback<HTMLElement>;
+    previewRef: RefCallback<HTMLElement>;
+}
+export interface DragDropListProps<T extends object = object> extends AsProp, BaseProps {
+    /** 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. */
+    items: DraggableItem<T>[];
+    /**
+     * @default "remove"
+     */
+    pullMode?: 'clone' | 'remove';
+    /**
+     * @default "insert"
+     */
+    pushMode?: 'insert' | 'prepend' | 'append' | ((a: DraggableItem<T>, b: DraggableItem<T>) => number);
+    /** User defined function that should return content for the draggable element. */
+    itemRenderer: ComponentType<ItemRendererProps<T>>;
+    /**
+     * Enable drag handle elements for each of the list items. By default the entire element is draggable.
+     * @default false
+     */
+    dragHandles?: boolean;
+    /** User defined function(Component) that should return content for when the list is empty. */
+    emptyRenderer?: ComponentType;
+    /** Called when list data is updated. */
+    onChange: (items: DragDropListProps<T>['items']) => void;
+}
+//# sourceMappingURL=DragDropList.types.d.ts.map

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

@@ -0,0 +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,MAAM,yBAAyB,CAAC;AAE5D,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,CAAE,SAAQ,MAAM,EAAE,SAAS;IACrF,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,wCAAwC;IACxC,QAAQ,EAAE,CAAC,KAAK,EAAE,iBAAiB,CAAC,CAAC,CAAC,CAAC,OAAO,CAAC,KAAK,IAAI,CAAC;CAC1D"}

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

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=DragDropList.types.js.map

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

@@ -0,0 +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 } 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> extends AsProp, BaseProps {\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. */\n  onChange: (items: DragDropListProps<T>['items']) => void;\n}\n"]}

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

@@ -0,0 +1,3 @@
+export { default } from './DragDropList';
+export { DragDropListProps, ItemRendererProps } from './DragDropList.types';
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/DragDropList/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,gBAAgB,CAAC;AACzC,OAAO,EAAE,iBAAiB,EAAE,iBAAiB,EAAE,MAAM,sBAAsB,CAAC"}

package/lib/components/DragDropList/index.js

@@ -0,0 +1,2 @@
+export { default } from './DragDropList';
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/DragDropList/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,gBAAgB,CAAC","sourcesContent":["export { default } from './DragDropList';\nexport { DragDropListProps, ItemRendererProps } from './DragDropList.types';\n"]}

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

@@ -0,0 +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"}

package/lib/components/DragDropManager/DragDropManager.js

@@ -0,0 +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 }, void 0);
+};
+export default DragDropManager;
+//# sourceMappingURL=DragDropManager.js.map

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

@@ -0,0 +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,WAAe,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"]}

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

@@ -0,0 +1,2 @@
+export { default, DragDropManagerProps } from './DragDropManager';
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/DragDropManager/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,oBAAoB,EAAE,MAAM,mBAAmB,CAAC"}

package/lib/components/DragDropManager/index.js

@@ -0,0 +1,2 @@
+export { default } from './DragDropManager';
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/DragDropManager/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAwB,MAAM,mBAAmB,CAAC","sourcesContent":["export { default, DragDropManagerProps } from './DragDropManager';\n"]}

package/lib/components/Draggable/Draggable.d.ts

@@ -0,0 +1,28 @@
+import { RefCallback, ReactElement } from 'react';
+import { DragSourceMonitor } from 'react-dnd';
+import { SourceType } from 'dnd-core';
+export interface DraggableItem<T extends object = object> {
+    /** Draggable item id */
+    id: string;
+    /** Draggable item type */
+    type: SourceType;
+    /** Arbitrary data associated with this drag item */
+    data?: T;
+}
+export interface DraggableCollectedProps {
+    isDragging: boolean;
+    dragEl: HTMLElement | null;
+}
+export interface DraggableProps<T extends object = object> extends DraggableItem<T> {
+    onBegin?: (monitor: DragSourceMonitor) => object;
+    /** Called when drag item is dropped on a valid drop target */
+    onEnd?: (item: DraggableItem<T> | undefined, monitor: DragSourceMonitor) => void;
+    children: (props: {
+        dragRef: RefCallback<HTMLElement>;
+        previewRef: RefCallback<HTMLElement>;
+        collected: DraggableCollectedProps;
+    }) => ReactElement;
+}
+declare const Draggable: <T extends object = object>({ id, type, data, onBegin, onEnd, children }: DraggableProps<T>) => ReactElement<any, string | import("react").JSXElementConstructor<any>>;
+export default Draggable;
+//# sourceMappingURL=Draggable.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Draggable.d.ts","sourceRoot":"","sources":["../../../src/components/Draggable/Draggable.ts"],"names":[],"mappings":"AAAA,OAAO,EAA4B,WAAW,EAAE,YAAY,EAAE,MAAM,OAAO,CAAC;AAC5E,OAAO,EAAW,iBAAiB,EAAE,MAAM,WAAW,CAAC;AACvD,OAAO,EAAE,UAAU,EAAE,MAAM,UAAU,CAAC;AAEtC,MAAM,WAAW,aAAa,CAAC,CAAC,SAAS,MAAM,GAAG,MAAM;IACtD,wBAAwB;IACxB,EAAE,EAAE,MAAM,CAAC;IACX,0BAA0B;IAC1B,IAAI,EAAE,UAAU,CAAC;IACjB,oDAAoD;IACpD,IAAI,CAAC,EAAE,CAAC,CAAC;CACV;AAED,MAAM,WAAW,uBAAuB;IACtC,UAAU,EAAE,OAAO,CAAC;IACpB,MAAM,EAAE,WAAW,GAAG,IAAI,CAAC;CAC5B;AAED,MAAM,WAAW,cAAc,CAAC,CAAC,SAAS,MAAM,GAAG,MAAM,CAAE,SAAQ,aAAa,CAAC,CAAC,CAAC;IACjF,OAAO,CAAC,EAAE,CAAC,OAAO,EAAE,iBAAiB,KAAK,MAAM,CAAC;IACjD,8DAA8D;IAC9D,KAAK,CAAC,EAAE,CAAC,IAAI,EAAE,aAAa,CAAC,CAAC,CAAC,GAAG,SAAS,EAAE,OAAO,EAAE,iBAAiB,KAAK,IAAI,CAAC;IACjF,QAAQ,EAAE,CAAC,KAAK,EAAE;QAChB,OAAO,EAAE,WAAW,CAAC,WAAW,CAAC,CAAC;QAClC,UAAU,EAAE,WAAW,CAAC,WAAW,CAAC,CAAC;QACrC,SAAS,EAAE,uBAAuB,CAAC;KACpC,KAAK,YAAY,CAAC;CACpB;AAED,QAAA,MAAM,SAAS,wKA+Bd,CAAC;AAEF,eAAe,SAAS,CAAC"}

package/lib/components/{DragDrop → Draggable}/Draggable.js

@@ -1,16 +1,16 @@
 import { useRef } from 'react';
 import { useDrag } from 'react-dnd';
-const Draggable = ({ id, type, data, children, onBegin, onEnd: end }) => {
+const Draggable = ({ id, type, data, onBegin, onEnd, children }) => {
     const dragElRef = useRef(null);
-    const [collected, dragRef, previewRef] = useDrag({
-        item: { id, type, data },
-        collect: (monitor) => ({
+    const [collected, dragRef, previewRef] = useDrag(() => ({
+        type,
+        item: monitor => ({ ...onBegin?.(monitor), id, type, data }),
+        end: onEnd,
+        collect: monitor => ({
             isDragging: monitor.isDragging(),
             dragEl: dragElRef.current
-        }),
-        begin: onBegin ? monitor => ({ ...onBegin(monitor), id, type, data }) : undefined,
-        end
-    });
+        })
+    }), [id, type, data, onBegin, onEnd]);
     return children({
         dragRef: (el) => {
             dragElRef.current = el;

package/lib/components/Draggable/Draggable.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Draggable.js","sourceRoot":"","sources":["../../../src/components/Draggable/Draggable.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAA+C,MAAM,OAAO,CAAC;AAC5E,OAAO,EAAE,OAAO,EAAqB,MAAM,WAAW,CAAC;AA4BvD,MAAM,SAAS,GAAG,CAA4B,EAC5C,EAAE,EACF,IAAI,EACJ,IAAI,EACJ,OAAO,EACP,KAAK,EACL,QAAQ,EACU,EAAE,EAAE;IACtB,MAAM,SAAS,GAAyC,MAAM,CAAc,IAAI,CAAC,CAAC;IAElF,MAAM,CAAC,SAAS,EAAE,OAAO,EAAE,UAAU,CAAC,GAAG,OAAO,CAC9C,GAAG,EAAE,CAAC,CAAC;QACL,IAAI;QACJ,IAAI,EAAE,OAAO,CAAC,EAAE,CAAC,CAAC,EAAE,GAAG,OAAO,EAAE,CAAC,OAAO,CAAC,EAAE,EAAE,EAAE,IAAI,EAAE,IAAI,EAAE,CAAC;QAC5D,GAAG,EAAE,KAAK;QACV,OAAO,EAAE,OAAO,CAAC,EAAE,CAAC,CAAC;YACnB,UAAU,EAAE,OAAO,CAAC,UAAU,EAAE;YAChC,MAAM,EAAE,SAAS,CAAC,OAAO;SAC1B,CAAC;KACH,CAAC,EACF,CAAC,EAAE,EAAE,IAAI,EAAE,IAAI,EAAE,OAAO,EAAE,KAAK,CAAC,CACjC,CAAC;IAEF,OAAO,QAAQ,CAAC;QACd,OAAO,EAAE,CAAC,EAAe,EAAE,EAAE;YAC3B,SAAS,CAAC,OAAO,GAAG,EAAE,CAAC;YACvB,OAAO,CAAC,EAAE,CAAC,CAAC;QACd,CAAC;QACD,UAAU;QACV,SAAS;KACV,CAAC,CAAC;AACL,CAAC,CAAC;AAEF,eAAe,SAAS,CAAC","sourcesContent":["import { useRef, MutableRefObject, RefCallback, ReactElement } from 'react';\nimport { useDrag, DragSourceMonitor } from 'react-dnd';\nimport { SourceType } from 'dnd-core';\n\nexport interface DraggableItem<T extends object = object> {\n  /** Draggable item id */\n  id: string;\n  /** Draggable item type */\n  type: SourceType;\n  /** Arbitrary data associated with this drag item */\n  data?: T;\n}\n\nexport interface DraggableCollectedProps {\n  isDragging: boolean;\n  dragEl: HTMLElement | null;\n}\n\nexport interface DraggableProps<T extends object = object> extends DraggableItem<T> {\n  onBegin?: (monitor: DragSourceMonitor) => object;\n  /** Called when drag item is dropped on a valid drop target */\n  onEnd?: (item: DraggableItem<T> | undefined, monitor: DragSourceMonitor) => void;\n  children: (props: {\n    dragRef: RefCallback<HTMLElement>;\n    previewRef: RefCallback<HTMLElement>;\n    collected: DraggableCollectedProps;\n  }) => ReactElement;\n}\n\nconst Draggable = <T extends object = object>({\n  id,\n  type,\n  data,\n  onBegin,\n  onEnd,\n  children\n}: DraggableProps<T>) => {\n  const dragElRef: MutableRefObject<HTMLElement | null> = useRef<HTMLElement>(null);\n\n  const [collected, dragRef, previewRef] = useDrag(\n    () => ({\n      type,\n      item: monitor => ({ ...onBegin?.(monitor), id, type, data }),\n      end: onEnd,\n      collect: monitor => ({\n        isDragging: monitor.isDragging(),\n        dragEl: dragElRef.current\n      })\n    }),\n    [id, type, data, onBegin, onEnd]\n  );\n\n  return children({\n    dragRef: (el: HTMLElement) => {\n      dragElRef.current = el;\n      dragRef(el);\n    },\n    previewRef,\n    collected\n  });\n};\n\nexport default Draggable;\n"]}

package/lib/components/Draggable/index.d.ts

@@ -0,0 +1,2 @@
+export { default, DraggableProps, DraggableItem, DraggableCollectedProps } from './Draggable';
+//# sourceMappingURL=index.d.ts.map

package/lib/components/Draggable/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Draggable/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,cAAc,EAAE,aAAa,EAAE,uBAAuB,EAAE,MAAM,aAAa,CAAC"}

package/lib/components/Draggable/index.js

@@ -0,0 +1,2 @@
+export { default } from './Draggable';
+//# sourceMappingURL=index.js.map

package/lib/components/Draggable/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/Draggable/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAA0D,MAAM,aAAa,CAAC","sourcesContent":["export { default, DraggableProps, DraggableItem, DraggableCollectedProps } from './Draggable';\n"]}

package/lib/components/Droppable/Droppable.d.ts

@@ -0,0 +1,23 @@
+import { RefCallback, ReactElement } from 'react';
+import { DropTargetMonitor } from 'react-dnd';
+import { TargetType } from 'dnd-core';
+import { DraggableItem } from '../Draggable';
+export interface DroppableProps<T extends object = object> {
+    /** Type of item allowed to be dropped on this drop target */
+    accept: TargetType;
+    /** Called when drop target is hovered with valid Droppable item */
+    onHover?: (item: DraggableItem<T>, monitor: DropTargetMonitor) => void;
+    /** Called when drag item is dropped on a valid drop target */
+    onDrop?: (item: DraggableItem<T>, monitor: DropTargetMonitor) => void;
+    /** Called when item is dropped on this drop target */
+    children: (refs: {
+        dropRef: RefCallback<HTMLElement>;
+        collected: {
+            canDrop: boolean;
+            isOver: boolean;
+        };
+    }) => ReactElement;
+}
+declare const Droppable: <T extends object = object>({ accept, onDrop, onHover, children }: DroppableProps<T>) => ReactElement<any, string | import("react").JSXElementConstructor<any>>;
+export default Droppable;
+//# sourceMappingURL=Droppable.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Droppable.d.ts","sourceRoot":"","sources":["../../../src/components/Droppable/Droppable.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,YAAY,EAAE,MAAM,OAAO,CAAC;AAClD,OAAO,EAAW,iBAAiB,EAAE,MAAM,WAAW,CAAC;AACvD,OAAO,EAAE,UAAU,EAAE,MAAM,UAAU,CAAC;AAEtC,OAAO,EAAE,aAAa,EAAE,MAAM,cAAc,CAAC;AAE7C,MAAM,WAAW,cAAc,CAAC,CAAC,SAAS,MAAM,GAAG,MAAM;IACvD,6DAA6D;IAC7D,MAAM,EAAE,UAAU,CAAC;IACnB,mEAAmE;IACnE,OAAO,CAAC,EAAE,CAAC,IAAI,EAAE,aAAa,CAAC,CAAC,CAAC,EAAE,OAAO,EAAE,iBAAiB,KAAK,IAAI,CAAC;IACvE,8DAA8D;IAC9D,MAAM,CAAC,EAAE,CAAC,IAAI,EAAE,aAAa,CAAC,CAAC,CAAC,EAAE,OAAO,EAAE,iBAAiB,KAAK,IAAI,CAAC;IACtE,sDAAsD;IACtD,QAAQ,EAAE,CAAC,IAAI,EAAE;QACf,OAAO,EAAE,WAAW,CAAC,WAAW,CAAC,CAAC;QAClC,SAAS,EAAE;YAAE,OAAO,EAAE,OAAO,CAAC;YAAC,MAAM,EAAE,OAAO,CAAA;SAAE,CAAC;KAClD,KAAK,YAAY,CAAC;CACpB;AAED,QAAA,MAAM,SAAS,iKAoBd,CAAC;AAEF,eAAe,SAAS,CAAC"}

package/lib/components/{DragDrop → Droppable}/Droppable.js

@@ -1,6 +1,6 @@
 import { useDrop } from 'react-dnd';
 const Droppable = ({ accept, onDrop, onHover, children }) => {
-    const [collected, dropRef] = useDrop({
+    const [collected, dropRef] = useDrop(() => ({
         accept,
         drop: onDrop,
         hover: onHover,
@@ -8,7 +8,7 @@ const Droppable = ({ accept, onDrop, onHover, children }) => {
             canDrop: monitor.canDrop(),
             isOver: monitor.isOver()
         })
-    });
+    }), [accept, onDrop, onHover]);
     return children({ dropRef, collected });
 };
 export default Droppable;

package/lib/components/Droppable/Droppable.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Droppable.js","sourceRoot":"","sources":["../../../src/components/Droppable/Droppable.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,OAAO,EAAqB,MAAM,WAAW,CAAC;AAmBvD,MAAM,SAAS,GAAG,CAA4B,EAC5C,MAAM,EACN,MAAM,EACN,OAAO,EACP,QAAQ,EACU,EAAE,EAAE;IACtB,MAAM,CAAC,SAAS,EAAE,OAAO,CAAC,GAAG,OAAO,CAClC,GAAG,EAAE,CAAC,CAAC;QACL,MAAM;QACN,IAAI,EAAE,MAAM;QACZ,KAAK,EAAE,OAAO;QACd,OAAO,EAAE,OAAO,CAAC,EAAE,CAAC,CAAC;YACnB,OAAO,EAAE,OAAO,CAAC,OAAO,EAAE;YAC1B,MAAM,EAAE,OAAO,CAAC,MAAM,EAAE;SACzB,CAAC;KACH,CAAC,EACF,CAAC,MAAM,EAAE,MAAM,EAAE,OAAO,CAAC,CAC1B,CAAC;IAEF,OAAO,QAAQ,CAAC,EAAE,OAAO,EAAE,SAAS,EAAE,CAAC,CAAC;AAC1C,CAAC,CAAC;AAEF,eAAe,SAAS,CAAC","sourcesContent":["import { RefCallback, ReactElement } from 'react';\nimport { useDrop, DropTargetMonitor } from 'react-dnd';\nimport { TargetType } from 'dnd-core';\n\nimport { DraggableItem } from '../Draggable';\n\nexport interface DroppableProps<T extends object = object> {\n  /** Type of item allowed to be dropped on this drop target */\n  accept: TargetType;\n  /** Called when drop target is hovered with valid Droppable item */\n  onHover?: (item: DraggableItem<T>, monitor: DropTargetMonitor) => void;\n  /** Called when drag item is dropped on a valid drop target */\n  onDrop?: (item: DraggableItem<T>, monitor: DropTargetMonitor) => void;\n  /** Called when item is dropped on this drop target */\n  children: (refs: {\n    dropRef: RefCallback<HTMLElement>;\n    collected: { canDrop: boolean; isOver: boolean };\n  }) => ReactElement;\n}\n\nconst Droppable = <T extends object = object>({\n  accept,\n  onDrop,\n  onHover,\n  children\n}: DroppableProps<T>) => {\n  const [collected, dropRef] = useDrop(\n    () => ({\n      accept,\n      drop: onDrop,\n      hover: onHover,\n      collect: monitor => ({\n        canDrop: monitor.canDrop(),\n        isOver: monitor.isOver()\n      })\n    }),\n    [accept, onDrop, onHover]\n  );\n\n  return children({ dropRef, collected });\n};\n\nexport default Droppable;\n"]}

package/lib/components/Droppable/index.d.ts

@@ -0,0 +1,2 @@
+export { default, DroppableProps } from './Droppable';
+//# sourceMappingURL=index.d.ts.map

package/lib/components/Droppable/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Droppable/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,cAAc,EAAE,MAAM,aAAa,CAAC"}

package/lib/components/Droppable/index.js

@@ -0,0 +1,2 @@
+export { default } from './Droppable';
+//# sourceMappingURL=index.js.map

package/lib/components/Droppable/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/Droppable/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAkB,MAAM,aAAa,CAAC","sourcesContent":["export { default, DroppableProps } from './Droppable';\n"]}

package/lib/index.d.ts

@@ -1,2 +1,9 @@
-export * from './components/DragDrop';
+export { default as DragDropList } from './components/DragDropList';
+export * from './components/DragDropList';
+export { default as DragDropManager } from './components/DragDropManager';
+export * from './components/DragDropManager';
+export { default as Draggable } from './components/Draggable';
+export * from './components/Draggable';
+export { default as Droppable } from './components/Droppable';
+export * from './components/Droppable';
 //# sourceMappingURL=index.d.ts.map

package/lib/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AACA,cAAc,uBAAuB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,2BAA2B,CAAC;AACpE,cAAc,2BAA2B,CAAC;AAC1C,OAAO,EAAE,OAAO,IAAI,eAAe,EAAE,MAAM,8BAA8B,CAAC;AAC1E,cAAc,8BAA8B,CAAC;AAC7C,OAAO,EAAE,OAAO,IAAI,SAAS,EAAE,MAAM,wBAAwB,CAAC;AAC9D,cAAc,wBAAwB,CAAC;AACvC,OAAO,EAAE,OAAO,IAAI,SAAS,EAAE,MAAM,wBAAwB,CAAC;AAC9D,cAAc,wBAAwB,CAAC"}

package/lib/index.js

@@ -1,3 +1,10 @@
 // This file is autogenerated. Any changes will be overwritten.
-export * from './components/DragDrop';
+export { default as DragDropList } from './components/DragDropList';
+export * from './components/DragDropList';
+export { default as DragDropManager } from './components/DragDropManager';
+export * from './components/DragDropManager';
+export { default as Draggable } from './components/Draggable';
+export * from './components/Draggable';
+export { default as Droppable } from './components/Droppable';
+export * from './components/Droppable';
 //# sourceMappingURL=index.js.map

package/lib/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,+DAA+D;AAC/D,cAAc,uBAAuB,CAAC","sourcesContent":["// This file is autogenerated. Any changes will be overwritten.\nexport * from './components/DragDrop';\n"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,+DAA+D;AAC/D,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,2BAA2B,CAAC;AACpE,cAAc,2BAA2B,CAAC;AAC1C,OAAO,EAAE,OAAO,IAAI,eAAe,EAAE,MAAM,8BAA8B,CAAC;AAC1E,cAAc,8BAA8B,CAAC;AAC7C,OAAO,EAAE,OAAO,IAAI,SAAS,EAAE,MAAM,wBAAwB,CAAC;AAC9D,cAAc,wBAAwB,CAAC;AACvC,OAAO,EAAE,OAAO,IAAI,SAAS,EAAE,MAAM,wBAAwB,CAAC;AAC9D,cAAc,wBAAwB,CAAC","sourcesContent":["// This file is autogenerated. Any changes will be overwritten.\nexport { default as DragDropList } from './components/DragDropList';\nexport * from './components/DragDropList';\nexport { default as DragDropManager } from './components/DragDropManager';\nexport * from './components/DragDropManager';\nexport { default as Draggable } from './components/Draggable';\nexport * from './components/Draggable';\nexport { default as Droppable } from './components/Droppable';\nexport * from './components/Droppable';\n"]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pega/cosmos-react-dnd",
-  "version": "2.0.0-dev.2.1",
+  "version": "2.0.0-dev.20.0",
   "author": "Pegasystems",
   "license": "SEE LICENSE IN LICENSE",
   "repository": {
@@ -20,25 +20,25 @@
     "build": "tsc -b"
   },
   "dependencies": {
-    "@pega/cosmos-react-core": "2.0.0-dev.2.1",
+    "@pega/cosmos-react-core": "2.0.0-dev.20.0",
+    "dnd-core": "14.0.1",
     "polished": "^4.1.0",
-    "react": "^16.13.1 || ^17.0.0",
-    "react-dnd": "^10.0.2",
-    "react-dnd-html5-backend": "^10.0.2",
-    "react-dom": "^16.13.1 || ^17.0.0",
+    "react": "^16.14.0 || ^17.0.0",
+    "react-dnd": "^14.0.4",
+    "react-dnd-html5-backend": "^14.0.2",
+    "react-dom": "^16.14.0 || ^17.0.0",
     "styled-components": "^5.2.0"
   },
   "devDependencies": {
-    "@storybook/addon-a11y": "^6.2.9",
-    "@storybook/addon-actions": "^6.2.9",
-    "@storybook/addon-knobs": "^6.2.9",
-    "@storybook/addon-storysource": "^6.2.9",
-    "@storybook/addon-toolbars": "^6.2.9",
-    "@storybook/addons": "^6.2.9",
-    "@storybook/react": "^6.2.9",
-    "@storybook/theming": "^6.2.9",
+    "@storybook/addon-a11y": "^6.3.8",
+    "@storybook/addon-actions": "^6.3.8",
+    "@storybook/addon-knobs": "^6.3.1",
+    "@storybook/addon-storysource": "^6.3.8",
+    "@storybook/addon-toolbars": "^6.3.8",
+    "@storybook/addons": "^6.3.8",
+    "@storybook/react": "^6.3.8",
+    "@storybook/theming": "^6.3.8",
     "enzyme": "^3.11.0",
-    "enzyme-adapter-react-16": "^1.15.5",
-    "typescript": "~4.3.2"
+    "typescript": "~4.5.2"
   }
 }

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

@@ -1,70 +0,0 @@
-import { ComponentType, ReactElement, RefCallback } from 'react';
-import { DragSourceMonitor, DropTargetMonitor } from 'react-dnd';
-import { AsProp, BaseProps } from '@pega/cosmos-react-core';
-export interface DraggableItem<T extends object = object> {
-    /** Draggable item id */
-    id: string;
-    /** Draggable item type */
-    type: string | symbol;
-    /** Arbitrary data associated with this drag item */
-    data?: T;
-}
-export interface CollectedProps {
-    isDragging: boolean;
-}
-export interface DraggableProps<T extends object = object> extends DraggableItem<T> {
-    onBegin?(monitor: DragSourceMonitor): object;
-    /** Called when drag item is dropped on a valid drop target */
-    onEnd?(item: DraggableItem<T> | undefined, monitor: DragSourceMonitor): void;
-    children(props: {
-        dragRef: RefCallback<HTMLElement>;
-        previewRef: RefCallback<HTMLElement>;
-        collected: CollectedProps;
-    }): ReactElement;
-}
-export interface DroppableProps<T extends object = object> {
-    /** Type of item allowed to be dropped on this drop target */
-    accept: DraggableProps['type'] | DraggableProps['type'][];
-    /** Called when drop target is hovered with valid Droppable item */
-    onHover?(item: DraggableItem<T>, monitor: DropTargetMonitor): void;
-    /** Called when drag item is dropped on a valid drop target */
-    onDrop?(item: DraggableItem<T>, monitor: DropTargetMonitor): void;
-    /** Called when item is dropped on this drop target */
-    children(refs: {
-        dropRef: RefCallback<HTMLElement>;
-        collected: {
-            canDrop: boolean;
-            isOver: boolean;
-        };
-    }): ReactElement;
-}
-export interface ItemRendererProps<T extends object = object> extends DraggableItem<T>, CollectedProps {
-    dragRef: RefCallback<HTMLElement>;
-    previewRef: RefCallback<HTMLElement>;
-}
-export interface DragDropListProps<T extends object = object> extends AsProp, BaseProps {
-    /** 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. */
-    items: DraggableItem<T>[];
-    /**
-     * @default "remove"
-     */
-    pullMode?: 'clone' | 'remove';
-    /**
-     * @default "insert"
-     */
-    pushMode?: 'insert' | 'prepend' | 'append' | ((a: DraggableItem<T>, b: DraggableItem<T>) => number);
-    /** User defined function that should return content for the draggable element. */
-    itemRenderer: ComponentType<ItemRendererProps<T>>;
-    /**
-     * Enable drag handle elements for each of the list items. By default the entire element is draggable.
-     * @default false
-     */
-    dragHandles?: boolean;
-    /** User defined function(Component) that should return content for when the list is empty. */
-    emptyRenderer?: ComponentType;
-    /** Called when list data is updated. */
-    onChange(items: DragDropListProps<T>['items']): void;
-}
-//# sourceMappingURL=DragDrop.types.d.ts.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"DragDrop.types.d.ts","sourceRoot":"","sources":["../../../src/components/DragDrop/DragDrop.types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,YAAY,EAAE,WAAW,EAAE,MAAM,OAAO,CAAC;AACjE,OAAO,EAAE,iBAAiB,EAAE,iBAAiB,EAAE,MAAM,WAAW,CAAC;AAEjE,OAAO,EAAE,MAAM,EAAE,SAAS,EAAE,MAAM,yBAAyB,CAAC;AAE5D,MAAM,WAAW,aAAa,CAAC,CAAC,SAAS,MAAM,GAAG,MAAM;IACtD,wBAAwB;IACxB,EAAE,EAAE,MAAM,CAAC;IACX,0BAA0B;IAC1B,IAAI,EAAE,MAAM,GAAG,MAAM,CAAC;IACtB,oDAAoD;IACpD,IAAI,CAAC,EAAE,CAAC,CAAC;CACV;AAED,MAAM,WAAW,cAAc;IAC7B,UAAU,EAAE,OAAO,CAAC;CACrB;AAED,MAAM,WAAW,cAAc,CAAC,CAAC,SAAS,MAAM,GAAG,MAAM,CAAE,SAAQ,aAAa,CAAC,CAAC,CAAC;IACjF,OAAO,CAAC,CAAC,OAAO,EAAE,iBAAiB,GAAG,MAAM,CAAC;IAC7C,8DAA8D;IAC9D,KAAK,CAAC,CAAC,IAAI,EAAE,aAAa,CAAC,CAAC,CAAC,GAAG,SAAS,EAAE,OAAO,EAAE,iBAAiB,GAAG,IAAI,CAAC;IAC7E,QAAQ,CAAC,KAAK,EAAE;QACd,OAAO,EAAE,WAAW,CAAC,WAAW,CAAC,CAAC;QAClC,UAAU,EAAE,WAAW,CAAC,WAAW,CAAC,CAAC;QACrC,SAAS,EAAE,cAAc,CAAC;KAC3B,GAAG,YAAY,CAAC;CAClB;AAED,MAAM,WAAW,cAAc,CAAC,CAAC,SAAS,MAAM,GAAG,MAAM;IACvD,6DAA6D;IAC7D,MAAM,EAAE,cAAc,CAAC,MAAM,CAAC,GAAG,cAAc,CAAC,MAAM,CAAC,EAAE,CAAC;IAC1D,mEAAmE;IACnE,OAAO,CAAC,CAAC,IAAI,EAAE,aAAa,CAAC,CAAC,CAAC,EAAE,OAAO,EAAE,iBAAiB,GAAG,IAAI,CAAC;IACnE,8DAA8D;IAC9D,MAAM,CAAC,CAAC,IAAI,EAAE,aAAa,CAAC,CAAC,CAAC,EAAE,OAAO,EAAE,iBAAiB,GAAG,IAAI,CAAC;IAClE,sDAAsD;IACtD,QAAQ,CAAC,IAAI,EAAE;QACb,OAAO,EAAE,WAAW,CAAC,WAAW,CAAC,CAAC;QAClC,SAAS,EAAE;YAAE,OAAO,EAAE,OAAO,CAAC;YAAC,MAAM,EAAE,OAAO,CAAA;SAAE,CAAC;KAClD,GAAG,YAAY,CAAC;CAClB;AAED,MAAM,WAAW,iBAAiB,CAAC,CAAC,SAAS,MAAM,GAAG,MAAM,CAC1D,SAAQ,aAAa,CAAC,CAAC,CAAC,EACtB,cAAc;IAChB,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,CAAE,SAAQ,MAAM,EAAE,SAAS;IACrF,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,wCAAwC;IACxC,QAAQ,CAAC,KAAK,EAAE,iBAAiB,CAAC,CAAC,CAAC,CAAC,OAAO,CAAC,GAAG,IAAI,CAAC;CACtD"}

package/lib/components/DragDrop/DragDrop.types.js

@@ -1,2 +0,0 @@
-export {};
-//# sourceMappingURL=DragDrop.types.js.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"DragDrop.types.js","sourceRoot":"","sources":["../../../src/components/DragDrop/DragDrop.types.ts"],"names":[],"mappings":"","sourcesContent":["import { ComponentType, ReactElement, RefCallback } from 'react';\nimport { DragSourceMonitor, DropTargetMonitor } from 'react-dnd';\n\nimport { AsProp, BaseProps } from '@pega/cosmos-react-core';\n\nexport interface DraggableItem<T extends object = object> {\n  /** Draggable item id */\n  id: string;\n  /** Draggable item type */\n  type: string | symbol;\n  /** Arbitrary data associated with this drag item */\n  data?: T;\n}\n\nexport interface CollectedProps {\n  isDragging: boolean;\n}\n\nexport interface DraggableProps<T extends object = object> extends DraggableItem<T> {\n  onBegin?(monitor: DragSourceMonitor): object;\n  /** Called when drag item is dropped on a valid drop target */\n  onEnd?(item: DraggableItem<T> | undefined, monitor: DragSourceMonitor): void;\n  children(props: {\n    dragRef: RefCallback<HTMLElement>;\n    previewRef: RefCallback<HTMLElement>;\n    collected: CollectedProps;\n  }): ReactElement;\n}\n\nexport interface DroppableProps<T extends object = object> {\n  /** Type of item allowed to be dropped on this drop target */\n  accept: DraggableProps['type'] | DraggableProps['type'][];\n  /** Called when drop target is hovered with valid Droppable item */\n  onHover?(item: DraggableItem<T>, monitor: DropTargetMonitor): void;\n  /** Called when drag item is dropped on a valid drop target */\n  onDrop?(item: DraggableItem<T>, monitor: DropTargetMonitor): void;\n  /** Called when item is dropped on this drop target */\n  children(refs: {\n    dropRef: RefCallback<HTMLElement>;\n    collected: { canDrop: boolean; isOver: boolean };\n  }): ReactElement;\n}\n\nexport interface ItemRendererProps<T extends object = object>\n  extends DraggableItem<T>,\n    CollectedProps {\n  dragRef: RefCallback<HTMLElement>;\n  previewRef: RefCallback<HTMLElement>;\n}\n\nexport interface DragDropListProps<T extends object = object> extends AsProp, BaseProps {\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. */\n  onChange(items: DragDropListProps<T>['items']): void;\n}\n"]}

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

@@ -1 +0,0 @@
-{"version":3,"file":"DragDropList.d.ts","sourceRoot":"","sources":["../../../src/components/DragDrop/DragDropList.tsx"],"names":[],"mappings":";AAGA,OAAO,EAIL,YAAY,EAEb,MAAM,yBAAyB,CAAC;AAIjC,OAAO,EAAE,iBAAiB,EAAiB,MAAM,kBAAkB,CAAC;AAYpE,QAAA,MAAM,YAAY,yNAyNjB,CAAC;AAEF,eAAe,YAAY,CAAC"}

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

@@ -1 +0,0 @@
-{"version":3,"file":"DragDropList.js","sourceRoot":"","sources":["../../../src/components/DragDrop/DragDropList.tsx"],"names":[],"mappings":"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","sourcesContent":["import React, { useCallback, useState, useRef } from 'react';\nimport { DragSourceMonitor, DropTargetMonitor } from 'react-dnd';\n\nimport {\n  useElement,\n  useAfterInitialEffect,\n  useTriggerableLayoutEffect,\n  ForwardProps,\n  OmitStrict\n} from '@pega/cosmos-react-core';\n\nimport Draggable from './Draggable';\nimport Droppable from './Droppable';\nimport { DragDropListProps, DraggableItem } from './DragDrop.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?(): void;\n  changeDestination?(): void;\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  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 [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 triggerOnChange = useTriggerableLayoutEffect(\n    useCallback(() => {\n      onChange(internalItems);\n    }, [onChange, internalItems])\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, itemRectsRef.current]\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    [internalItems, 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()) 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      }\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, 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, item);\n\n        if (typeof pushMode === 'function') setInternalItems(newItems.sort(pushMode));\n        else setInternalItems(newItems);\n      }\n    },\n    [pushMode, getInsertIndex, internalItems, 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          changeDestination: triggerOnChange\n        };\n      },\n    [removeById, internalItems]\n  );\n\n  const onEnd = useCallback((item: DragDropListItem<T>, monitor: DragSourceMonitor) => {\n    if (monitor.didDrop()) {\n      item.normalizeDestination?.();\n      if (item.changeSource !== item.changeDestination) item.changeSource?.();\n      item.changeDestination?.();\n    } else {\n      item.removeFromCurrent?.();\n      item.returnToSource?.(item);\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"]}

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

@@ -1 +0,0 @@
-{"version":3,"file":"DragDropManager.d.ts","sourceRoot":"","sources":["../../../src/components/DragDrop/DragDropManager.tsx"],"names":[],"mappings":"AAAA,OAAc,EAAE,iBAAiB,EAAE,SAAS,EAAU,MAAM,OAAO,CAAC;AAIpE,MAAM,WAAW,oBAAoB;IACnC,QAAQ,EAAE,SAAS,CAAC;CACrB;AAKD,QAAA,MAAM,eAAe,EAAE,iBAAiB,CAAC,oBAAoB,CAK5D,CAAC;AAEF,eAAe,eAAe,CAAC"}

package/lib/components/DragDrop/DragDropManager.js

@@ -1,11 +0,0 @@
-import React, { useRef } from 'react';
-import { DndProvider, createDndContext } from 'react-dnd';
-import Backend from 'react-dnd-html5-backend';
-// https://github.com/react-dnd/react-dnd/issues/186
-const Context = createDndContext(Backend);
-const DragDropManager = ({ children }) => {
-    const manager = useRef(Context);
-    return React.createElement(DndProvider, { manager: manager.current.dragDropManager }, children);
-};
-export default DragDropManager;
-//# sourceMappingURL=DragDropManager.js.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"DragDropManager.js","sourceRoot":"","sources":["../../../src/components/DragDrop/DragDropManager.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAgC,MAAM,EAAE,MAAM,OAAO,CAAC;AACpE,OAAO,EAAE,WAAW,EAAE,gBAAgB,EAAE,MAAM,WAAW,CAAC;AAC1D,OAAO,OAAO,MAAM,yBAAyB,CAAC;AAM9C,oDAAoD;AACpD,MAAM,OAAO,GAAG,gBAAgB,CAAC,OAAO,CAAC,CAAC;AAE1C,MAAM,eAAe,GAA4C,CAAC,EAChE,QAAQ,EACa,EAAE,EAAE;IACzB,MAAM,OAAO,GAAG,MAAM,CAAC,OAAO,CAAC,CAAC;IAChC,OAAO,oBAAC,WAAW,IAAC,OAAO,EAAE,OAAO,CAAC,OAAO,CAAC,eAAe,IAAG,QAAQ,CAAe,CAAC;AACzF,CAAC,CAAC;AAEF,eAAe,eAAe,CAAC","sourcesContent":["import React, { FunctionComponent, ReactNode, useRef } from 'react';\nimport { DndProvider, createDndContext } from 'react-dnd';\nimport Backend from 'react-dnd-html5-backend';\n\nexport interface DragDropManagerProps {\n  children: ReactNode;\n}\n\n// https://github.com/react-dnd/react-dnd/issues/186\nconst Context = createDndContext(Backend);\n\nconst DragDropManager: FunctionComponent<DragDropManagerProps> = ({\n  children\n}: DragDropManagerProps) => {\n  const manager = useRef(Context);\n  return <DndProvider manager={manager.current.dragDropManager}>{children}</DndProvider>;\n};\n\nexport default DragDropManager;\n"]}

package/lib/components/DragDrop/Draggable.d.ts

@@ -1,5 +0,0 @@
-/// <reference types="react" />
-import { DraggableProps } from './DragDrop.types';
-declare const Draggable: <T extends object = object>({ id, type, data, children, onBegin, onEnd: end }: DraggableProps<T>) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
-export default Draggable;
-//# sourceMappingURL=Draggable.d.ts.map

package/lib/components/DragDrop/Draggable.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"Draggable.d.ts","sourceRoot":"","sources":["../../../src/components/DragDrop/Draggable.ts"],"names":[],"mappings":";AAGA,OAAO,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAElD,QAAA,MAAM,SAAS,6LA4Bd,CAAC;AAEF,eAAe,SAAS,CAAC"}

package/lib/components/DragDrop/Draggable.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"Draggable.js","sourceRoot":"","sources":["../../../src/components/DragDrop/Draggable.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAoB,MAAM,OAAO,CAAC;AACjD,OAAO,EAAE,OAAO,EAAqB,MAAM,WAAW,CAAC;AAIvD,MAAM,SAAS,GAAG,CAA4B,EAC5C,EAAE,EACF,IAAI,EACJ,IAAI,EACJ,QAAQ,EACR,OAAO,EACP,KAAK,EAAE,GAAG,EACQ,EAAE,EAAE;IACtB,MAAM,SAAS,GAAyC,MAAM,CAAc,IAAI,CAAC,CAAC;IAElF,MAAM,CAAC,SAAS,EAAE,OAAO,EAAE,UAAU,CAAC,GAAG,OAAO,CAAC;QAC/C,IAAI,EAAE,EAAE,EAAE,EAAE,IAAI,EAAE,IAAI,EAAE;QACxB,OAAO,EAAE,CAAC,OAA0B,EAAE,EAAE,CAAC,CAAC;YACxC,UAAU,EAAE,OAAO,CAAC,UAAU,EAAE;YAChC,MAAM,EAAE,SAAS,CAAC,OAAO;SAC1B,CAAC;QACF,KAAK,EAAE,OAAO,CAAC,CAAC,CAAC,OAAO,CAAC,EAAE,CAAC,CAAC,EAAE,GAAG,OAAO,CAAC,OAAO,CAAC,EAAE,EAAE,EAAE,IAAI,EAAE,IAAI,EAAE,CAAC,CAAC,CAAC,CAAC,SAAS;QACjF,GAAG;KACJ,CAAC,CAAC;IAEH,OAAO,QAAQ,CAAC;QACd,OAAO,EAAE,CAAC,EAAe,EAAE,EAAE;YAC3B,SAAS,CAAC,OAAO,GAAG,EAAE,CAAC;YACvB,OAAO,CAAC,EAAE,CAAC,CAAC;QACd,CAAC;QACD,UAAU;QACV,SAAS;KACV,CAAC,CAAC;AACL,CAAC,CAAC;AAEF,eAAe,SAAS,CAAC","sourcesContent":["import { useRef, MutableRefObject } from 'react';\nimport { useDrag, DragSourceMonitor } from 'react-dnd';\n\nimport { DraggableProps } from './DragDrop.types';\n\nconst Draggable = <T extends object = object>({\n  id,\n  type,\n  data,\n  children,\n  onBegin,\n  onEnd: end\n}: DraggableProps<T>) => {\n  const dragElRef: MutableRefObject<HTMLElement | null> = useRef<HTMLElement>(null);\n\n  const [collected, dragRef, previewRef] = useDrag({\n    item: { id, type, data },\n    collect: (monitor: DragSourceMonitor) => ({\n      isDragging: monitor.isDragging(),\n      dragEl: dragElRef.current\n    }),\n    begin: onBegin ? monitor => ({ ...onBegin(monitor), id, type, data }) : undefined,\n    end\n  });\n\n  return children({\n    dragRef: (el: HTMLElement) => {\n      dragElRef.current = el;\n      dragRef(el);\n    },\n    previewRef,\n    collected\n  });\n};\n\nexport default Draggable;\n"]}

package/lib/components/DragDrop/Droppable.d.ts

@@ -1,5 +0,0 @@
-/// <reference types="react" />
-import { DroppableProps } from './DragDrop.types';
-declare const Droppable: <T extends object = object>({ accept, onDrop, onHover, children }: DroppableProps<T>) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
-export default Droppable;
-//# sourceMappingURL=Droppable.d.ts.map

package/lib/components/DragDrop/Droppable.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"Droppable.d.ts","sourceRoot":"","sources":["../../../src/components/DragDrop/Droppable.ts"],"names":[],"mappings":";AAEA,OAAO,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAElD,QAAA,MAAM,SAAS,iLAiBd,CAAC;AAEF,eAAe,SAAS,CAAC"}

package/lib/components/DragDrop/Droppable.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"Droppable.js","sourceRoot":"","sources":["../../../src/components/DragDrop/Droppable.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAC;AAIpC,MAAM,SAAS,GAAG,CAA4B,EAC5C,MAAM,EACN,MAAM,EACN,OAAO,EACP,QAAQ,EACU,EAAE,EAAE;IACtB,MAAM,CAAC,SAAS,EAAE,OAAO,CAAC,GAAG,OAAO,CAAC;QACnC,MAAM;QACN,IAAI,EAAE,MAAM;QACZ,KAAK,EAAE,OAAO;QACd,OAAO,EAAE,OAAO,CAAC,EAAE,CAAC,CAAC;YACnB,OAAO,EAAE,OAAO,CAAC,OAAO,EAAE;YAC1B,MAAM,EAAE,OAAO,CAAC,MAAM,EAAE;SACzB,CAAC;KACH,CAAC,CAAC;IAEH,OAAO,QAAQ,CAAC,EAAE,OAAO,EAAE,SAAS,EAAE,CAAC,CAAC;AAC1C,CAAC,CAAC;AAEF,eAAe,SAAS,CAAC","sourcesContent":["import { useDrop } from 'react-dnd';\n\nimport { DroppableProps } from './DragDrop.types';\n\nconst Droppable = <T extends object = object>({\n  accept,\n  onDrop,\n  onHover,\n  children\n}: DroppableProps<T>) => {\n  const [collected, dropRef] = useDrop({\n    accept,\n    drop: onDrop,\n    hover: onHover,\n    collect: monitor => ({\n      canDrop: monitor.canDrop(),\n      isOver: monitor.isOver()\n    })\n  });\n\n  return children({ dropRef, collected });\n};\n\nexport default Droppable;\n"]}

package/lib/components/DragDrop/index.d.ts

@@ -1,10 +0,0 @@
-export { default as DragDropManager } from './DragDropManager';
-export { default as Draggable } from './Draggable';
-export { default as Droppable } from './Droppable';
-export { default as DragDropList } from './DragDropList';
-export { DragDropManagerProps } from './DragDropManager';
-export { DraggableProps } from './DragDrop.types';
-export { DroppableProps } from './DragDrop.types';
-export { DragDropListProps } from './DragDrop.types';
-export { DraggableItem } from './DragDrop.types';
-//# sourceMappingURL=index.d.ts.map

package/lib/components/DragDrop/index.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/DragDrop/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,eAAe,EAAE,MAAM,mBAAmB,CAAC;AAC/D,OAAO,EAAE,OAAO,IAAI,SAAS,EAAE,MAAM,aAAa,CAAC;AACnD,OAAO,EAAE,OAAO,IAAI,SAAS,EAAE,MAAM,aAAa,CAAC;AACnD,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,gBAAgB,CAAC;AACzD,OAAO,EAAE,oBAAoB,EAAE,MAAM,mBAAmB,CAAC;AACzD,OAAO,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAClD,OAAO,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAClD,OAAO,EAAE,iBAAiB,EAAE,MAAM,kBAAkB,CAAC;AACrD,OAAO,EAAE,aAAa,EAAE,MAAM,kBAAkB,CAAC"}

package/lib/components/DragDrop/index.js

@@ -1,5 +0,0 @@
-export { default as DragDropManager } from './DragDropManager';
-export { default as Draggable } from './Draggable';
-export { default as Droppable } from './Droppable';
-export { default as DragDropList } from './DragDropList';
-//# sourceMappingURL=index.js.map

package/lib/components/DragDrop/index.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/DragDrop/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,eAAe,EAAE,MAAM,mBAAmB,CAAC;AAC/D,OAAO,EAAE,OAAO,IAAI,SAAS,EAAE,MAAM,aAAa,CAAC;AACnD,OAAO,EAAE,OAAO,IAAI,SAAS,EAAE,MAAM,aAAa,CAAC;AACnD,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,gBAAgB,CAAC","sourcesContent":["export { default as DragDropManager } from './DragDropManager';\nexport { default as Draggable } from './Draggable';\nexport { default as Droppable } from './Droppable';\nexport { default as DragDropList } from './DragDropList';\nexport { DragDropManagerProps } from './DragDropManager';\nexport { DraggableProps } from './DragDrop.types';\nexport { DroppableProps } from './DragDrop.types';\nexport { DragDropListProps } from './DragDrop.types';\nexport { DraggableItem } from './DragDrop.types';\n"]}