@onehat/ui 0.3.226 → 0.3.230

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@onehat/ui",
-	"version": "0.3.226",
+	"version": "0.3.230",
 	"description": "Base UI for OneHat apps",
 	"main": "src/index.js",
 	"type": "module",
@@ -26,7 +26,7 @@
 	"license": "UNLICENSED",
 	"dependencies": {
 		"@gluestack-style/react": "^0.2.38",
-		"@gluestack-ui/themed": "^0.1.53",
+		"@gluestack-ui/themed": "^1.1.22",
 		"@hookform/resolvers": "^3.3.1",
 		"@k-renwick/colour-mixer": "^1.2.1",
 		"@onehat/data": "^1.20.0",

package/src/Components/Grid/Grid.js

@@ -50,12 +50,12 @@ import getIconButtonFromConfig from '../../Functions/getIconButtonFromConfig.js'
 import testProps from '../../Functions/testProps.js';
 import nbToRgb from '../../Functions/nbToRgb.js';
 import Loading from '../Messages/Loading.js';
-import GridHeaderRow from './GridHeaderRow.js';
-import GridRow from './GridRow.js';
+import GridHeaderRow from '../Grid/GridHeaderRow.js';
+import GridRow, { DragSourceDropTargetGridRow, DragSourceGridRow, DropTargetGridRow } from './GridRow.js';
 import IconButton from '../Buttons/IconButton.js';
 import ExpandButton from '../Buttons/ExpandButton.js';
 import PaginationToolbar from '../Toolbar/PaginationToolbar.js';
-import NoRecordsFound from './NoRecordsFound.js';
+import NoRecordsFound from '../Grid/NoRecordsFound.js';
 import Toolbar from '../Toolbar/Toolbar.js';
 import NoReorderRows from '../Icons/NoReorderRows.js';
 import ReorderRows from '../Icons/ReorderRows.js';
@@ -204,13 +204,14 @@ function GridComponent(props) {
 		gridContainerRef = useRef(),
 		isAddingRef = useRef(),
 		expandedRowsRef = useRef({}),
+		cachedDragElements = useRef(),
+		idsRef = useRef([]),
 		[isInited, setIsInited] = useState(false),
 		[isReady, setIsReady] = useState(false),
 		[isLoading, setIsLoading] = useState(false),
 		[localColumnsConfig, setLocalColumnsConfigRaw] = useState([]),
 		[isDragMode, setIsDragMode] = useState(false),
-		[dragRowSlot, setDragRowSlot] = useState(null),
-		[dragRowIx, setDragRowIx] = useState(),
+		[dragRow, setDragRow] = useState(),
 		getIsExpanded = (index) => {
 			return !!expandedRowsRef.current[index];
 		},
@@ -303,8 +304,7 @@ function GridComponent(props) {
 		},
 		getFooterToolbarItems = () => {
 			const items = _.map(additionalToolbarButtons, (config, ix) => getIconButtonFromConfig(config, ix, self));
-
-			if (canRowsReorder) {
+			if (canRowsReorder && CURRENT_MODE === UI_MODE_WEB) { // DND is currently web-only  TODO: implement for RN
 				items.unshift(<IconButton
 					key="reorderBtn"
 					parent={self}
@@ -332,159 +332,184 @@ function GridComponent(props) {
 				rowProps = getRowProps && !isHeaderRow ? getRowProps(item) : {},
 				isSelected = !isHeaderRow && !disableWithSelection && isInSelection(item);
 
-			let rowComponent = <Pressable
-						// {...testProps(Repository ? Repository.schema.name + '-' + item.id : item.id)}
-						onPress={(e) => {
-							if (e.preventDefault && e.cancelable) {
-								e.preventDefault();
-							}
-							if (isHeaderRow || isDragMode) {
-								return
-							}
-							if (CURRENT_MODE === UI_MODE_WEB) {
-								switch (e.detail) {
-									case 1: // single click
-										onRowClick(item, e); // sets selection
-										if (onEditorRowClick) {
-											onEditorRowClick(item, index, e);
-										}
-										break;
-									case 2: // double click
-										if (!isSelected) { // If a row was already selected when double-clicked, the first click will deselect it,
-											onRowClick(item, e); // so reselect it
+			let rowComponent =
+				<Pressable
+					// {...testProps(Repository ? Repository.schema.name + '-' + item.id : item.id)}
+					onPress={(e) => {
+						if (e.preventDefault && e.cancelable) {
+							e.preventDefault();
+						}
+						if (isHeaderRow || isDragMode) {
+							return
+						}
+						if (CURRENT_MODE === UI_MODE_WEB) {
+							switch (e.detail) {
+								case 1: // single click
+									onRowClick(item, e); // sets selection
+									if (onEditorRowClick) {
+										onEditorRowClick(item, index, e);
+									}
+									break;
+								case 2: // double click
+									if (!isSelected) { // If a row was already selected when double-clicked, the first click will deselect it,
+										onRowClick(item, e); // so reselect it
+									}
+
+									if (UiGlobals.doubleClickingGridRowOpensEditorInViewMode) { // global setting
+										if (onView) {
+											onView(true);
 										}
-
-										if (UiGlobals.doubleClickingGridRowOpensEditorInViewMode) { // global setting
-											if (onView) {
-												onView(true);
-											}
-										} else {
-											if (onEdit) {
-												if (verifyCanEdit && !verifyCanEdit(selection)) {
-													return;
-												}
-												onEdit();
+									} else {
+										if (onEdit) {
+											if (verifyCanEdit && !verifyCanEdit(selection)) {
+												return;
 											}
+											onEdit();
 										}
-										break;
-									case 3: // triple click
-										break;
-									default:
-								}
-							} else if (CURRENT_MODE === UI_MODE_REACT_NATIVE) {
-								onRowClick(item, e); // sets selection
-								if (onEditorRowClick) {
-									onEditorRowClick(item, index, e);
-								}
-							}
-						}}
-						onLongPress={(e) => {
-							if (e.preventDefault && e.cancelable) {
-								e.preventDefault();
-							}
-							if (isHeaderRow || isDragMode) {
-								return
+									}
+									break;
+								case 3: // triple click
+									break;
+								default:
 							}
-							
-							// context menu
-							const selection = [item];
-							if (!disableWithSelection) {
-								setSelection(selection);
-							}
-							if (onEditorRowClick) { // e.g. inline editor
+						} else if (CURRENT_MODE === UI_MODE_REACT_NATIVE) {
+							onRowClick(item, e); // sets selection
+							if (onEditorRowClick) {
 								onEditorRowClick(item, index, e);
 							}
-							if (onContextMenu) {
-								onContextMenu(item, e, selection, setSelection);
-							}
-						}}
-						flexDirection="row"
-						flexGrow={1}
-					>
-						{({
-							isHovered,
-							isFocused,
-							isPressed,
-						}) => {
-							if (isHeaderRow) {
-								return <GridHeaderRow
-											Repository={Repository}
-											columnsConfig={localColumnsConfig}
-											setColumnsConfig={setLocalColumnsConfig}
-											hideNavColumn={hideNavColumn}
-											canColumnsSort={canColumnsSort}
-											canColumnsReorder={canColumnsReorder}
-											canColumnsResize={canColumnsResize}
-											setSelection={setSelection}
-											gridRef={gridRef}
-											isHovered={isHovered}
-											isInlineEditorShown={isInlineEditorShown}
-										/>;
-							}
+						}
+					}}
+					onLongPress={(e) => {
+						if (e.preventDefault && e.cancelable) {
+							e.preventDefault();
+						}
+						if (isHeaderRow || isDragMode) {
+							return
+						}
+						
+						// context menu
+						const selection = [item];
+						if (!disableWithSelection) {
+							setSelection(selection);
+						}
+						if (onEditorRowClick) { // e.g. inline editor
+							onEditorRowClick(item, index, e);
+						}
+						if (onContextMenu) {
+							onContextMenu(item, e, selection, setSelection);
+						}
+					}}
+					flexDirection="row"
+					flexGrow={1}
+				>
+					{({
+						isHovered,
+						isFocused,
+						isPressed,
+					}) => {
+						if (isHeaderRow) {
+							return <GridHeaderRow
+										Repository={Repository}
+										columnsConfig={localColumnsConfig}
+										setColumnsConfig={setLocalColumnsConfig}
+										hideNavColumn={hideNavColumn}
+										canColumnsSort={canColumnsSort}
+										canColumnsReorder={canColumnsReorder}
+										canColumnsResize={canColumnsResize}
+										setSelection={setSelection}
+										gridRef={gridRef}
+										isHovered={isHovered}
+										isInlineEditorShown={isInlineEditorShown}
+									/>;
+						}
 
-							let bg = rowProps.bg || styles.GRID_ROW_BG,
-								mixWith;
-							if (isSelected) {
-								if (showHovers && isHovered) {
-									mixWith = styles.GRID_ROW_SELECTED_HOVER_BG;
-								} else {
-									mixWith = styles.GRID_ROW_SELECTED_BG;
-								}
-							} else if (showHovers && isHovered) {
-								mixWith = styles.GRID_ROW_HOVER_BG;
-							} else if (alternateRowBackgrounds && index % alternatingInterval === 0) { // i.e. every second line, or every third line
-								mixWith = styles.GRID_ROW_ALTERNATE_BG;
-							}
-							if (mixWith) {
-								const
-									mixWithObj = nbToRgb(mixWith),
-									ratio = mixWithObj.alpha ? 1 - mixWithObj.alpha : 0.5;
-								bg = colourMixer.blend(bg, ratio, mixWithObj.color);
+						let bg = rowProps.bg || styles.GRID_ROW_BG,
+							mixWith;
+						if (isSelected) {
+							if (showHovers && isHovered) {
+								mixWith = styles.GRID_ROW_SELECTED_HOVER_BG;
+							} else {
+								mixWith = styles.GRID_ROW_SELECTED_BG;
 							}
+						} else if (showHovers && isHovered) {
+							mixWith = styles.GRID_ROW_HOVER_BG;
+						} else if (alternateRowBackgrounds && index % alternatingInterval === 0) { // i.e. every second line, or every third line
+							mixWith = styles.GRID_ROW_ALTERNATE_BG;
+						}
+						if (mixWith) {
 							const
-								rowReorderProps = {},
-								rowDragProps = {};
+								mixWithObj = nbToRgb(mixWith),
+								ratio = mixWithObj.alpha ? 1 - mixWithObj.alpha : 0.5;
+							bg = colourMixer.blend(bg, ratio, mixWithObj.color);
+						}
+						const
+							rowReorderProps = {},
+							rowDragProps = {};
+						let WhichRow = GridRow;
+						if (CURRENT_MODE === UI_MODE_WEB) { // DND is currrently web-only  TODO: implement for RN
+							// Create a method that gets an always-current copy of the selection ids
+							const ids = _.map(selection, (item) => item.id);
+							idsRef.current = ids;
+							const getIds = () => idsRef.current;
+
+							// assign event handlers
 							if (canRowsReorder && isDragMode) {
-								rowReorderProps.isDraggable = true;
-								rowReorderProps.mode = VERTICAL;
-								rowReorderProps.onDragStart = onRowReorderDragStart;
-								rowReorderProps.onDrag = onRowReorderDrag;
-								rowReorderProps.onDragStop = onRowReorderDragStop;
-								rowReorderProps.proxyParent = gridRef.current?.getScrollableNode().children[0];
-								rowReorderProps.proxyPositionRelativeToParent = true;
-								rowReorderProps.getParentNode = (node) => node.parentElement.parentElement.parentElement;
-								rowReorderProps.getProxy = getReorderProxy;
+								WhichRow = DragSourceGridRow;
+								rowReorderProps.isDragSource = true;
+								rowReorderProps.dragSourceType = 'row';
+								const dragIx = showHeaders ? index - 1 : index;
+								rowReorderProps.dragSourceItem = {
+									id: item.id,
+									getIds,
+									onDrag: (dragState) => {
+										onRowReorderDrag(dragState, dragIx);
+									},
+								};
+								rowReorderProps.onDragEnd = onRowReorderEnd;
 							} else {
 								// Don't allow drag/drop from withDnd while reordering
 								if (areRowsDragSource) {
+									WhichRow = DragSourceGridRow;
 									rowDragProps.isDragSource = true;
 									rowDragProps.dragSourceType = rowDragSourceType;
-									rowDragProps.dragSourceItem = getRowDragSourceItem ? getRowDragSourceItem(item) : { id: item.id };
+									if (getRowDragSourceItem) {
+										rowDragProps.dragSourceItem = getRowDragSourceItem(item, getIds);
+									} else {
+										rowDragProps.dragSourceItem = {
+											id: item.id,
+											getIds,
+										};
+									}
 								}
 								if (areRowsDropTarget) {
+									WhichRow = DropTargetGridRow;
 									rowDragProps.isDropTarget = true;
 									rowDragProps.dropTargetAccept = dropTargetAccept;
 									rowDragProps.onDrop = (droppedItem) => {
-										// TODO: the item is somehow getting stale
-										// might have something to do with memoization
-										onRowDrop(item, droppedItem);
+										onRowDrop(item, droppedItem); // item is what it was dropped on; droppedItem is the dragSourceItem defined above
 									};
 								}
+								if (areRowsDragSource && areRowsDropTarget) {
+									WhichRow = DragSourceDropTargetGridRow;
+								}
 							}
-							return <GridRow
-										columnsConfig={localColumnsConfig}
-										columnProps={columnProps}
-										fields={fields}
-										rowProps={rowProps}
-										hideNavColumn={hideNavColumn}
-										bg={bg}
-										item={item}
-										isInlineEditorShown={isInlineEditorShown}
-										{...rowReorderProps}
-										{...rowDragProps}
-									/>;
-						}}
-					</Pressable>;
+						}
+						return <WhichRow
+									columnsConfig={localColumnsConfig}
+									columnProps={columnProps}
+									fields={fields}
+									rowProps={rowProps}
+									hideNavColumn={hideNavColumn}
+									bg={bg}
+									item={item}
+									isInlineEditorShown={isInlineEditorShown}
+									{...rowReorderProps}
+									{...rowDragProps}
+
+									key1={item.id}
+								/>;
+					}}
+				</Pressable>;
 
 			if (showRowExpander && !isHeaderRow) {
 				const isExpanded = getIsExpanded(index);
@@ -505,234 +530,134 @@ function GridComponent(props) {
 			}
 			return rowComponent;
 		},
-		getReorderProxy = (node) => {
-			const
-				row = node.parentElement.parentElement,
-				rowRect = row.getBoundingClientRect(),
-				parent = row.parentElement,
-				parentRect = parent.getBoundingClientRect(),
-				proxy = row.cloneNode(true),
-				top = rowRect.top - parentRect.top,
-				dragRowIx = Array.from(parent.children).indexOf(row)
-			
-			setDragRowIx(dragRowIx); // the ix of which record is being dragged
-
-			proxy.style.top = top + 'px';
-			proxy.style.left = '20px';
-			proxy.style.height = rowRect.height + 'px';
-			proxy.style.width = rowRect.width + 'px';
-			proxy.style.display = 'flex';
-			// proxy.style.backgroundColor = '#ccc';
-			proxy.style.position = 'absolute';
-			proxy.style.border = '1px solid #000';
-			return proxy;
-		},
-		onRowReorderDragStart = (info, e, proxy, node) => {
-			// console.log('onRowReorderDragStart', info, e, proxy, node);
-			const
-				proxyRect = proxy.getBoundingClientRect(),
-				row = node.parentElement.parentElement,
-				parent = row.parentElement,
-				parentRect = parent.getBoundingClientRect(),
-				rows = _.filter(parent.children, (childNode) => {
-					return childNode.getBoundingClientRect().height !== 0; // Skip zero-height children
-				}),
-				currentY = proxyRect.top - parentRect.top, // top position of pointer, relative to page
-				headerRowIx = showHeaders ? 0 : null,
-				firstActualRowIx = showHeaders ? 1 : 0;
-
-			// Figure out which index the user wants
-			let newIx = 0;
-			_.each(rows, (child, ix, all) => {
+		getOverState = (rows, currentY, mouseX) => {
+			// determines which row the mouse is over
+			// and whether the marker should be moved to the top or bottom of the row
+			let newIx = -1,
+				useBottom = false;
+			_.each(rows, (row, ix) => {
 				const
-					rect = child.getBoundingClientRect(), // rect of the row of this iteration
+					rect = row.getBoundingClientRect(),
 					{
 						top,
 						bottom,
 						height,
 					} = rect,
-					compensatedTop = top - parentRect.top,
-					compensatedBottom = bottom - parentRect.top,
-					halfHeight = height / 2;
-
-				if (ix === headerRowIx || child === proxy) {
-					return;
-				}
-				if (ix === firstActualRowIx) {
-					// first row
-					if (currentY < compensatedTop + halfHeight) {
-						newIx = firstActualRowIx;
-						return false;
-					} else if (currentY < compensatedBottom) {
-						newIx = firstActualRowIx + 1;
-						return false;
-					}
-					return;
-				} else if (ix === all.length -1) {
-					// last row
-					if (currentY < compensatedTop + halfHeight) {
-						newIx = ix;
-						return false;
-					}
-					newIx = ix +1;
-					return false;
-				}
-				
-				// all other rows
-				if (compensatedTop <= currentY && currentY < compensatedTop + halfHeight) {
+					isOver = (
+						mouseX >= rect.left &&
+						mouseX <= rect.right &&
+						currentY >= rect.top &&
+						currentY <= rect.bottom
+					);
+				if (isOver) {
 					newIx = ix;
-					return false;
-				} else if (currentY < compensatedBottom) {
-					newIx = ix +1;
-					return false;
-				}
-			});
 
-			let useBottom = false;
-			if (!rows[newIx] || rows[newIx] === proxy) {
-				newIx--;
-				useBottom = true;
-			}
+					const
+						halfHeight = height / 2,
+						isOverTopHalf = currentY < top + halfHeight;
 
-			// Render marker showing destination location
-			const
-				rowContainerRect = rows[newIx].getBoundingClientRect(),
-				top = (useBottom ? rowContainerRect.bottom : rowContainerRect.top) - parentRect.top - parseInt(parent.style.borderWidth), // get relative Y position
-				gridRowsContainer = gridRef.current._listRef._scrollRef.childNodes[0],
-				gridRowsContainerRect = gridRowsContainer.getBoundingClientRect(),
-				marker = document.createElement('div');
-
-			marker.style.position = 'absolute';
-			marker.style.top = top -4 + 'px'; // -4 so it's always visible
-			marker.style.height = '4px';
-			marker.style.width = gridRowsContainerRect.width + 'px';
-			marker.style.backgroundColor = '#f00';
-
-			gridRowsContainer.appendChild(marker);
+					useBottom = !isOverTopHalf;
 
-			setDragRowSlot({ ix: newIx, marker, useBottom, });
+					return false;
+				}
+			});
+			return {
+				ix: newIx,
+				useBottom,
+			};
 		},
-		onRowReorderDrag = (info, e, proxy, node) => {
-			// console.log('onRowReorderDrag', info, e, proxy, node);
+		buildCachedDragElements = (dragState) => {
 			const
-				proxyRect = proxy.getBoundingClientRect(),
-				row = node.parentElement.parentElement,
-				parent = row.parentElement,
-				parentRect = parent.getBoundingClientRect(),
-				rows = _.filter(parent.children, (childNode) => {
-					return childNode.getBoundingClientRect().height !== 0; // Skip zero-height children
+				{
+					canDrag,
+					isDragging,
+					clientOffset,
+					sourceClientOffset,
+				} = dragState,
+
+				scrollRef = gridRef.current._listRef._scrollRef,
+				isUsingScroll = scrollRef.childNodes[0].style.overflow === 'auto',
+				flatlist = isUsingScroll ? scrollRef.childNodes[0] : scrollRef,
+				flatlistRect = flatlist.getBoundingClientRect(),
+				rows = _.filter(flatlist.childNodes, (childNode, ix) => {
+					const
+						isZeroHeight = childNode.getBoundingClientRect().height === 0,
+						isHeader = showHeaders && ix === 0;
+					return !isZeroHeight && !isHeader;
 				}),
-				currentY = proxyRect.top - parentRect.top, // top position of pointer, relative to page
-				headerRowIx = showHeaders ? 0 : null,
-				firstActualRowIx = showHeaders ? 1 : 0;
+				{ ix, useBottom } = getOverState(rows, clientOffset.y, clientOffset.x);
 
-			// Figure out which index the user wants
-			let newIx = 0;
-			_.each(rows, (child, ix, all) => {
-				const
-					rect = child.getBoundingClientRect(), // rect of the row of this iteration
-					{
-						top,
-						bottom,
-						height,
-					} = rect,
-					compensatedTop = top - parentRect.top,
-					compensatedBottom = bottom - parentRect.top,
-					halfHeight = height / 2;
 
-				if (ix === headerRowIx || child === proxy) {
-					return;
-				}
-				if (ix === firstActualRowIx) {
-					// first row
-					if (currentY < compensatedTop + halfHeight) {
-						newIx = firstActualRowIx;
-						return false;
-					} else if (currentY < compensatedBottom) {
-						newIx = firstActualRowIx + 1;
-						return false;
-					}
-					return;
-				} else if (ix === all.length -1) {
-					// last row
-					if (currentY < compensatedTop + halfHeight) {
-						newIx = ix;
-						return false;
-					}
-					newIx = ix +1;
-					return false;
-				}
-				
-				// all other rows
-				if (compensatedTop <= currentY && currentY < compensatedTop + halfHeight) {
-					newIx = ix;
-					return false;
-				} else if (currentY < compensatedBottom) {
-					newIx = ix +1;
-					return false;
-				}
-			});
+			// Render marker showing destination location
+			const marker = document.createElement('div');
+			marker.style.position = 'absolute';
+			marker.style.top = '0px';
+			marker.style.height = '8px';
+			marker.style.width = flatlistRect.width + 'px';
+			marker.style.backgroundColor = '#ccc';
+			flatlist.appendChild(marker);
+			
+			if (ix !== -1) {
+				marker.style.visibility = 'visible';
+				const
+					rowContainerRect = rows[ix].getBoundingClientRect(),
+					top = (useBottom ? rowContainerRect.bottom : rowContainerRect.top) 
+							- flatlistRect.top 
+							- (flatlist.style.borderWidth ? parseInt(flatlist.style.borderWidth) : 0); // get relative Y position
+				marker.style.top = top + 'px';
+			} else {
+				marker.style.visibility = 'hidden';
+			}
 
-			let useBottom = false;
-			if (!rows[newIx] || rows[newIx] === proxy) {
-				newIx--;
-				useBottom = true;
+			return { ix, useBottom, marker, rows };
+		},
+		onRowReorderDrag = (dragState, dragIx) => {
+			// initial setup
+			if (!cachedDragElements.current) {
+				cachedDragElements.current = buildCachedDragElements(dragState);
 			}
 
-			// Render marker showing destination location (can't use regular render cycle because this div is absolutely positioned on page)
 			const
-				rowContainerRect = rows[newIx].getBoundingClientRect(),
-				top = (useBottom ? rowContainerRect.bottom : rowContainerRect.top) - parentRect.top - parseInt(parent.style.borderWidth); // get relative Y position
-			let marker = dragRowSlot?.marker;
-			if (marker) {
-				marker.style.top = top -4 + 'px'; // -4 so it's always visible
+				{
+					canDrag,
+					isDragging,
+					clientOffset,
+					sourceClientOffset,
+				} = dragState,
+				{ marker, rows, } = cachedDragElements.current,
+				flatlist = gridRef.current._listRef._scrollRef.childNodes[0],
+				flatlistRect = flatlist.getBoundingClientRect(),
+				{ ix, useBottom } = getOverState(rows, clientOffset.y, clientOffset.x);
+
+			// move marker to new location
+			if (ix !== -1) {
+				marker.style.visibility = 'visible';
+				const
+					rowContainerRect = rows[ix].getBoundingClientRect(),
+					top = (useBottom ? rowContainerRect.bottom : rowContainerRect.top) 
+							- flatlistRect.top 
+							- (flatlist.style.borderWidth ? parseInt(flatlist.style.borderWidth) : 0); // get relative Y position
+				marker.style.top = top + 'px';
+			} else {
+				marker.style.visibility = 'hidden';
 			}
 
-			setDragRowSlot({ ix: newIx, marker, useBottom, });
-			// console.log('onRowReorderDrag slot', newIx);
-
+			cachedDragElements.current = { ix, useBottom, marker, rows, dragIx };
 		},
-		onRowReorderDragStop = (delta, e, config) => {
-			// console.log('onRowReorderDragStop', delta, e, config);
+		onRowReorderEnd = (item, monitor) => {
 			const
-				dropIx = dragRowSlot.ix,
-				compensatedDragIx = showHeaders ? dragRowIx -1 : dragRowIx, // ix, without taking header row into account
-				compensatedDropIx = showHeaders ? dropIx -1 : dropIx, // // ix, without taking header row into account
-				dropPosition = dragRowSlot.useBottom ? DROP_POSITION_AFTER : DROP_POSITION_BEFORE;
-
-			let shouldMove = true,
-				finalDropIx = compensatedDropIx;
-			
-			if (dropPosition === DROP_POSITION_BEFORE) {
-				if (dragRowIx === dropIx || dragRowIx === dropIx -1) { // basically before or after the drag row's origin
-					// Same as origin; don't do anything
-					shouldMove = false;
-				} else {
-					// Actually move it
-					if (!Repository) { // If we're just going to be switching rows, rather than telling server to reorder rows, so maybe adjust finalDropIx...
-						if (finalDropIx > compensatedDragIx) { // if we're dropping *before* the origin ix
-							finalDropIx = finalDropIx -1; // Because we're using BEFORE, we want to switch with the row *prior to* the ix we're dropping before
-						}
-					}
-				}
-			} else if (dropPosition === DROP_POSITION_AFTER) {
-				// Only happens on the very last row. Everything else is BEFORE...
-				if (dragRowIx === dropIx) {
-					// Same as origin; don't do anything
-					shouldMove = false;
-				}
-			}
-
-			if (shouldMove) {
+				{ ix: dropIx, useBottom, marker, rows, dragIx } = cachedDragElements.current,
+				shouldMove = dropIx !== dragIx;
+			if (shouldMove && dropIx !== -1) {
 				// Update the row with the new ix
 				let dragRecord,
 					dropRecord;
 				if (Repository) {
-					dragRecord = Repository.getByIx(compensatedDragIx);
-					dropRecord = Repository.getByIx(finalDropIx);
-					
-					Repository.reorder(dragRecord, dropRecord, dropPosition);
-
+					dragRecord = Repository.getByIx(dragIx);
+					dropRecord = Repository.getByIx(dropIx);
+					if (dropRecord) {
+						Repository.reorder(dragRecord, dropRecord, useBottom ? DROP_POSITION_AFTER : DROP_POSITION_BEFORE);
+					}
 				} else {
 					function arrayMove(arr, fromIndex, toIndex) {
 						var element = arr[fromIndex];
@@ -743,10 +668,8 @@ function GridComponent(props) {
 				}
 			}
 
-			if (dragRowSlot) {
-				dragRowSlot.marker.remove();
-			}
-			setDragRowSlot(null);
+			marker.remove();
+			cachedDragElements.current = null;
 		},
 		calculatePageSize = (containerHeight) => {
 			const
@@ -1027,15 +950,13 @@ function GridComponent(props) {
 	}
 
 	let grid = <FlatList
+					testID="flatlist"
 					ref={gridRef}
 					scrollEnabled={CURRENT_MODE === UI_MODE_WEB}
 					nestedScrollEnabled={true}
 					contentContainerStyle={{
 						overflow: 'auto',
-						borderWidth: isDragMode ? styles.REORDER_BORDER_WIDTH : 0,
-						borderColor: isDragMode ? styles.REORDER_BORDER_COLOR : null,
-						borderStyle: styles.REORDER_BORDER_STYLE,
-						flex: 1,
+						height: '100%',
 					}}
 					refreshing={isLoading}
 					onRefresh={pullToRefresh ? onRefresh : null}
@@ -1056,6 +977,7 @@ function GridComponent(props) {
 					bg="trueGray.100"
 					{...flatListProps}
 				/>
+	
 	if (CURRENT_MODE === UI_MODE_REACT_NATIVE) {
 		grid = <ScrollView flex={1} w="100%">{grid}</ScrollView>
 	}
@@ -1069,8 +991,28 @@ function GridComponent(props) {
 		}
 	}
 
+	const gridContainerBorderProps = {};
+	if (isDragMode) {
+		gridContainerBorderProps.borderWidth = styles.REORDER_BORDER_WIDTH;
+		gridContainerBorderProps.borderColor = styles.REORDER_BORDER_COLOR;
+		gridContainerBorderProps.borderStyle = styles.REORDER_BORDER_STYLE;
+		gridContainerBorderProps.borderTopWidth = null;
+		if (isLoading) {
+			gridContainerBorderProps.borderTopColor = '#f00';
+		} else {
+			gridContainerBorderProps.borderTopColor = null;
+		}
+	} else if (isLoading) {
+		gridContainerBorderProps.borderTopWidth = 4;
+		gridContainerBorderProps.borderTopColor = '#f00';
+	} else {
+		gridContainerBorderProps.borderTopWidth = 1;
+		gridContainerBorderProps.borderTopColor = 'trueGray.300';
+	}
+
 	grid = <Column
 				{...testProps('Grid')}
+				testID="outerContainer"
 				ref={containerRef}
 				w="100%"
 				bg={bg}
@@ -1081,11 +1023,19 @@ function GridComponent(props) {
 			>
 				{topToolbar}
 
-				<Column ref={gridContainerRef} w="100%" flex={1} minHeight={40} borderTopWidth={isLoading ? 2 : 1} borderTopColor={isLoading ? '#f00' : 'trueGray.300'} onClick={() => {
-					if (!isDragMode && !isInlineEditorShown) {
-						deselectAll();
-					}
-				}}>
+				<Column
+					testID="gridContainer"
+					ref={gridContainerRef}
+					w="100%"
+					flex={1}
+					minHeight={40}
+					{...gridContainerBorderProps}
+					onClick={() => {
+						if (!isDragMode && !isInlineEditorShown) {
+							deselectAll();
+						}
+					}}
+				>
 					{grid}
 				</Column>
 

package/src/Components/Grid/GridRow.js

@@ -1,4 +1,4 @@
-import { useMemo, } from 'react';
+import { useEffect, useMemo, useRef, } from 'react';
 import {
 	Box,
 	Row,
@@ -10,7 +10,6 @@ import {
 import getComponentFromType from '../../Functions/getComponentFromType.js';
 import UiGlobals from '../../UiGlobals.js';
 import { withDragSource, withDropTarget } from '../Hoc/withDnd.js';
-import withDraggable from '../Hoc/withDraggable.js';
 import AngleRight from '../Icons/AngleRight.js';
 import RowDragHandle from './RowDragHandle.js';
 import _ from 'lodash';
@@ -30,6 +29,8 @@ function GridRow(props) {
 			isDraggable = false, // withDraggable
 			isDragSource = false, // withDnd
 			isOver = false,
+			dragSourceRef,
+			dropTargetRef,
 		} = props,
 		styles = UiGlobals.styles;
 
@@ -199,11 +200,11 @@ function GridRow(props) {
 												/>}
 						</>;
 
-		if (props.dragSourceRef) {
-			rowContents = <Row flexGrow={1} flex={1} w="100%" bg={bg} ref={props.dragSourceRef}>{rowContents}</Row>;
+		if (dragSourceRef) {
+			rowContents = <Row flexGrow={1} flex={1} w="100%" bg={bg} ref={dragSourceRef}>{rowContents}</Row>;
 		}
-		if (props.dropTargetRef) {
-			rowContents = <Row flexGrow={1} flex={1} w="100%" bg={bg} ref={props.dropTargetRef}>{rowContents}</Row>;
+		if (dropTargetRef) {
+			rowContents = <Row flexGrow={1} flex={1} w="100%" bg={bg} ref={dropTargetRef}>{rowContents}</Row>;
 		}
 
 		return <Row
@@ -225,7 +226,14 @@ function GridRow(props) {
 		hash, // this is an easy way to determine if the data has changed and the item needs to be rerendered
 		isInlineEditorShown,
 		isOver,
+		dragSourceRef,
+		dropTargetRef,
 	]);
 }
 
-export default withDraggable(withDragSource(withDropTarget(GridRow)));
+// export default withDraggable(withDragSource(withDropTarget(GridRow)));
+export default GridRow;
+
+export const DragSourceGridRow = withDragSource(GridRow);
+export const DropTargetGridRow = withDropTarget(GridRow);
+export const DragSourceDropTargetGridRow = withDragSource(withDropTarget(GridRow));

package/src/Components/Hoc/withDnd.js

@@ -1,7 +1,12 @@
-import { useDrag, useDrop } from 'react-dnd'; // https://react-dnd.github.io/react-dnd/about don't forget the wrapping <DndProvider /> as shown here: https://react-dnd.github.io/react-dnd/docs/api/dnd-provider
+import { useEffect, useRef, } from 'react';
+import { useDrag, useDrop, useDragLayer } from 'react-dnd'; // https://react-dnd.github.io/react-dnd/about don't forget the wrapping <DndProvider /> as shown here: https://react-dnd.github.io/react-dnd/docs/api/dnd-provider
+
 
 // This HOC allows components to be dragged and dropped onto another component.
-// It doesn't contraint the moment of the preview item.
+// It can't contrain the movement of the preview item, because react-dnd uses 
+// a native drag layer for its proxy, and there are no contraints on that provided by OS.
+// If you need constraints, you can potentially use a CustomDragLayer (see code at bottom)
+// but it will lag behind, compared to what the native drag layer can do
 
 export function withDragSource(WrappedComponent) {
 	return (props) => {
@@ -16,47 +21,71 @@ export function withDragSource(WrappedComponent) {
 		if (!props.dragSourceItem) {
 			throw Error('dragSourceItem not defined');
 		}
-
+		
 		const {
 				dragSourceType,
 				dragSourceItem,
+				dragPreviewOptions = null,
+				dragOptions = null,
+				dropEffect = null,
+				// onDrag,
+				onDragEnd = null,
+				canDrag = null,
+				isDragging = null,
+				dragCollect = (monitor, props2) => { // Optional. The collecting function. It should return a plain object of the props to return for injection into your component. It receives two parameters, monitor and props. Read the overview for an introduction to the monitors and the collecting function. See the collecting function described in detail in the next section.
+					// monitor fn determines which props from dnd state get passed
+					return {
+						// canDrag: !!monitor.canDrag(), // Returns trueif no drag operation is in progress, and the owner's canDrag() returns true or is not defined.
+						isDragging: !!monitor.isDragging(), // Returns trueif a drag operation is in progress, and either the owner initiated the drag, or its isDragging() is defined and returns true.
+						type: monitor.getItemType(), // Returns a string or a symbol identifying the type of the current dragged item. Returns null if no item is being dragged.
+						item: monitor.getItem(), // Returns a plain object representing the currently dragged item. Every drag source must specify it by returning an object from its beginDrag() method. Returns nullif no item is being dragged.
+						dropResult: monitor.getDropResult(), // Returns a plain object representing the last recorded drop result. The drop targets may optionally specify it by returning an object from their drop()methods. When a chain of drop()is dispatched for the nested targets, bottom up, any parent that explicitly returns its own result from drop()overrides the child drop result previously set by the child. Returns nullif called outside endDrag().
+						didDrop: !!monitor.didDrop(), // Returns trueif some drop target has handled the drop event, falseotherwise. Even if a target did not return a drop result, didDrop() returns true. Use it inside endDrag()to test whether any drop target has handled the drop. Returns falseif called outside endDrag().
+						initialClientOffset: monitor.getInitialClientOffset(), // Returns the { x, y }client offset of the pointer at the time when the current drag operation has started. Returns nullif no item is being dragged.
+						initialSourceClientOffset: monitor.getInitialSourceClientOffset(), // Returns the { x, y }client offset of the drag source component's root DOM node at the time when the current drag operation has started. Returns nullif no item is being dragged.
+						clientOffset: monitor.getClientOffset(), // Returns the last recorded { x, y }client offset of the pointer while a drag operation is in progress. Returns nullif no item is being dragged.
+						differenceFromInitialOffset: monitor.getDifferenceFromInitialOffset(), // Returns the { x, y }difference between the last recorded client offset of the pointer and the client offset when the current drag operation has started. Returns nullif no item is being dragged.
+						sourceClientOffset: monitor.getSourceClientOffset(), // Returns the projected { x, y }client offset of the drag source component's root DOM node, based on its position at the time when the current drag operation has started, and the movement difference. Returns nullif no item is being dragged.
+					};
+				},
 			} = props,
 			[dragState, dragSourceRef, dragPreviewRef] = useDrag(() => { // A specification object or a function that creates a specification object.
 				// The useDrag hook provides a way to wire your component into the DnD system as a drag source. By passing in a specification into useDrag, you declaratively describe the typeof draggable being generated, the itemobject representing the drag source, what props to collect, and more. The useDraghooks returns a few key items: a set of collected props, and refs that may be attached to drag source and drag preview elements
+
 				return {
 					type: dragSourceType, // Required. This must be either a string or a symbol. Only the drop targets registered for the same type will react to this item.
 					item: dragSourceItem, // Required (object or function).
 						// When an object, it is a plain JavaScript object describing the data being dragged. This is the only information available to the drop targets about the drag source so it's important to pick the minimal data they need to know. You may be tempted to put a complex reference here, but you should try very hard to avoid doing this because it couples the drag sources and drop targets. It's a good idea to use something like { id }.
 						// When a function, it is fired at the beginning of the drag operation and returns an object representing the drag operation (see first bullet). If null is returned, the drag operation is cancelled.
-					previewOptions: null, // Optional. A plain JavaScript object describing drag preview options.
-					options: null, // Optional. A plain object optionally containing any of the following properties:
-						// dropEffect: Optional: The type of drop effect to use on this drag. ("move" or "copy" are valid values.)
-					end: null, // (item, monitor) Optional. When the dragging stops, endis called. For every begin call, a corresponding end call is guaranteed. You may call monitor.didDrop() to check whether or not the drop was handled by a compatible drop target. If it was handled, and the drop target specified a drop result by returning a plain object from its drop()method, it will be available as monitor.getDropResult(). This method is a good place to fire a Flux action. Note: If the component is unmounted while dragging, componentparameter is set to be null.
-					canDrag: null, // (monitor): Optional. Use it to specify whether the dragging is currently allowed. If you want to always allow it, just omit this method. Specifying it is handy if you'd like to disable dragging based on some predicate over props. Note: You may not call monitor.canDrag()inside this method.
-					isDragging: null, // (monitor): Optional. By default, only the drag source that initiated the drag operation is considered to be dragging. You can override this behavior by defining a custom isDraggingmethod. It might return something like props.id === monitor.getItem().id. Do this if the original component may be unmounted during the dragging and later “resurrected” with a different parent. For example, when moving a card across the lists in a Kanban board, you want it to retain the dragged appearance—even though technically, the component gets unmounted and a different one gets mounted every time you move it to another list. Note: You may not call monitor.isDragging()inside this method.
-					collect: (monitor, props) => { // Optional. The collecting function. It should return a plain object of the props to return for injection into your component. It receives two parameters, monitor and props. Read the overview for an introduction to the monitors and the collecting function. See the collecting function described in detail in the next section.
+					previewOptions: dragPreviewOptions, // Optional. A plain JavaScript object describing drag preview options.
+					options: dragOptions, // Optional. A plain object optionally containing any of the following properties:
+					dropEffect, // Optional: The type of drop effect to use on this drag. ("move" or "copy" are valid values.)
+					end: onDragEnd, // (item, monitor) Optional. When the dragging stops, endis called. For every begin call, a corresponding end call is guaranteed. You may call monitor.didDrop() to check whether or not the drop was handled by a compatible drop target. If it was handled, and the drop target specified a drop result by returning a plain object from its drop()method, it will be available as monitor.getDropResult(). This method is a good place to fire a Flux action. Note: If the component is unmounted while dragging, componentparameter is set to be null.
+					canDrag, // (monitor): Optional. Use it to specify whether the dragging is currently allowed. If you want to always allow it, just omit this method. Specifying it is handy if you'd like to disable dragging based on some predicate over props. Note: You may not call monitor.canDrag()inside this method.
+					isDragging, // (monitor): Optional. By default, only the drag source that initiated the drag operation is considered to be dragging. You can override this behavior by defining a custom isDraggingmethod. It might return something like props.id === monitor.getItem().id. Do this if the original component may be unmounted during the dragging and later “resurrected” with a different parent. For example, when moving a card across the lists in a Kanban board, you want it to retain the dragged appearance—even though technically, the component gets unmounted and a different one gets mounted every time you move it to another list. Note: You may not call monitor.isDragging()inside this method.
+					collect: dragCollect, /* (monitor, props) => { // Optional. The collecting function. It should return a plain object of the props to return for injection into your component. It receives two parameters, monitor and props. Read the overview for an introduction to the monitors and the collecting function. See the collecting function described in detail in the next section.
 						// monitor fn determines which props from dnd state get passed
 						return {
 							canDrag: !!monitor.canDrag(), // Returns trueif no drag operation is in progress, and the owner's canDrag() returns true or is not defined.
 							isDragging: !!monitor.isDragging(), // Returns trueif a drag operation is in progress, and either the owner initiated the drag, or its isDragging() is defined and returns true.
 							// type: monitor.getItemType(), // Returns a string or a symbol identifying the type of the current dragged item. Returns null if no item is being dragged.
-							// item: monitor.getItem(), // Returns a plain object representing the currently dragged item. Every drag source must specify it by returning an object from its beginDrag()method. Returns nullif no item is being dragged.
+							// item: monitor.getItem(), // Returns a plain object representing the currently dragged item. Every drag source must specify it by returning an object from its beginDrag() method. Returns nullif no item is being dragged.
 							// dropResult: monitor.getDropResult(), // Returns a plain object representing the last recorded drop result. The drop targets may optionally specify it by returning an object from their drop()methods. When a chain of drop()is dispatched for the nested targets, bottom up, any parent that explicitly returns its own result from drop()overrides the child drop result previously set by the child. Returns nullif called outside endDrag().
-							// didDrop: !!monitor.didDrop(), // Returns trueif some drop target has handled the drop event, falseotherwise. Even if a target did not return a drop result, didDrop()returns true. Use it inside endDrag()to test whether any drop target has handled the drop. Returns falseif called outside endDrag().
+							// didDrop: !!monitor.didDrop(), // Returns trueif some drop target has handled the drop event, falseotherwise. Even if a target did not return a drop result, didDrop() returns true. Use it inside endDrag()to test whether any drop target has handled the drop. Returns falseif called outside endDrag().
 							// initialClientOffset: monitor.getInitialClientOffset(), // Returns the { x, y }client offset of the pointer at the time when the current drag operation has started. Returns nullif no item is being dragged.
 							// initialSourceClientOffset: monitor.getInitialSourceClientOffset(), // Returns the { x, y }client offset of the drag source component's root DOM node at the time when the current drag operation has started. Returns nullif no item is being dragged.
 							// clientOffset: monitor.getClientOffset(), // Returns the last recorded { x, y }client offset of the pointer while a drag operation is in progress. Returns nullif no item is being dragged.
 							// differenceFromInitialOffset: monitor.getDifferenceFromInitialOffset(), // Returns the { x, y }difference between the last recorded client offset of the pointer and the client offset when the current drag operation has started. Returns nullif no item is being dragged.
 							// sourceClientOffset: monitor.getSourceClientOffset(), // Returns the projected { x, y }client offset of the drag source component's root DOM node, based on its position at the time when the current drag operation has started, and the movement difference. Returns nullif no item is being dragged.
 						};
-					},
+					},*/
 				};
 			}),
 			{
-				canDrag,
-				isDragging,
+				canDrag: stateCanDrag,
+				isDragging: stateIsDragging,
 				// type,
-				// item,
+				// item: stateItem,
 				// dropResult,
 				// didDrop,
 				// initialClientOffset,
@@ -65,12 +94,24 @@ export function withDragSource(WrappedComponent) {
 				// differenceFromInitialOffset,
 				// sourceClientOffset,
 			} = dragState;
+		
+		if (dragSourceItem.onDrag) {
+			// This will enable the onDrag callback, as useDragLayer will cause withDragSource to re-render any time state changes. useDrag will not
+			const layer = useDragLayer(dragCollect);
+			useEffect(() => {
+				if (layer.isDragging && dragSourceItem?.id === layer.item.id) {
+					dragSourceItem.onDrag(layer);
+				}
+			}, [layer]);
+		}
 
 		return <WrappedComponent 
-					canDrag={canDrag}
-					isDragging={isDragging}
-					dragSourceRef={dragSourceRef}
 					{...props}
+					canDrag={stateCanDrag}
+					isDragging={stateIsDragging}
+					dragSourceRef={dragSourceRef}
+					dragPreviewRef={dragPreviewRef}
+					dragState={dragState}
 				/>;
 	};
 }
@@ -78,6 +119,7 @@ export function withDragSource(WrappedComponent) {
 
 export function withDropTarget(WrappedComponent) {
 	return (props) => {
+
 		if (!props.isDropTarget) {
 			return <WrappedComponent {...props} />;
 		}
@@ -88,17 +130,27 @@ export function withDropTarget(WrappedComponent) {
 
 		const {
 				dropTargetAccept,
+				dropOptions = null,
 				onDrop = null,
+				onDropHover = null,
+				canDrop = null,
+				dropCollect = (monitor, props) => {
+					return {
+						canDrop: !!monitor.canDrop(),
+						isOver: !!monitor.isOver(),
+					};
+				},
 			} = props,
+			localTargetRef = useRef(null),
 			[dropState, dropTargetRef] = useDrop(() => { // A specification object or a function that creates a specification object.
 				// The useDrophook provides a way for you to wire in your component into the DnD system as a drop target. By passing in a specification into the useDrophook, you can specify including what types of data items the drop-target will accept, what props to collect, and more. This function returns an array containing a ref to attach to the Drop Target node and the collected props.
 				return {
 					accept: dropTargetAccept, // Required. A string, a symbol, or an array of either. This drop target will only react to the items produced by the drag sources of the specified type or types. Read the overview to learn more about the items and types.
-					// options: null, // Optional. A plain object. If some of the props to your component are not scalar (that is, are not primitive values or functions), specifying a custom arePropsEqual(props, otherProps) function inside the options object can improve the performance. Unless you have performance problems, don't worry about it.
+					options: dropOptions, // Optional. A plain object. If some of the props to your component are not scalar (that is, are not primitive values or functions), specifying a custom arePropsEqual(props, otherProps) function inside the options object can improve the performance. Unless you have performance problems, don't worry about it.
 					drop: onDrop, // (item, monitor): Optional. Called when a compatible item is dropped on the target. You may either return undefined, or a plain object. If you return an object, it is going to become the drop result and will be available to the drag source in its endDragmethod as monitor.getDropResult(). This is useful in case you want to perform different actions depending on which target received the drop. If you have nested drop targets, you can test whether a nested target has already handled dropby checking monitor.didDrop()and monitor.getDropResult(). Both this method and the source's endDragmethod are good places to fire Flux actions. This method will not be called if canDrop()is defined and returns false.
-					// hover: null, // (item, monitor): Optional. Called when an item is hovered over the component. You can check monitor.isOver({ shallow: true })to test whether the hover happens over only the current target, or over a nested one. Unlike drop(), this method will be called even if canDrop()is defined and returns false. You can check monitor.canDrop()to test whether this is the case.
-					// canDrop: null, // (item, monitor): Optional. Use it to specify whether the drop target is able to accept the item. If you want to always allow it, omit this method. Specifying it is handy if you'd like to disable dropping based on some predicate over props or monitor.getItem(). Note: You may not call monitor.canDrop() inside this method.
-					collect: (monitor, props) => { // Optional. The collecting function. It should return a plain object of the props to return for injection into your component. It receives two parameters, monitorand props. Read the overview for an introduction to the monitors and the collecting function. See the collecting function described in detail in the next section.
+					hover: onDropHover, // (item, monitor): Optional. Called when an item is hovered over the component. You can check monitor.isOver({ shallow: true })to test whether the hover happens over only the current target, or over a nested one. Unlike drop(), this method will be called even if canDrop()is defined and returns false. You can check monitor.canDrop()to test whether this is the case.
+					canDrop, // (item, monitor): Optional. Use it to specify whether the drop target is able to accept the item. If you want to always allow it, omit this method. Specifying it is handy if you'd like to disable dropping based on some predicate over props or monitor.getItem(). Note: You may not call monitor.canDrop() inside this method.
+					collect: dropCollect, /*: (monitor, props) => { // Optional. The collecting function. It should return a plain object of the props to return for injection into your component. It receives two parameters, monitorand props. Read the overview for an introduction to the monitors and the collecting function. See the collecting function described in detail in the next section.
 						return {
 							canDrop: !!monitor.canDrop(),
 							isOver: !!monitor.isOver(),
@@ -112,11 +164,11 @@ export function withDropTarget(WrappedComponent) {
 							// receiveHandlerId
 							// subscribeToStateChange
 						};
-					},
+					},*/
 				};
 			}),
 			{
-				canDrop,
+				canDrop: stateCanDrop,
 				isOver,
 				// didDrop,
 				// clientOffset,
@@ -127,11 +179,70 @@ export function withDropTarget(WrappedComponent) {
 				// initialSourceClientOffset,
 			} = dropState;
 			
+		dropTargetRef(localTargetRef); // register DOM node with react-dnd
+
 		return <WrappedComponent 
-					canDrop={canDrop}
+					canDrop={stateCanDrop}
 					isOver={isOver}
-					dropTargetRef={dropTargetRef}
+					dropTargetRef={localTargetRef}
 					{...props}
 				/>;
 	};
 }
+
+
+// export function CustomDragLayer(props) {
+
+// 	// if (CURRENT_MODE !== UI_MODE_WEB) {
+// 	// 	throw Error('CustomDragLayer only works in web mode');
+// 	// }
+
+// 	const
+// 		{
+// 			onDrag,
+// 			axis = null,
+// 		} = props,
+// 		layer = useDragLayer((monitor) => ({
+// 			isDragging: monitor.isDragging(),
+// 			item: monitor.getItem(),
+// 			currentOffset: monitor.getSourceClientOffset(),
+// 		})),
+// 		{ isDragging, item, currentOffset } = layer;
+
+// 	useEffect(() => {
+// 		if (layer.isDragging) {
+// 			onDrag(layer);
+// 		}
+// 	}, [layer]);
+
+// 	return null;
+
+// 	if (!isDragging || !currentOffset) {
+// 		return null;
+// 	}
+
+// 	let transform;
+// 	if (axis === 'x') {
+// 		transform = `translate(${currentOffset.x}px, 0)`;
+// 	} else if (axis === 'y') {
+// 		transform = `translate(0, ${currentOffset.y}px)`;
+// 	} else {
+// 		transform = `translate(${currentOffset.x}px, ${currentOffset.y}px)`;
+// 	}
+
+// 	return (
+// 		<div id="dragLayer" style={{
+// 			background: '#f00',
+// 			position: 'fixed',
+// 			pointerEvents: 'none',
+// 			zIndex: 10000,
+// 			width: '200px',
+// 			height: '10px',
+// 			left: 0,
+// 			top: 0,
+// 			transform,
+// 		}}>
+// 			{children}
+// 		</div>
+// 	);
+// }