@pega/cosmos-react-dnd 2.1.5 → 2.1.6

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (41) hide show
  1. package/package.json +2 -2
  2. package/lib/components/DragDropList/DragDropList.d.ts +0 -6
  3. package/lib/components/DragDropList/DragDropList.d.ts.map +0 -1
  4. package/lib/components/DragDropList/DragDropList.js +0 -168
  5. package/lib/components/DragDropList/DragDropList.js.map +0 -1
  6. package/lib/components/DragDropList/DragDropList.types.d.ts +0 -34
  7. package/lib/components/DragDropList/DragDropList.types.d.ts.map +0 -1
  8. package/lib/components/DragDropList/DragDropList.types.js +0 -2
  9. package/lib/components/DragDropList/DragDropList.types.js.map +0 -1
  10. package/lib/components/DragDropList/index.d.ts +0 -3
  11. package/lib/components/DragDropList/index.d.ts.map +0 -1
  12. package/lib/components/DragDropList/index.js +0 -2
  13. package/lib/components/DragDropList/index.js.map +0 -1
  14. package/lib/components/DragDropManager/DragDropManager.d.ts +0 -7
  15. package/lib/components/DragDropManager/DragDropManager.d.ts.map +0 -1
  16. package/lib/components/DragDropManager/DragDropManager.js +0 -8
  17. package/lib/components/DragDropManager/DragDropManager.js.map +0 -1
  18. package/lib/components/DragDropManager/index.d.ts +0 -2
  19. package/lib/components/DragDropManager/index.d.ts.map +0 -1
  20. package/lib/components/DragDropManager/index.js +0 -2
  21. package/lib/components/DragDropManager/index.js.map +0 -1
  22. package/lib/components/Draggable/Draggable.d.ts +0 -28
  23. package/lib/components/Draggable/Draggable.d.ts.map +0 -1
  24. package/lib/components/Draggable/Draggable.js +0 -24
  25. package/lib/components/Draggable/Draggable.js.map +0 -1
  26. package/lib/components/Draggable/index.d.ts +0 -2
  27. package/lib/components/Draggable/index.d.ts.map +0 -1
  28. package/lib/components/Draggable/index.js +0 -2
  29. package/lib/components/Draggable/index.js.map +0 -1
  30. package/lib/components/Droppable/Droppable.d.ts +0 -23
  31. package/lib/components/Droppable/Droppable.d.ts.map +0 -1
  32. package/lib/components/Droppable/Droppable.js +0 -15
  33. package/lib/components/Droppable/Droppable.js.map +0 -1
  34. package/lib/components/Droppable/index.d.ts +0 -2
  35. package/lib/components/Droppable/index.d.ts.map +0 -1
  36. package/lib/components/Droppable/index.js +0 -2
  37. package/lib/components/Droppable/index.js.map +0 -1
  38. package/lib/index.d.ts +0 -9
  39. package/lib/index.d.ts.map +0 -1
  40. package/lib/index.js +0 -10
  41. package/lib/index.js.map +0 -1
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@pega/cosmos-react-dnd",
3
- "version": "2.1.5",
3
+ "version": "2.1.6",
4
4
  "author": "Pegasystems",
5
5
  "license": "SEE LICENSE IN LICENSE",
6
6
  "repository": {
@@ -20,7 +20,7 @@
20
20
  "build": "tsc -b"
21
21
  },
22
22
  "dependencies": {
23
- "@pega/cosmos-react-core": "2.1.5",
23
+ "@pega/cosmos-react-core": "2.1.6",
24
24
  "dnd-core": "14.0.1",
25
25
  "polished": "^4.1.0",
26
26
  "react": "^16.14.0 || ^17.0.0",
@@ -1,6 +0,0 @@
1
- /// <reference types="react" />
2
- import { ForwardProps } from '@pega/cosmos-react-core';
3
- import { DragDropListProps } from './DragDropList.types';
4
- declare const DragDropList: <T extends object = object>({ accept, items, itemRenderer: ItemRenderer, emptyRenderer: EmptyRenderer, onChange, pullMode, pushMode, as: Component, ...restProps }: DragDropListProps<T> & ForwardProps) => JSX.Element;
5
- export default DragDropList;
6
- //# sourceMappingURL=DragDropList.d.ts.map
@@ -1 +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"}
@@ -1,168 +0,0 @@
1
- import { jsx as _jsx } from "react/jsx-runtime";
2
- import { useCallback, useState, useRef } from 'react';
3
- import { useElement, useAfterInitialEffect, useTriggerableLayoutEffect } from '@pega/cosmos-react-core';
4
- import Draggable from '../Draggable';
5
- import Droppable from '../Droppable';
6
- const middleYOfRect = ({ top, bottom }) => top + (bottom - top) / 2;
7
- const DragDropList = ({ accept, items, itemRenderer: ItemRenderer, emptyRenderer: EmptyRenderer, onChange, pullMode = 'remove', pushMode = 'insert', as: Component = 'ul', ...restProps }) => {
8
- const [internalItems, setInternalItems] = useState(items);
9
- const itemRectsRef = useRef(null);
10
- const [listEl, setListEl] = useElement();
11
- const getItemRects = useCallback(() => {
12
- if (!listEl || listEl.children.length === 0)
13
- return null;
14
- return [...listEl.children].map(itemEl => {
15
- return itemEl.getBoundingClientRect();
16
- });
17
- }, [listEl]);
18
- useAfterInitialEffect(() => {
19
- setInternalItems(items);
20
- }, [items]);
21
- const triggerOnChange = useTriggerableLayoutEffect(useCallback(() => {
22
- onChange(internalItems);
23
- }, [onChange, internalItems]));
24
- const getInsertIndex = useCallback((item, monitor) => {
25
- itemRectsRef.current = getItemRects();
26
- const { current: itemRects } = itemRectsRef;
27
- let insertIndex = -1;
28
- const prevIndex = internalItems.findIndex(({ id }) => id === item.id);
29
- const clientXY = monitor.getClientOffset();
30
- if (!itemRects || !clientXY)
31
- return insertIndex;
32
- const dragPreviewRectTop = clientXY.y;
33
- const atHead = dragPreviewRectTop < middleYOfRect(itemRects[0]);
34
- const atTail = dragPreviewRectTop >= middleYOfRect(itemRects[itemRects.length - 1]);
35
- if (atHead) {
36
- insertIndex = 0;
37
- }
38
- else if (atTail) {
39
- insertIndex = prevIndex === itemRects.length - 1 ? prevIndex : itemRects.length;
40
- }
41
- else {
42
- itemRects.some((rect, i, rects) => {
43
- if (i === rects.length - 1) {
44
- if (prevIndex === i)
45
- insertIndex = i;
46
- return true;
47
- }
48
- const belowCurrent = dragPreviewRectTop >= middleYOfRect(rect);
49
- const aboveNext = dragPreviewRectTop < middleYOfRect(rects[i + 1]);
50
- if (belowCurrent && aboveNext) {
51
- if (prevIndex !== -1 && i >= prevIndex)
52
- insertIndex = i;
53
- else
54
- insertIndex = i + 1;
55
- return true;
56
- }
57
- return false;
58
- });
59
- }
60
- return insertIndex;
61
- }, [getItemRects, internalItems]);
62
- const removeById = useCallback((itemId) => {
63
- if (pullMode === 'remove') {
64
- setInternalItems(currentItems => currentItems.filter(({ id }) => id !== itemId));
65
- }
66
- }, [pullMode]);
67
- const normalizeItems = useCallback(() => {
68
- setInternalItems(currentItems => currentItems.map(({ id, data, type }) => ({
69
- id,
70
- data,
71
- type
72
- })));
73
- }, []);
74
- const positionItems = useCallback((item, monitor) => {
75
- if (!monitor.canDrop())
76
- return;
77
- const prevIndex = internalItems.findIndex(({ id }) => id === item.id);
78
- if (prevIndex === -1) {
79
- item.removeFromCurrent?.();
80
- item.removeFromCurrent = () => {
81
- removeById(item.id);
82
- };
83
- item.normalizeDestination = normalizeItems;
84
- item.changeDestination = triggerOnChange;
85
- }
86
- let insertIndex = 0;
87
- if (pushMode === 'insert')
88
- insertIndex = getInsertIndex(item, monitor);
89
- if (pushMode === 'append')
90
- insertIndex = internalItems.length + 1;
91
- let newItems;
92
- // Is the current being dragged is within its own list
93
- if (prevIndex !== -1) {
94
- if (insertIndex === prevIndex || pushMode !== 'insert')
95
- return;
96
- newItems = internalItems.filter(({ id }) => id !== item.id);
97
- newItems.splice(insertIndex, 0, item);
98
- if (typeof pushMode === 'function')
99
- setInternalItems(newItems.sort(pushMode));
100
- else
101
- setInternalItems(newItems);
102
- }
103
- else {
104
- newItems = [...internalItems];
105
- newItems.splice(insertIndex, 0, item);
106
- if (typeof pushMode === 'function')
107
- setInternalItems(newItems.sort(pushMode));
108
- else
109
- setInternalItems(newItems);
110
- }
111
- }, [internalItems, pushMode, getInsertIndex, normalizeItems, triggerOnChange, removeById]);
112
- const onHover = positionItems;
113
- const onDrop = positionItems;
114
- const onBegin = useCallback((itemId) => () => {
115
- const initialIndex = internalItems.findIndex(({ id }) => id === itemId);
116
- return {
117
- removeFromCurrent: () => {
118
- removeById(itemId);
119
- },
120
- returnToSource: (item) => {
121
- setInternalItems(currentItems => {
122
- const newItems = currentItems.filter(({ id }) => id !== itemId);
123
- newItems.splice(initialIndex, 0, item);
124
- return newItems;
125
- });
126
- normalizeItems();
127
- },
128
- normalizeDestination: normalizeItems,
129
- changeSource: triggerOnChange,
130
- changeDestination: triggerOnChange
131
- };
132
- }, [internalItems, normalizeItems, triggerOnChange, removeById]);
133
- const onEnd = useCallback((item, monitor) => {
134
- if (!item)
135
- return;
136
- if (monitor.didDrop()) {
137
- item.normalizeDestination?.();
138
- if (item.changeSource !== item.changeDestination)
139
- item.changeSource?.();
140
- item.changeDestination?.();
141
- }
142
- else {
143
- item.removeFromCurrent?.();
144
- item.returnToSource?.(item);
145
- }
146
- }, []);
147
- const emptyContent = EmptyRenderer ? _jsx(EmptyRenderer, {}, void 0) : null;
148
- return (_jsx(Droppable, { accept: accept, onHover: onHover, onDrop: onDrop, children: ({ dropRef }) => {
149
- return (_jsx(Component, { ref: (el) => {
150
- dropRef(el);
151
- setListEl(el);
152
- }, ...restProps, children: internalItems.length === 0
153
- ? emptyContent
154
- : internalItems.map(item => {
155
- return (_jsx(Draggable, { id: item.id, type: item.type, data: item.data, onBegin: onBegin(item.id), onEnd: onEnd, children: ({ dragRef, previewRef, collected }) => {
156
- return (_jsx(ItemRenderer, { ...{
157
- ...item,
158
- dragRef,
159
- previewRef,
160
- ...collected,
161
- isDragging: collected.isDragging || !!item.removeFromCurrent
162
- } }, void 0));
163
- } }, item.id));
164
- }) }, void 0));
165
- } }, void 0));
166
- };
167
- export default DragDropList;
168
- //# sourceMappingURL=DragDropList.js.map
@@ -1 +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"]}
@@ -1,34 +0,0 @@
1
- import { RefCallback, ComponentType } from 'react';
2
- import { AsProp, BaseProps, NoChildrenProp } from '@pega/cosmos-react-core';
3
- import { DraggableItem, DraggableCollectedProps } from '../Draggable';
4
- import { DroppableProps } from '../Droppable';
5
- export interface ItemRendererProps<T extends object = object> extends DraggableItem<T>, DraggableCollectedProps {
6
- dragRef: RefCallback<HTMLElement>;
7
- previewRef: RefCallback<HTMLElement>;
8
- }
9
- export interface DragDropListProps<T extends object = object> extends AsProp, BaseProps, NoChildrenProp {
10
- /** Type of item allowed to be dropped on this list (useful when there is multiple lists that share data). */
11
- accept: DroppableProps['accept'];
12
- /** Array of data objects used for the list. */
13
- items: DraggableItem<T>[];
14
- /**
15
- * @default "remove"
16
- */
17
- pullMode?: 'clone' | 'remove';
18
- /**
19
- * @default "insert"
20
- */
21
- pushMode?: 'insert' | 'prepend' | 'append' | ((a: DraggableItem<T>, b: DraggableItem<T>) => number);
22
- /** User defined function that should return content for the draggable element. */
23
- itemRenderer: ComponentType<ItemRendererProps<T>>;
24
- /**
25
- * Enable drag handle elements for each of the list items. By default the entire element is draggable.
26
- * @default false
27
- */
28
- dragHandles?: boolean;
29
- /** User defined function(Component) that should return content for when the list is empty. */
30
- emptyRenderer?: ComponentType;
31
- /** Called when list data is updated. */
32
- onChange: (items: DragDropListProps<T>['items']) => void;
33
- }
34
- //# sourceMappingURL=DragDropList.types.d.ts.map
@@ -1 +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,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,wCAAwC;IACxC,QAAQ,EAAE,CAAC,KAAK,EAAE,iBAAiB,CAAC,CAAC,CAAC,CAAC,OAAO,CAAC,KAAK,IAAI,CAAC;CAC1D"}
@@ -1,2 +0,0 @@
1
- export {};
2
- //# sourceMappingURL=DragDropList.types.js.map
@@ -1 +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, 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. */\n onChange: (items: DragDropListProps<T>['items']) => void;\n}\n"]}
@@ -1,3 +0,0 @@
1
- export { default } from './DragDropList';
2
- export { DragDropListProps, ItemRendererProps } from './DragDropList.types';
3
- //# sourceMappingURL=index.d.ts.map
@@ -1 +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"}
@@ -1,2 +0,0 @@
1
- export { default } from './DragDropList';
2
- //# sourceMappingURL=index.js.map
@@ -1 +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"]}
@@ -1,7 +0,0 @@
1
- import { FunctionComponent, ReactNode } from 'react';
2
- export interface DragDropManagerProps {
3
- children: ReactNode;
4
- }
5
- declare const DragDropManager: FunctionComponent<DragDropManagerProps>;
6
- export default DragDropManager;
7
- //# sourceMappingURL=DragDropManager.d.ts.map
@@ -1 +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"}
@@ -1,8 +0,0 @@
1
- import { jsx as _jsx } from "react/jsx-runtime";
2
- import { DndProvider } from 'react-dnd';
3
- import { HTML5Backend } from 'react-dnd-html5-backend';
4
- const DragDropManager = ({ children }) => {
5
- return _jsx(DndProvider, { backend: HTML5Backend, children: children }, void 0);
6
- };
7
- export default DragDropManager;
8
- //# sourceMappingURL=DragDropManager.js.map
@@ -1 +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"]}
@@ -1,2 +0,0 @@
1
- export { default, DragDropManagerProps } from './DragDropManager';
2
- //# sourceMappingURL=index.d.ts.map
@@ -1 +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"}
@@ -1,2 +0,0 @@
1
- export { default } from './DragDropManager';
2
- //# sourceMappingURL=index.js.map
@@ -1 +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"]}
@@ -1,28 +0,0 @@
1
- import { RefCallback, ReactElement } from 'react';
2
- import { DragSourceMonitor } from 'react-dnd';
3
- import { SourceType } from 'dnd-core';
4
- export interface DraggableItem<T extends object = object> {
5
- /** Draggable item id */
6
- id: string;
7
- /** Draggable item type */
8
- type: SourceType;
9
- /** Arbitrary data associated with this drag item */
10
- data?: T;
11
- }
12
- export interface DraggableCollectedProps {
13
- isDragging: boolean;
14
- dragEl: HTMLElement | null;
15
- }
16
- export interface DraggableProps<T extends object = object> extends DraggableItem<T> {
17
- onBegin?: (monitor: DragSourceMonitor) => object;
18
- /** Called when drag item is dropped on a valid drop target */
19
- onEnd?: (item: DraggableItem<T> | undefined, monitor: DragSourceMonitor) => void;
20
- children: (props: {
21
- dragRef: RefCallback<HTMLElement>;
22
- previewRef: RefCallback<HTMLElement>;
23
- collected: DraggableCollectedProps;
24
- }) => ReactElement;
25
- }
26
- declare const Draggable: <T extends object = object>({ id, type, data, onBegin, onEnd, children }: DraggableProps<T>) => ReactElement<any, string | import("react").JSXElementConstructor<any>>;
27
- export default Draggable;
28
- //# sourceMappingURL=Draggable.d.ts.map
@@ -1 +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"}
@@ -1,24 +0,0 @@
1
- import { useRef } from 'react';
2
- import { useDrag } from 'react-dnd';
3
- const Draggable = ({ id, type, data, onBegin, onEnd, children }) => {
4
- const dragElRef = useRef(null);
5
- const [collected, dragRef, previewRef] = useDrag(() => ({
6
- type,
7
- item: monitor => ({ ...onBegin?.(monitor), id, type, data }),
8
- end: onEnd,
9
- collect: monitor => ({
10
- isDragging: monitor.isDragging(),
11
- dragEl: dragElRef.current
12
- })
13
- }), [id, type, data, onBegin, onEnd]);
14
- return children({
15
- dragRef: (el) => {
16
- dragElRef.current = el;
17
- dragRef(el);
18
- },
19
- previewRef,
20
- collected
21
- });
22
- };
23
- export default Draggable;
24
- //# sourceMappingURL=Draggable.js.map
@@ -1 +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"]}
@@ -1,2 +0,0 @@
1
- export { default, DraggableProps, DraggableItem, DraggableCollectedProps } from './Draggable';
2
- //# sourceMappingURL=index.d.ts.map
@@ -1 +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"}
@@ -1,2 +0,0 @@
1
- export { default } from './Draggable';
2
- //# sourceMappingURL=index.js.map
@@ -1 +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"]}
@@ -1,23 +0,0 @@
1
- import { RefCallback, ReactElement } from 'react';
2
- import { DropTargetMonitor } from 'react-dnd';
3
- import { TargetType } from 'dnd-core';
4
- import { DraggableItem } from '../Draggable';
5
- export interface DroppableProps<T extends object = object> {
6
- /** Type of item allowed to be dropped on this drop target */
7
- accept: TargetType;
8
- /** Called when drop target is hovered with valid Droppable item */
9
- onHover?: (item: DraggableItem<T>, monitor: DropTargetMonitor) => void;
10
- /** Called when drag item is dropped on a valid drop target */
11
- onDrop?: (item: DraggableItem<T>, monitor: DropTargetMonitor) => void;
12
- /** Called when item is dropped on this drop target */
13
- children: (refs: {
14
- dropRef: RefCallback<HTMLElement>;
15
- collected: {
16
- canDrop: boolean;
17
- isOver: boolean;
18
- };
19
- }) => ReactElement;
20
- }
21
- declare const Droppable: <T extends object = object>({ accept, onDrop, onHover, children }: DroppableProps<T>) => ReactElement<any, string | import("react").JSXElementConstructor<any>>;
22
- export default Droppable;
23
- //# sourceMappingURL=Droppable.d.ts.map
@@ -1 +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"}
@@ -1,15 +0,0 @@
1
- import { useDrop } from 'react-dnd';
2
- const Droppable = ({ accept, onDrop, onHover, children }) => {
3
- const [collected, dropRef] = useDrop(() => ({
4
- accept,
5
- drop: onDrop,
6
- hover: onHover,
7
- collect: monitor => ({
8
- canDrop: monitor.canDrop(),
9
- isOver: monitor.isOver()
10
- })
11
- }), [accept, onDrop, onHover]);
12
- return children({ dropRef, collected });
13
- };
14
- export default Droppable;
15
- //# sourceMappingURL=Droppable.js.map
@@ -1 +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"]}
@@ -1,2 +0,0 @@
1
- export { default, DroppableProps } from './Droppable';
2
- //# sourceMappingURL=index.d.ts.map
@@ -1 +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"}
@@ -1,2 +0,0 @@
1
- export { default } from './Droppable';
2
- //# sourceMappingURL=index.js.map
@@ -1 +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 DELETED
@@ -1,9 +0,0 @@
1
- export { default as DragDropList } from './components/DragDropList';
2
- export * from './components/DragDropList';
3
- export { default as DragDropManager } from './components/DragDropManager';
4
- export * from './components/DragDropManager';
5
- export { default as Draggable } from './components/Draggable';
6
- export * from './components/Draggable';
7
- export { default as Droppable } from './components/Droppable';
8
- export * from './components/Droppable';
9
- //# sourceMappingURL=index.d.ts.map
@@ -1 +0,0 @@
1
- {"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 DELETED
@@ -1,10 +0,0 @@
1
- // This file is autogenerated. Any changes will be overwritten.
2
- export { default as DragDropList } from './components/DragDropList';
3
- export * from './components/DragDropList';
4
- export { default as DragDropManager } from './components/DragDropManager';
5
- export * from './components/DragDropManager';
6
- export { default as Draggable } from './components/Draggable';
7
- export * from './components/Draggable';
8
- export { default as Droppable } from './components/Droppable';
9
- export * from './components/Droppable';
10
- //# sourceMappingURL=index.js.map
package/lib/index.js.map DELETED
@@ -1 +0,0 @@
1
- {"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"]}