@onehat/ui 0.4.65 → 0.4.67

package/package.json

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

package/src/Components/Fab/DynamicFab.js

@@ -6,6 +6,7 @@ import {
 import Animated, {
 	useSharedValue,
 	useAnimatedStyle,
+	useDerivedValue,
 	withTiming,
 } from 'react-native-reanimated';
 import IconButton from '../Buttons/IconButton.js';
@@ -33,6 +34,15 @@ export default function DynamicFab(props) {
 		}, []),
 		buttonSpacing = 45,
 		verticalOffset = 50; // to shift the entire expanded group up
+		buttonAnimatedStyle = useAnimatedStyle(() => {
+			return {
+				opacity: withTiming(isExpanded.value, { duration: 200 }),
+				pointerEvents: isExpanded.value ? 'auto' : 'none', // Disable interaction when collapsed
+			};
+		}),
+		isExpandedForRender = useDerivedValue(() => { // Use useDerivedValue to safely read the shared value during render
+			return isExpanded.value > 0;
+		});
 
 	let className = `
 		DynamicFab
@@ -55,18 +65,12 @@ export default function DynamicFab(props) {
 								onPress,
 								key,
 								...btnConfigToPass
-							} = btnConfig,
-							animatedStyle = useAnimatedStyle(() => {
-								return {
-									opacity: withTiming(isExpanded.value, { duration: 200 }),
-									pointerEvents: isExpanded.value ? 'auto' : 'none', // Disable interaction when collapsed
-								};
-							});
+							} = btnConfig;
 
 						return <Animated.View
 									key={ix}
 									style={[
-										animatedStyle,
+										buttonAnimatedStyle,
 										{
 											position: 'absolute',
 											bottom: buttonSpacing * (ix + 1) + verticalOffset, // Static vertical positioning
@@ -101,8 +105,10 @@ export default function DynamicFab(props) {
 					tooltipClassName={tooltipClassName}
 					tooltipTriggerClassName={tooltipTriggerClassName}
 				>
-					<FabIcon as={isExpanded.value ? Xmark : icon || EllipsisVertical} />
+					<Animated.View>
+						<FabIcon as={isExpandedForRender.value ? Xmark : icon || EllipsisVertical} />
+					</Animated.View>
 					{label ? <FabLabel>{label}</FabLabel> : null}
 				</FabWithTooltip>
 			</VStack>;
-};
+}

package/src/Components/Form/Form.js

@@ -162,9 +162,9 @@ function Form(props) {
 	let skipAll = false;
 	if (record?.isDestroyed) {
 		skipAll = true; // if record is destroyed, skip render, but allow hooks to still be called
-		if (self?.parent?.parent?.setIsEditorShown) {
-			self.parent.parent.setIsEditorShown(false); // close the editor
-		}
+		// if (self?.parent?.parent?.setIsEditorShown) {
+		// 	self.parent.parent.setIsEditorShown(false); // close the editor
+		// }
 	}
 	const
 		isMultiple = _.isArray(record),
@@ -363,7 +363,7 @@ function Form(props) {
 						style.width = boxW;
 					}
 					elements.push(<Box
-										key={ix}
+										key={fieldName + '-' + ix}
 										className={columnClassName}
 										style={style}
 									>{element}</Box>);
@@ -467,7 +467,7 @@ function Form(props) {
 																`}
 															/> : null;
 										return <HStack
-													key={ix}
+													key={fieldName + '-HStack-' + ix}
 													className={`
 														Form-HStack1
 														flex-${flex}
@@ -624,7 +624,7 @@ function Form(props) {
 					itemDefaultsToPass = itemDefaults;
 				}
 				return <Element
-							key={ix}
+							key={'column-Element-' + type + '-' + ix}
 							title={title}
 							{...defaultsToPass}
 							{...itemDefaultsToPass}
@@ -697,7 +697,7 @@ function Form(props) {
 									</VStack>;
 					}
 				}
-				return <HStack key={ix} className="Form-HStack3 w-full px-2 pb-1">{element}</HStack>;
+				return <HStack key={'Form-HStack3-' + ix} className="Form-HStack3 w-full px-2 pb-1">{element}</HStack>;
 			}
 
 		
@@ -908,7 +908,7 @@ function Form(props) {
 													`}
 												/> : null;
 							return <HStack
-										key={ix}
+										key={'Controller-HStack-' + ix}
 										className={`
 											Form-HStack11
 											min-h-[50px]
@@ -930,6 +930,7 @@ function Form(props) {
 
 				// add the "scroll to top" button
 				getAncillaryButtons().push({
+					key: 'scrollToTop',
 					icon: ArrowUp,
 					reference: 'scrollToTop',
 					onPress: () => scrollToAncillaryItem(0),
@@ -938,14 +939,15 @@ function Form(props) {
 
 				_.each(ancillaryItems, (item, ix) => {
 					let {
-						type,
-						title = null,
-						description = null,
-						icon,
-						selectorId,
-						selectorSelectedField,
-						...itemPropsToPass
-					} = item;
+							type,
+							title = null,
+							description = null,
+							icon,
+							selectorId,
+							selectorSelectedField,
+							...itemPropsToPass
+						} = item,
+						titleElement;
 					if (isMultiple && type !== 'Attachments') {
 						return;
 					}
@@ -953,6 +955,7 @@ function Form(props) {
 						// NOTE: this assumes that if one Ancillary item has an icon, they all do.
 						// If they don't, the ix will be wrong!
 						getAncillaryButtons().push({
+							key: 'ancillaryBtn-' + ix,
 							icon,
 							onPress: () => scrollToAncillaryItem(ix +1), // offset for the "scroll to top" button
 							tooltip: title,
@@ -977,15 +980,15 @@ function Form(props) {
 						if (record?.displayValue) {
 							title += ' for ' + record.displayValue;
 						}
-						title = <Text
-									className={`
-										Form-Ancillary-Title
-										font-bold
-										${styles.FORM_ANCILLARY_TITLE_CLASSNAME}
-									`}
-								>{title}</Text>;
+						titleElement = <Text
+											className={`
+												Form-Ancillary-Title
+												font-bold
+												${styles.FORM_ANCILLARY_TITLE_CLASSNAME}
+											`}
+										>{title}</Text>;
 						if (icon) {
-							title = <HStack className="items-center"><Icon as={icon} className="w-[32px] h-[32px] mr-2" />{title}</HStack>
+							titleElement = <HStack className="items-center"><Icon as={icon} className="w-[32px] h-[32px] mr-2" />{titleElement}</HStack>
 						}
 					}
 					if (description) {
@@ -1006,7 +1009,7 @@ function Form(props) {
 											my-3
 										`}
 									>
-										{title}
+										{titleElement}
 										{description}
 										{element}
 									</VStack>);
@@ -1369,13 +1372,15 @@ function Form(props) {
 						text={submitBtnLabel || 'Submit'}
 					/>}
 			
-				{additionalFooterButtons && _.map(additionalFooterButtons, (props) => {
+				{additionalFooterButtons && _.map(additionalFooterButtons, (props, ix) => {
 					let isDisabled = false;
 					if (props.disableOnInvalid) {
 						isDisabled = !formState.isValid;
 					}
+					const key = 'additionalFooterBtn-' + ix;
 					return <Button
-								{...testProps('additionalFooterBtn-' + props.key)}
+								{...testProps(key)}
+								key={key}
 								{...props}
 								onPress={(e) => handleSubmit(props.onPress, onSubmitError)(e)}
 								icon={props.icon || null}

package/src/Components/Grid/Grid.js

@@ -133,16 +133,11 @@ function GridComponent(props) {
 			showHeaders = true,
 			showHovers = true,
 			showSelectHandle = true,
+			isRowSelectable = true,
+			isRowHoverable = true,
 			canColumnsSort = true,
 			canColumnsReorder = true,
 			canColumnsResize = true,
-			canRowsReorder = false,
-			areRowsDragSource = false,
-			rowDragSourceType,
-			getRowDragSourceItem,
-			areRowsDropTarget = false,
-			dropTargetAccept,
-			onRowDrop,
 			allowToggleSelection = false, // i.e. single click with no shift key toggles the selection of the item clicked on
 			disableBottomToolbar = false,
 			disablePagination = false,
@@ -173,6 +168,18 @@ function GridComponent(props) {
 			noSelectorMeansNoResults = false,
 			disableSelectorSelected = false,
 
+			// DND
+			canRowsReorder = false,
+			canRowAcceptDrop, // optional fn to customize whether each node can accept a dropped item: (targetItem, draggedItem) => boolean
+			getCustomDragProxy, // optional fn to render custom drag preview: (item, selection) => ReactElement
+			dragPreviewOptions, // optional object for drag preview positioning options
+			areRowsDragSource = false,
+			rowDragSourceType,
+			getRowDragSourceItem,
+			areRowsDropTarget = false,
+			dropTargetAccept,
+			onRowDrop,
+
 			// withComponent
 			self,
 
@@ -473,7 +480,13 @@ function GridComponent(props) {
 							onContextMenu(item, e, newSelection);
 						}
 					}}
-					className="Pressable Row flex-row grow">
+					className={`
+						Pressable
+						Row
+						flex-row
+						grow
+					`}
+				>
 					{({
 						hovered,
 						focused,
@@ -505,12 +518,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;
@@ -542,10 +554,21 @@ function GridComponent(props) {
 										} else {
 											rowDragProps.dragSourceItem = {
 												id: item.id,
+												item,
 												getSelection,
 												type: rowDragSourceType,
 											};
 										}
+										
+										// Add custom drag preview options
+										if (dragPreviewOptions) {
+											rowDragProps.dragPreviewOptions = dragPreviewOptions;
+										}
+
+										// Add drag preview rendering
+										rowDragProps.getDragProxy = getCustomDragProxy ? 
+											(dragItem) => getCustomDragProxy(item, getSelection()) :
+											null; // Let GlobalDragProxy handle the default case
 									}
 									if (areRowsDropTarget) {
 										WhichRow = DropTargetGridRow;
@@ -555,6 +578,14 @@ function GridComponent(props) {
 											// NOTE: item is sometimes getting destroyed, but it still as the id, so you can still use it
 											onRowDrop(item, droppedItem); // item is what it was dropped on; droppedItem is the dragSourceItem defined above
 										};
+										rowDragProps.canDrop = (droppedItem, monitor) => {
+											// Check if the drop operation would be valid based on business rules
+											if (canRowAcceptDrop && typeof canRowAcceptDrop === 'function') {
+												return canRowAcceptDrop(item, droppedItem);
+											}
+											// Default: allow all drops
+											return true;
+										};
 									}
 									if (areRowsDragSource && areRowsDropTarget) {
 										WhichRow = DragSourceDropTargetGridRow;
@@ -569,6 +600,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

@@ -1,4 +1,4 @@
-import { useMemo, } from 'react';
+import { useMemo, useEffect, } from 'react';
 import {
 	Box,
 	HStack,
@@ -29,6 +29,8 @@ function GridRow(props) {
 			rowProps,
 			hideNavColumn,
 			showSelectHandle,
+			isRowSelectable,
+			isRowHoverable,
 			isSelected,
 			isHovered,
 			bg,
@@ -41,14 +43,28 @@ function GridRow(props) {
 			isDraggable = false, // withDraggable
 			isDragSource = false, // withDnd
 			isOver = false, // drop target
+			canDrop,
+			draggedItem,
+			validateDrop, // same as canDrop (for visual feedback)
+			getDragProxy,
 			dragSourceRef,
+			dragPreviewRef,
 			dropTargetRef,
+			...propsToPass
 		} = props,
 		styles = UiGlobals.styles;
 
 	if (item.isDestroyed) {
 		return null;
 	}
+	
+	// Hide the default drag preview only when using custom drag proxy (and only on web)
+	useEffect(() => {
+		if (dragPreviewRef && typeof dragPreviewRef === 'function' && getDragProxy && CURRENT_MODE === UI_MODE_WEB) {
+			// Only suppress default drag preview when we have a custom one and we're on web
+			dragPreviewRef(getEmptyImage(), { captureDraggingState: true });
+		}
+	}, [dragPreviewRef, getDragProxy]);
 
 	const
 		isPhantom = item.isPhantom,
@@ -57,13 +73,22 @@ function GridRow(props) {
 
 		let bg = rowProps.bg || props.bg || styles.GRID_ROW_BG,
 			mixWith;
-		if (isSelected) {
+
+		// TODO: Finish Drop styling
+
+		// Use custom validation for enhanced visual feedback, fallback to React DnD's canDrop
+		let actualCanDrop = canDrop;
+		if (isOver && draggedItem && validateDrop) {
+			actualCanDrop = validateDrop(draggedItem);
+		}
+
+		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 +112,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 +121,7 @@ function GridRow(props) {
 						border-r-black-100
 						block
 						overflow-auto
+						${whichCursor}
 						${styles.GRID_ROW_MAX_HEIGHT_EXTRA}
 					`;
 					if (isOnlyOneVisibleColumn) {
@@ -364,7 +391,11 @@ function GridRow(props) {
 		isHovered,
 		isOver,
 		index,
+		canDrop,
+		draggedItem,
+		validateDrop,
 		dragSourceRef,
+		dragPreviewRef,
 		dropTargetRef,
 	]);
 }

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>;
+}