@onehat/ui 0.4.65 → 0.4.66

package/package.json

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

package/src/Components/Grid/Grid.js

@@ -133,6 +133,8 @@ function GridComponent(props) {
 			showHeaders = true,
 			showHovers = true,
 			showSelectHandle = true,
+			isRowSelectable = true,
+			isRowHoverable = true,
 			canColumnsSort = true,
 			canColumnsReorder = true,
 			canColumnsResize = true,
@@ -473,7 +475,13 @@ function GridComponent(props) {
 							onContextMenu(item, e, newSelection);
 						}
 					}}
-					className="Pressable Row flex-row grow">
+					className={`
+						Pressable
+						Row
+						flex-row
+						grow
+					`}
+				>
 					{({
 						hovered,
 						focused,
@@ -505,12 +513,11 @@ function GridComponent(props) {
 							}
 							return headerRow;
 						}
-
 						const
 							rowReorderProps = {},
 							rowDragProps = {};
 						let WhichRow = GridRow;
-						if (CURRENT_MODE === UI_MODE_WEB) { // DND is currrently web-only  TODO: implement for RN
+						if (CURRENT_MODE === UI_MODE_WEB) { // DND is currently web-only  TODO: implement for RN
 							// Create a method that gets an always-current copy of the selection ids
 							dragSelectionRef.current = selection;
 							const getSelection = () => dragSelectionRef.current;
@@ -569,6 +576,8 @@ function GridComponent(props) {
 									fields={fields}
 									rowProps={rowProps}
 									hideNavColumn={hideNavColumn}
+									isRowSelectable={isRowSelectable}
+									isRowHoverable={isRowHoverable}
 									isSelected={isSelected}
 									isHovered={hovered}
 									showHovers={showHovers}

package/src/Components/Grid/GridHeaderRow.js

@@ -20,7 +20,7 @@ import UiGlobals from '../../UiGlobals.js';
 import useBlocking from '../../Hooks/useBlocking.js';
 import testProps from '../../Functions/testProps.js';
 import AngleRight from '../Icons/AngleRight.js';
-import ArrowPointer from '../Icons/ArrowPointer.js';
+import Arcs from '../Icons/Arcs.js';
 import HeaderReorderHandle from './HeaderReorderHandle.js';
 import HeaderResizeHandle from './HeaderResizeHandle.js';
 import HeaderColumnSelectorHandle from './HeaderColumnSelectorHandle.js';
@@ -469,13 +469,13 @@ export default function GridHeaderRow(props) {
 						key="RowSelectHandle"
 						className="Spacer-RowSelectHandle px-2 items-center justify-center flex-none w-[40px]"
 					>
-						<Icon as={ArrowPointer} className={`ArrowPointer w-[20px] h-[20px] text-[#aaa]`} />
+						<Icon as={Arcs} className={`Arcs w-[20px] h-[20px] text-[#aaa]`} />
 					</Box>);
 				}
 				if (areRowsDragSource) {
 					headerColumns.unshift(<Box
 						key="spacer"
-						className="Spacer w-[3px]"
+						className="Spacer w-[7px]"
 					/>);
 				}
 				if (!hideNavColumn) {

package/src/Components/Grid/GridRow.js

@@ -29,6 +29,8 @@ function GridRow(props) {
 			rowProps,
 			hideNavColumn,
 			showSelectHandle,
+			isRowSelectable,
+			isRowHoverable,
 			isSelected,
 			isHovered,
 			bg,
@@ -57,13 +59,13 @@ function GridRow(props) {
 
 		let bg = rowProps.bg || props.bg || styles.GRID_ROW_BG,
 			mixWith;
-		if (isSelected) {
+		if (isRowSelectable && isSelected) {
 			if (showHovers && isHovered) {
 				mixWith = styles.GRID_ROW_SELECTED_BG_HOVER;
 			} else {
 				mixWith = styles.GRID_ROW_SELECTED_BG;
 			}
-		} else if (showHovers && isHovered) {
+		} else if (isRowHoverable && showHovers && isHovered) {
 			mixWith = styles.GRID_ROW_BG_HOVER;
 		} else if (alternateRowBackgrounds && index % alternatingInterval === 0) { // i.e. every second line, or every third line
 			mixWith = styles.GRID_ROW_ALTERNATE_BG;
@@ -87,7 +89,8 @@ function GridRow(props) {
 					}
 					const
 						propsToPass = columnProps[key] || {},
-						colStyle = {};
+						colStyle = {},
+						whichCursor = showSelectHandle ? 'cursor-text' : 'cursor-pointer'; // when using rowSelectHandle, indicate that the row text is selectable, otherwise indicate that the row itself is selectable
 					let colClassName = `
 						GridRow-column
 						p-1
@@ -95,6 +98,7 @@ function GridRow(props) {
 						border-r-black-100
 						block
 						overflow-auto
+						${whichCursor}
 						${styles.GRID_ROW_MAX_HEIGHT_EXTRA}
 					`;
 					if (isOnlyOneVisibleColumn) {

package/src/Components/Grid/RowDragHandle.js

@@ -7,7 +7,7 @@ import GripVertical from '../Icons/GripVertical.js';
 
 function RowDragHandle(props) {	return <VStack
 			style={styles.ewResize}
-			className="RowDragHandle bg-grey-100 w-[3px] items-center justify-center select-none"
+			className="RowDragHandle bg-grey-100 w-[7px] items-center justify-center select-none"
 		>
 				<Icon
 					as={GripVertical}

package/src/Components/Grid/RowSelectHandle.js

@@ -2,14 +2,14 @@ import {
 	Icon,
 	VStack,
 } from '@project-components/Gluestack';
-import ArrowPointer from '../Icons/ArrowPointer.js';
+import Arcs from '../Icons/Arcs.js';
 
 function RowSelectHandle(props) {
 	return <VStack
-				className="RowSelectHandle w-[40px] px-2 items-center justify-center select-none cursor-grab"
+				className="RowSelectHandle w-[40px] px-2 items-center justify-center select-none cursor-pointer"
 			>
 				<Icon
-					as={ArrowPointer}
+					as={Arcs}
 					size="xs"
 					className="w-[20px] h-[20px] text-[#ddd]" />
 			</VStack>;

package/src/Components/Hoc/withAlert.js

@@ -63,6 +63,10 @@ function withAlert(WrappedComponent) {
 									text-[18px]
 									flex-none
 									mr-2
+									w-full
+									break-words
+									whitespace-normal
+									overflow-wrap-anywhere
 								`}>{message}</Text>
 							</Box>
 						</HStack>;

package/src/Components/Hoc/withDnd.js

@@ -1,6 +1,13 @@
 import { forwardRef, 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
-
+import {
+	Box,
+} from '@project-components/Gluestack';
+import {
+	UI_MODE_WEB,
+	UI_MODE_NATIVE,
+	CURRENT_MODE,
+} from '../../Constants/UiModes.js';
 
 // This HOC allows components to be dragged and dropped onto another component.
 // It can't contrain the movement of the preview item, because react-dnd uses 
@@ -32,6 +39,7 @@ export function withDragSource(WrappedComponent) {
 				onDragEnd = null,
 				canDrag = null,
 				isDragging = null,
+				getDragProxy,
 				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 {
@@ -54,7 +62,10 @@ export function withDragSource(WrappedComponent) {
 
 				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).
+					item: {
+						...dragSourceItem,
+						getDragProxy,
+					}, // 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: dragPreviewOptions, // Optional. A plain JavaScript object describing drag preview options.
@@ -139,6 +150,7 @@ export function withDropTarget(WrappedComponent) {
 					return {
 						canDrop: !!monitor.canDrop(),
 						isOver: !!monitor.isOver(),
+						draggedItem: monitor.getItem(), // Pass the dragged item so TreeNode can evaluate custom logic
 					};
 				},
 			} = props,
@@ -171,6 +183,7 @@ export function withDropTarget(WrappedComponent) {
 			{
 				canDrop: stateCanDrop,
 				isOver,
+				draggedItem,
 				// didDrop,
 				// clientOffset,
 				// differenceFromInitialOffset,
@@ -187,64 +200,48 @@ export function withDropTarget(WrappedComponent) {
 					ref={ref}
 					isOver={isOver}
 					dropTargetRef={localTargetRef}
+					draggedItem={draggedItem} // Pass the dragged item
 					{...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>
-// 	);
-// }
+export function GlobalDragProxy() {
+	const {
+		isDragging,
+		item,
+		currentOffset,
+	} = useDragLayer((monitor) => ({
+		isDragging: monitor.isDragging(),
+		item: monitor.getItem(),
+		currentOffset: monitor.getSourceClientOffset(),
+	}));
+
+	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;
+	}
+
+	const getDragProxy = item?.getDragProxy;
+	if (!getDragProxy) {
+		// Only render a custom proxy if one is provided - let React DnD handle default case
+		return null;
+	}
+
+	let proxyContent = null;
+	try {
+		proxyContent = getDragProxy(item);
+	} catch (error) {
+		console.warn('Failed to render custom drag proxy:', error);
+		return null; // use default React DnD proxy
+	}
+
+	return <Box
+				className="fixed pointer-events-none z-[10000] left-0 top-0"
+				style={{
+					transform: `translate(${currentOffset.x}px, ${currentOffset.y}px)`,
+				}}
+			>
+				{proxyContent}
+			</Box>;
+}

package/src/Components/Icons/Arcs.js

@@ -0,0 +1,10 @@
+import { createIcon } from "../Gluestack/icon";
+import { Path, Svg } from 'react-native-svg';
+
+const SvgComponent = createIcon({
+	Root: Svg,
+	viewBox: '0 0 53.98 53.98',
+	path: <Path d="M14.59 0c1.1 1.66 1.74 3.65 1.74 5.79 0 5.82-4.72 10.54-10.54 10.54-2.14 0-4.13-.64-5.79-1.74 1.89 2.86 5.12 4.75 8.8 4.75 5.82 0 10.54-4.72 10.54-10.54 0-3.68-1.89-6.92-4.75-8.8zM49.23 0c1.1 1.66 1.74 3.65 1.74 5.79 0 5.82-4.72 10.54-10.54 10.54-2.14 0-4.13-.64-5.79-1.74 1.89 2.86 5.12 4.75 8.8 4.75 5.82 0 10.54-4.72 10.54-10.54 0-3.68-1.89-6.92-4.75-8.8zM14.59 34.64c1.1 1.66 1.74 3.65 1.74 5.79 0 5.82-4.72 10.54-10.54 10.54-2.14 0-4.13-.64-5.79-1.74 1.89 2.86 5.12 4.75 8.8 4.75 5.82 0 10.54-4.72 10.54-10.54 0-3.68-1.89-6.92-4.75-8.8zM49.23 34.64c1.1 1.66 1.74 3.65 1.74 5.79 0 5.82-4.72 10.54-10.54 10.54-2.14 0-4.13-.64-5.79-1.74 1.89 2.86 5.12 4.75 8.8 4.75 5.82 0 10.54-4.72 10.54-10.54 0-3.68-1.89-6.92-4.75-8.8z" />,
+});
+
+export default SvgComponent