@onehat/ui 0.4.99 → 0.4.101

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@onehat/ui",
-	"version": "0.4.99",
+	"version": "0.4.101",
 	"description": "Base UI for OneHat apps",
 	"main": "src/index.js",
 	"type": "module",

package/src/Components/Grid/Grid.js

@@ -201,6 +201,7 @@ function GridComponent(props) {
 			},
 			dragPreviewOptions, // optional object for drag preview positioning options
 			areRowsDragSource = false,
+			areRowsDragFromHandleOnly,
 			rowDragSourceType,
 			getRowDragSourceItem,
 			areRowsDropTarget = false,
@@ -641,10 +642,23 @@ function GridComponent(props) {
 
 							const userHasPermissionToDrag = (!canUser || canUser(EDIT));
 							if (userHasPermissionToDrag) {
+
+								// Determine whether dragging should only be allowed from a handle, based on global default and grid prop override
+								let dragFromRowHandleOnly = true;
+								if (!_.isNil(UiGlobals.gridAreRowsDragFromHandleOnly)) {
+									// allow global default
+									dragFromRowHandleOnly = UiGlobals.gridAreRowsDragFromHandleOnly;
+								}
+								if (!_.isNil(areRowsDragFromHandleOnly)) {
+									// allow grid props override
+									dragFromRowHandleOnly = areRowsDragFromHandleOnly;
+								}
+								
 								// assign event handlers
 								if (canRowsReorder && isReorderMode) {
 									WhichRow = DragSourceGridRow;
 									rowReorderProps.isDragSource = true;
+									rowReorderProps.isDragFromHandleOnly = dragFromRowHandleOnly;
 									rowReorderProps.dragSourceType = 'row';
 									const dragIx = showHeaders ? index - 1 : index;
 									rowReorderProps.dragSourceItem = {
@@ -656,6 +670,14 @@ function GridComponent(props) {
 											onRowReorderDrag(dragState, dragIx);
 										},
 									};
+									// Add custom drag preview options
+									if (dragPreviewOptions) {
+										rowReorderProps.dragPreviewOptions = dragPreviewOptions;
+									}
+									// Add drag preview rendering
+									rowReorderProps.getDragProxy = getCustomDragProxy ?
+										(dragItem) => getCustomDragProxy(item, getSelection()) :
+										null; // Let GlobalDragProxy handle the default case
 									rowReorderProps.onDragEnd = onRowReorderEnd;
 									rowCanDrag = true;
 								} else {
@@ -664,6 +686,7 @@ function GridComponent(props) {
 										WhichRow = DragSourceGridRow;
 										rowDragProps.isDragSource = true;
 										rowDragProps.dragSourceType = rowDragSourceType;
+										rowDragProps.isDragFromHandleOnly = dragFromRowHandleOnly;
 										if (getRowDragSourceItem) {
 											rowDragProps.dragSourceItem = getRowDragSourceItem(item, getSelection, isInSelection, rowDragSourceType);
 											// Ensure all drag items have a component reference

package/src/Components/Grid/GridRow.js

@@ -53,6 +53,7 @@ const GridRow = forwardRef((props, ref) => {
 			isInlineEditorShown,
 			isDraggable = false, // withDraggable
 			isDragSource = false, // withDnd
+			isDragFromHandleOnly = true,
 			isOver = false, // drop target
 			canDrop,
 			draggedItem,
@@ -124,7 +125,22 @@ const GridRow = forwardRef((props, ref) => {
 		}
 		const
 			visibleColumns = _.filter(columnsConfig, (config) => !config.isHidden),
-			isOnlyOneVisibleColumn = visibleColumns.length === 1;
+			isOnlyOneVisibleColumn = visibleColumns.length === 1,
+			rowShouldHaveDragRef = !isDragFromHandleOnly && (isDragSource || isDraggable) && !!dragSourceRef;
+		const setRowRef = (node) => {
+			if (typeof ref === 'function') {
+				ref(node);
+			} else if (ref) {
+				ref.current = node;
+			}
+			if (rowShouldHaveDragRef) {
+				if (typeof dragSourceRef === 'function') {
+					dragSourceRef(node);
+				} else if (dragSourceRef) {
+					dragSourceRef.current = node;
+				}
+			}
+		};
 
 		const renderColumns = (item) => {
 			if (_.isArray(columnsConfig)) {
@@ -136,7 +152,7 @@ const GridRow = forwardRef((props, ref) => {
 					const
 						propsToPass = columnProps[key] || {},
 						colStyle = {},
-						whichCursor = showRowHandle ? 'cursor-text' : 'cursor-pointer'; // when using rowSelectHandle, indicate that the row text is selectable, otherwise indicate that the row itself is selectable
+						whichCursor = showRowHandle && isDragFromHandleOnly ? 'cursor-text' : 'cursor-pointer'; // when using rowSelectHandle, indicate that the row text is selectable, otherwise indicate that the row itself is selectable
 					let colClassName = clsx(
 						'GridRow-column',
 						'p-1',
@@ -144,6 +160,7 @@ const GridRow = forwardRef((props, ref) => {
 						'border-r-black-100',
 						'block',
 						areCellsScrollable ? 'overflow-auto' : 'overflow-hidden',
+						isDragFromHandleOnly ? null : 'select-none',
 						whichCursor,
 						styles.GRID_ROW_MAX_HEIGHT_EXTRA,
 					);
@@ -395,7 +412,7 @@ const GridRow = forwardRef((props, ref) => {
 		let rowContents = <>
 							{showRowHandle &&
 								<RowHandle
-									ref={dragSourceRef}
+									ref={isDragFromHandleOnly ? dragSourceRef : undefined}
 									isDragSource={isDragSource}
 									isDraggable={isDraggable}
 									canSelect={rowCanSelect}
@@ -448,6 +465,7 @@ const GridRow = forwardRef((props, ref) => {
 		let rowClassName = clsx(
 			'GridRow-HStackNative',
 			'items-center',
+			isDragFromHandleOnly ? null : 'select-none',
 		);
 		if (isOnlyOneVisibleColumn) {
 			rowClassName += ' w-full';
@@ -459,7 +477,7 @@ const GridRow = forwardRef((props, ref) => {
 			rowClassName += ' border-4 border-[#0ff]';
 		}
 		let row = <HStackNative
-						ref={ref}
+						ref={rowShouldHaveDragRef ? setRowRef : ref}
 						{...testProps('Row ' + (isSelected ? 'row-selected' : ''))}
 						{...rowProps}
 						key={hash}
@@ -498,6 +516,10 @@ const GridRow = forwardRef((props, ref) => {
 		showRowHandle,
 		rowCanSelect,
 		rowCanDrag,
+		isDragFromHandleOnly,
+		isDragSource,
+		isDraggable,
+		dragSourceRef,
 	]);
 });
 

package/src/Components/Hoc/withComponent.js

@@ -52,6 +52,21 @@ export default function withComponent(WrappedComponent) {
 				parent,
 				reference,
 				path: reference ? (parent?.path || '' ) + '/' + reference : null,
+				waitForChild: (childReference, timeout = 5000) => {
+					return new Promise((resolve, reject) => {
+						const start = Date.now();
+						const checkForChild = () => {
+							if (typeof childrenRef.current[childReference] !== 'undefined') {
+								resolve(childrenRef.current[childReference]);
+							} else if (Date.now() - start > timeout) {
+								reject(new Error(`Timeout waiting for child: ${childReference}`));
+							} else {
+								setTimeout(checkForChild, 50);
+							}
+						};
+						checkForChild();
+					});
+				},
 				hasChild: (childRef) => {
 					const {
 							reference,

package/src/Components/Hoc/withDnd.js

@@ -222,15 +222,18 @@ export function GlobalDragProxy() {
 	const {
 		isDragging,
 		item,
-		currentOffset,
+		clientOffset,
+		sourceClientOffset,
 	} = useDragLayer((monitor) => {
 		return {
 			isDragging: monitor.isDragging(),
 			item: monitor.getItem(),
-			currentOffset: monitor.getSourceClientOffset(),
+			clientOffset: monitor.getClientOffset(),
+			sourceClientOffset: monitor.getSourceClientOffset(),
 		};
 	});
 
+	const currentOffset = clientOffset || sourceClientOffset;
 	if (!isDragging || !currentOffset || CURRENT_MODE !== UI_MODE_WEB) { // Native uses a native drag layer, so we don't need to render a custom proxy
 		return null;
 	}

package/src/UiGlobals.js

@@ -13,6 +13,7 @@ const Globals = {
 	doubleClickingGridRowOpensEditorInViewMode: false,
 	disableSavedColumnsConfig: true,
 	autoSubmitDelay: 500,
+	// gridAreRowsDragFromHandleOnly: true,
 	// stayInEditModeOnSelectionChange: true,
 	// isSideEditorAlwaysEditMode: true,