@onehat/ui 0.4.66 → 0.4.68

package/package.json

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

package/src/Components/Fab/DynamicFab.js

@@ -1,13 +1,9 @@
-import { useCallback } from 'react';
+import { useCallback, useState } from 'react';
 import {
+	Box,
 	Fab, FabIcon, FabLabel,
 	VStack,
 } from '@project-components/Gluestack';
-import Animated, {
-	useSharedValue,
-	useAnimatedStyle,
-	withTiming,
-} from 'react-native-reanimated';
 import IconButton from '../Buttons/IconButton.js';
 import FabWithTooltip from './FabWithTooltip.js';
 import EllipsisVertical from '../Icons/EllipsisVertical.js';
@@ -19,7 +15,7 @@ import Xmark from '../Icons/Xmark.js';
 export default function DynamicFab(props) {
 	const {
 			icon,
-			buttons, // to show when expanded
+			buttons = [], // to show when expanded
 			label,
 			tooltip,
 			tooltipPlacement = 'left',
@@ -27,13 +23,14 @@ export default function DynamicFab(props) {
 			tooltipTriggerClassName,
 			collapseOnPress = true,
 		} = props,
-		isExpanded = useSharedValue(0),
+		[isExpanded, setIsExpanded] = useState(false),
 		toggleFab = useCallback(() => {
-			isExpanded.value = isExpanded.value ? 0 : 1;
+			setIsExpanded(prev => !prev);
 		}, []),
 		buttonSpacing = 45,
 		verticalOffset = 50; // to shift the entire expanded group up
 
+
 	let className = `
 		DynamicFab
 		fixed
@@ -55,24 +52,19 @@ 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;
+
+						if (!isExpanded) {
+							return null;
+						}
 
-						return <Animated.View
+						return <Box
 									key={ix}
-									style={[
-										animatedStyle,
-										{
-											position: 'absolute',
-											bottom: buttonSpacing * (ix + 1) + verticalOffset, // Static vertical positioning
-											right: 0,
-										},
-									]}
+									style={{
+										position: 'absolute',
+										bottom: buttonSpacing * (ix + 1) + verticalOffset, // Static vertical positioning
+										right: 0,
+									}}
 								>
 									<IconButton
 										className={`
@@ -85,12 +77,12 @@ export default function DynamicFab(props) {
 										onPress={() => {
 											onPress();
 											if (collapseOnPress) {
-												isExpanded.value = 0;
+												setIsExpanded(false);
 											}
 										}}
 										{...btnConfigToPass}
 									/>
-								</Animated.View>;
+								</Box>;
 					})}
 				<FabWithTooltip
 					size="lg"
@@ -101,8 +93,8 @@ export default function DynamicFab(props) {
 					tooltipClassName={tooltipClassName}
 					tooltipTriggerClassName={tooltipTriggerClassName}
 				>
-					<FabIcon as={isExpanded.value ? Xmark : icon || EllipsisVertical} />
+					<FabIcon as={isExpanded ? Xmark : icon || EllipsisVertical} />
 					{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

@@ -138,13 +138,6 @@ function GridComponent(props) {
 			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,
@@ -175,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,
 
@@ -549,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;
@@ -562,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;

package/src/Components/Grid/GridRow.js

@@ -1,4 +1,4 @@
-import { useMemo, } from 'react';
+import { useMemo, useEffect, } from 'react';
 import {
 	Box,
 	HStack,
@@ -8,7 +8,10 @@ import {
 } from '@project-components/Gluestack';
 import {
 	UI_MODE_WEB,
+	UI_MODE_NATIVE,
+	CURRENT_MODE,
 } from '../../Constants/UiModes.js';
+import { getEmptyImage } from 'react-dnd-html5-backend';
 import * as colourMixer from '@k-renwick/colour-mixer';
 import getComponentFromType from '../../Functions/getComponentFromType.js';
 import UiGlobals from '../../UiGlobals.js';
@@ -43,14 +46,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,
@@ -59,6 +76,15 @@ function GridRow(props) {
 
 		let bg = rowProps.bg || props.bg || styles.GRID_ROW_BG,
 			mixWith;
+
+		// 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;
@@ -368,7 +394,11 @@ function GridRow(props) {
 		isHovered,
 		isOver,
 		index,
+		canDrop,
+		draggedItem,
+		validateDrop,
 		dragSourceRef,
+		dragPreviewRef,
 		dropTargetRef,
 	]);
 }

package/src/Components/Hoc/withDraggable.js

@@ -1,4 +1,4 @@
-import { forwardRef, useState, } from 'react';
+import { forwardRef, useState, useRef, } from 'react';
 import {
 	HORIZONTAL,
 	VERTICAL,
@@ -50,6 +50,7 @@ export default function withDraggable(WrappedComponent) {
 			[isDragging, setIsDraggingRaw] = useState(false),
 			[node, setNode] = useState(false),
 			[bounds, setBounds] = useState(null),
+			nodeRef = useRef(null), // to get around React Draggable bug // https://stackoverflow.com/a/63603903
 			{ block } = useBlocking(),
 			setIsDragging = (value) => {
 				setIsDraggingRaw(value);
@@ -231,10 +232,11 @@ export default function withDraggable(WrappedComponent) {
 							onDrag={handleDrag}
 							onStop={handleStop}
 							position={{ x: 0, y: 0, /* reset to dropped position */ }}
+							nodeRef={nodeRef}
 							// bounds={bounds}
 							{...draggableProps}
 						>
-							<div className="nsResize">
+							<div ref={nodeRef} className="nsResize">
 								<WrappedComponent {...propsToPass} ref={ref} />
 							</div>
 						</Draggable>;
@@ -246,9 +248,10 @@ export default function withDraggable(WrappedComponent) {
 							onStop={handleStop}
 							position={{ x: 0, y: 0, /* reset to dropped position */ }}
 							// bounds={bounds}
+							nodeRef={nodeRef}
 							{...draggableProps}
 						>
-							<div className="ewResize" style={{ height: '100%', }}>
+							<div ref={nodeRef} className="ewResize" style={{ height: '100%', }}>
 								<WrappedComponent {...propsToPass} ref={ref} />
 							</div>
 						</Draggable>;
@@ -262,9 +265,10 @@ export default function withDraggable(WrappedComponent) {
 						onStop={handleStop}
 						position={{ x: 0, y: 0, /* reset to dropped position */ }}
 						handle={handle}
+						nodeRef={nodeRef}
 						{...draggableProps}
 					>
-						<WrappedComponent {...propsToPass} ref={ref} />
+						<WrappedComponent {...propsToPass} ref={nodeRef} />
 					</Draggable>;
 		} else if (CURRENT_MODE === UI_MODE_NATIVE) {
 

package/src/Components/Hoc/withEditor.js

@@ -670,8 +670,14 @@ export default function withEditor(WrappedComponent, isTree = false) {
 		useEffect(() => {
 			setEditorMode(calculateEditorMode());
 
-			setIsIgnoreNextSelectionChange(false);
 			setLastSelection(selection);
+			
+			// Push isIgnoreNextSelectionChange until after a microtask to ensure all
+			// synchronous operations (including listener callbacks) are complete
+			// (this is to prevent the editor from immediately switching modes on doAdd in Tree)
+			Promise.resolve().then(() => {
+				setIsIgnoreNextSelectionChange(false);
+			});
 		}, [selection]);
 
 		if (self) {

package/src/Components/Tree/Tree.js

@@ -54,8 +54,6 @@ import Xmark from '../Icons/Xmark.js';
 import Dot from '../Icons/Dot.js';
 import Collapse from '../Icons/Collapse.js';
 import Expand from '../Icons/Expand.js';
-import FolderClosed from '../Icons/FolderClosed.js';
-import FolderOpen from '../Icons/FolderOpen.js';
 import Gear from '../Icons/Gear.js';
 import MagnifyingGlass from '../Icons/MagnifyingGlass.js';
 import PaginationToolbar from '../Toolbar/PaginationToolbar.js';
@@ -93,21 +91,9 @@ function TreeComponent(props) {
 			getDisplayTextFromSearchResults = (item) => {
 				return item.id
 			},
-			getNodeIcon = (which, item) => { // decides what icon to show for this node
+			getNodeIcon = (item) => {
 				// TODO: Allow for dynamic props on the icon (e.g. special color for some icons)
-				let icon;
-				switch(which) {
-					case COLLAPSED:
-						icon = FolderClosed;
-						break;
-					case EXPANDED:
-						icon = FolderOpen;
-						break;
-					case LEAF:
-						icon = Dot;
-						break;
-				}
-				return icon;
+				return Dot;
 			},
 			getNodeProps = (item) => {
 				return {};
@@ -119,18 +105,6 @@ function TreeComponent(props) {
 			showSelectHandle = true,
 			isNodeSelectable = true,
 			isNodeHoverable = true,
-			canNodesMoveInternally = false,
-			canNodeMoveInternally, // optional fn to customize whether each node can be dragged INternally
-			canNodeMoveExternally, // optional fn to customize whether each node can be dragged EXternally
-			canNodeAcceptDrop, // 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
-			areNodesDragSource = false,
-			nodeDragSourceType,
-			getNodeDragSourceItem,
-			areNodesDropTarget = false,
-			dropTargetAccept,
-			onNodeDrop,
 			allowToggleSelection = true, // i.e. single click with no shift key toggles the selection of the node clicked on
 			disableBottomToolbar = false,
 			bottomToolbar = null,
@@ -142,11 +116,24 @@ function TreeComponent(props) {
 			canRecordBeEdited,
 			onTreeLoad,
 			onLayout,
-			
 			selectorId,
 			selectorSelected,
 			selectorSelectedField = 'id',
 
+			// DND
+			canNodesMoveInternally = false,
+			canNodeMoveInternally, // optional fn to customize whether each node can be dragged INternally
+			canNodeMoveExternally, // optional fn to customize whether each node can be dragged EXternally
+			canNodeAcceptDrop, // 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
+			areNodesDragSource = false,
+			nodeDragSourceType,
+			getNodeDragSourceItem,
+			areNodesDropTarget = false,
+			dropTargetAccept,
+			onNodeDrop,
+
 			// withComponent
 			self,
 
@@ -547,9 +534,7 @@ function TreeComponent(props) {
 					treeRef,
 					text: getNodeText(treeNode),
 					content: getNodeContent ? getNodeContent(treeNode) : null,
-					iconCollapsed: getNodeIcon(COLLAPSED, treeNode),
-					iconExpanded: getNodeIcon(EXPANDED, treeNode),
-					iconLeaf: getNodeIcon(LEAF, treeNode),
+					icon: getNodeIcon(treeNode),
 					isExpanded: treeNode.isExpanded || defaultToExpanded || isRoot, // all non-root treeNodes are collapsed by default
 					isVisible: isRoot ? areRootsVisible : true,
 					isLoading: false,
@@ -587,6 +572,35 @@ function TreeComponent(props) {
 			}
 			return treeNodeData;
 		},
+		buildAndSetOneTreeNodeData = (entity) => {
+			
+			if (!entity || !entity.parent) {
+				// If no parent, it might be a root node, so rebuild the tree
+				buildAndSetTreeNodeData();
+				return;
+			}
+
+			const parentDatum = getDatumById(entity.parent.id);
+			if (!parentDatum) {
+				// Parent not found in current tree structure, rebuild
+				buildAndSetTreeNodeData();
+				return;
+			}
+
+			// Create datum for the new entity and add it to parent's children
+			const newDatum = buildTreeNodeDatum(entity);
+			parentDatum.children.push(newDatum);
+			
+			// Update parent to show it has children and expand if needed
+			if (!entity.parent.hasChildren) {
+				entity.parent.hasChildren = true;
+			}
+			if (!parentDatum.isExpanded) {
+				parentDatum.isExpanded = true;
+			}
+
+			forceUpdate();
+		},
 		datumContainsSelection = (datum) => {
 			if (_.isEmpty(selection)) {
 				return false;
@@ -1110,8 +1124,8 @@ function TreeComponent(props) {
 										nodeDragProps.dropTargetAccept = dropTargetAccept;
 										
 										// Define validation logic once for reuse
-										const validateDrop = (droppedItem) => {
-											if (!droppedItem) {
+										const validateDrop = (draggedItem) => {
+											if (!draggedItem) {
 												return false;
 											}
 											
@@ -1119,10 +1133,10 @@ function TreeComponent(props) {
 
 											// Always include the dragged item itself in validation
 											// If no selection exists, the dragged item is what we're moving
-											const nodesToValidate = currentSelection.length > 0 ? currentSelection : [droppedItem.item];
+											const nodesToValidate = currentSelection.length > 0 ? currentSelection : [draggedItem.item];
 											
 											// validate that the dropped item is not already a direct child of the target node
-											if (isChildOf(droppedItem.item, item)) {
+											if (isChildOf(draggedItem.item, item)) {
 												return false;
 											}
 
@@ -1140,13 +1154,13 @@ function TreeComponent(props) {
 											
 											if (canNodeAcceptDrop && typeof canNodeAcceptDrop === 'function') {
 												// custom business logic
-												return canNodeAcceptDrop(item, droppedItem);
+												return canNodeAcceptDrop(item, draggedItem);
 											}
 											return true;
 										};
 										
 										// Use the validation function for React DnD
-										nodeDragProps.canDrop = (droppedItem, monitor) => validateDrop(droppedItem);
+										nodeDragProps.canDrop = (draggedItem, monitor) => validateDrop(draggedItem);
 										
 										// Pass the same validation function for visual feedback
 										nodeDragProps.validateDrop = validateDrop;
@@ -1167,6 +1181,7 @@ function TreeComponent(props) {
 											} else {
 												nodeDragProps.dragSourceItem = {
 													id: item.id,
+													item,
 													getSelection,
 													type: nodeDragSourceType,
 												};
@@ -1197,6 +1212,26 @@ function TreeComponent(props) {
 												// Default: allow external drops
 												return true;
 											};
+
+											// Define validation logic once for reuse
+											const validateDrop = (draggedItem) => {
+												if (!draggedItem) {
+													return false;
+												}
+												
+												if (canNodeAcceptDrop && typeof canNodeAcceptDrop === 'function') {
+													// custom business logic
+													return canNodeAcceptDrop(item, draggedItem);
+												}
+												return true;
+											};
+
+											// Use the validation function for React DnD
+											nodeDragProps.canDrop = (draggedItem, monitor) => validateDrop(draggedItem);
+											
+											// Pass the same validation function for visual feedback
+											nodeDragProps.validateDrop = validateDrop;
+
 											nodeDragProps.onDrop = (droppedItem) => {
 												// NOTE: item is sometimes getting destroyed, but it still has the id, so you can still use it
 												onNodeDrop(item, droppedItem);
@@ -1274,7 +1309,7 @@ function TreeComponent(props) {
 		Repository.on('load', setFalse);
 		Repository.on('loadRootNodes', setFalse);
 		Repository.on('loadRootNodes', buildAndSetTreeNodeData);
-		Repository.on('add', buildAndSetTreeNodeData);
+		Repository.on('add', buildAndSetOneTreeNodeData);
 		Repository.on('changeFilters', reloadTree);
 		Repository.on('changeSorters', reloadTree);
 
@@ -1290,7 +1325,7 @@ function TreeComponent(props) {
 			Repository.off('load', setFalse);
 			Repository.off('loadRootNodes', setFalse);
 			Repository.off('loadRootNodes', buildAndSetTreeNodeData);
-			Repository.off('add', buildAndSetTreeNodeData);
+			Repository.off('add', buildAndSetOneTreeNodeData);
 			Repository.off('changeFilters', reloadTree);
 			Repository.off('changeSorters', reloadTree);
 		};

package/src/Components/Tree/TreeNode.js

@@ -18,6 +18,8 @@ import IconButton from '../Buttons/IconButton.js';
 import { withDragSource, withDropTarget } from '../Hoc/withDnd.js';
 import TreeNodeDragHandle from './TreeNodeDragHandle.js';
 import testProps from '../../Functions/testProps.js';
+import ChevronRight from '../Icons/ChevronRight.js';
+import ChevronDown from '../Icons/ChevronDown.js';
 import _ from 'lodash';
 
 // This was broken out from Tree simply so we can memoize it
@@ -51,9 +53,7 @@ export default function TreeNode(props) {
 		depth = item.depth,
 		text = datum.text,
 		content = datum.content,
-		iconCollapsed = datum.iconCollapsed,
-		iconExpanded = datum.iconExpanded,
-		iconLeaf = datum.iconLeaf,
+		icon = datum.icon,
 		hash = item?.hash || item;
 
 	// Hide the default drag preview only when using custom drag proxy (and only on web)
@@ -65,7 +65,6 @@ export default function TreeNode(props) {
 	}, [dragPreviewRef, getDragProxy]);
 
 	return useMemo(() => {
-		const icon = hasChildren ? (isExpanded ? iconExpanded : iconCollapsed) : iconLeaf;
 		let bg = props.nodeProps?.bg || props.bg || styles.TREE_NODE_BG,
 			mixWith;
 		
@@ -148,18 +147,19 @@ export default function TreeNode(props) {
 					{isPhantom && <Box t={0} l={0} className="absolute bg-[#f00] h-[2px] w-[2px]" />}
 					
 					{isDragSource && <TreeNodeDragHandle />}
+
+					{hasChildren && <IconButton
+										{...testProps('expandBtn')}
+										icon={isExpanded ? ChevronDown : ChevronRight}
+										onPress={(e) => onToggle(datum, e)}
+										className="ml-2"
+									/>}
 					
-					{isLoading ? 
-						<Spinner className="px-2" /> : 
-						(icon && hasChildren ? 
-							<IconButton
-								{...testProps('expandBtn')}
-								icon={icon}
-								onPress={(e) => onToggle(datum, e)}
-							/> : 
-							<Icon as={icon} className="ml-4 mr-1" />)}
+					{isLoading && <Spinner className="px-2" />}
+
+					{!isLoading && icon && <Icon as={icon} className="ml-2 mr-1" />}
 
-					{text ? <TextNative
+					{text && <TextNative
 								numberOfLines={1}
 								ellipsizeMode="head"
 								// {...propsToPass}
@@ -176,7 +176,7 @@ export default function TreeNode(props) {
 								style={{
 									userSelect: 'none',
 								}}
-							>{text}</TextNative> : null}
+							>{text}</TextNative>}
 
 					{content}
 

package/src/Components/Tree/TreeNodeDragHandle.js

@@ -6,9 +6,22 @@ import styles from '../../Styles/StyleSheets.js';
 import GripVertical from '../Icons/GripVertical.js';
 
 function TreeNodeDragHandle(props) {
+	let className = `
+		TreeNodeDragHandle
+		h-full
+		w-[14px]
+		px-[2px]
+		border-l-2
+		items-center
+		justify-center
+		select-none
+	`;
+	if (props.className) {
+		className += ' ' + props.className;
+	}
 	return <VStack
 				style={styles.ewResize}
-				className="TreeNodeDragHandle h-full w-[14px] px-[2px] border-l-2 items-center justify-center select-none"
+				className={className}
 			>
 				<Icon
 					as={GripVertical}