@onehat/ui 0.4.81 → 0.4.83

package/src/Components/Grid/GridHeaderRow.js

@@ -105,12 +105,19 @@ export default forwardRef(function GridHeaderRow(props, ref) {
 				columnHeaders = _.filter(columnHeader.parentElement.children, (childNode) => {
 					return childNode.getBoundingClientRect().width !== 0; // Skip zero-width children
 				}),
-				currentX = proxyRect.left; // left position of pointer
+				currentX = proxyRect.left, // left position of pointer
+				rowHandleOffset = showRowHandle ? 1 : 0; // Account for RowHandleSpacer
 		
 			// Figure out which index the user wants
 			let newIx = 0;
 			_.each(columnHeaders, (child, ix, all) => {
+				// Skip the row handle spacer if present
+				if (showRowHandle && ix === 0) {
+					return true; // continue to next iteration
+				}
+				
 				const
+					adjustedIx = ix - rowHandleOffset, // Adjust index for row handle offset
 					rect = child.getBoundingClientRect(), // rect of the columnHeader of this iteration
 					{
 						left,
@@ -119,8 +126,8 @@ export default forwardRef(function GridHeaderRow(props, ref) {
 					} = rect,
 					halfWidth = width /2;
 
-				if (ix === 0) {
-					// first column
+				if (adjustedIx === 0) {
+					// first actual data column
 					if (currentX < left + halfWidth) {
 						newIx = 0;
 						return false;
@@ -128,22 +135,22 @@ export default forwardRef(function GridHeaderRow(props, ref) {
 						newIx = 1;
 						return false;
 					}
-				} else if (ix === all.length -1) {
-					// last column
+				} else if (adjustedIx === all.length - 1 - rowHandleOffset) {
+					// last actual data column (account for nav column and row handle)
 					if (currentX < left + halfWidth) {
-						newIx = ix;
+						newIx = adjustedIx;
 						return false;
 					}
-					newIx = ix +1;
+					newIx = adjustedIx + 1;
 					return false;
 				}
 				
 				// all other columns
 				if (left <= currentX && currentX < left + halfWidth) {
-					newIx = ix;
+					newIx = adjustedIx;
 					return false;
 				} else if (currentX < right) {
-					newIx = ix +1;
+					newIx = adjustedIx + 1;
 					return false;
 				}
 			});
@@ -155,7 +162,8 @@ export default forwardRef(function GridHeaderRow(props, ref) {
 
 			// Render marker showing destination location (can't use regular render cycle because this div is absolutely positioned on page)
 			const
-				columnHeaderRect = columnHeaders[newIx].getBoundingClientRect(),
+				targetColumnIndex = newIx + rowHandleOffset, // Add back offset for visual positioning
+				columnHeaderRect = columnHeaders[targetColumnIndex].getBoundingClientRect(),
 				left = columnHeaderRect.left,
 				gridRowsContainer = gridRef.current._listRef._scrollRef.childNodes[0],
 				gridRowsContainerRect = gridRowsContainer.getBoundingClientRect(),
@@ -180,12 +188,19 @@ export default forwardRef(function GridHeaderRow(props, ref) {
 				columnHeaders = _.filter(columnHeader.parentElement.children, (childNode) => {
 					return childNode.getBoundingClientRect().width !== 0; // Skip zero-width children
 				}),
-				currentX = proxyRect.left; // left position of pointer
+				currentX = proxyRect.left, // left position of pointer
+				rowHandleOffset = showRowHandle ? 1 : 0; // Account for RowHandleSpacer
 		
 			// Figure out which index the user wants
 			let newIx = 0;
 			_.each(columnHeaders, (child, ix, all) => {
+				// Skip the row handle spacer if present
+				if (showRowHandle && ix === 0) {
+					return true; // continue to next iteration
+				}
+				
 				const
+					adjustedIx = ix - rowHandleOffset, // Adjust index for row handle offset
 					rect = child.getBoundingClientRect(), // rect of the columnHeader of this iteration
 					{
 						left,
@@ -194,8 +209,8 @@ export default forwardRef(function GridHeaderRow(props, ref) {
 					} = rect,
 					halfWidth = width /2;
 
-				if (ix === 0) {
-					// first column
+				if (adjustedIx === 0) {
+					// first actual data column
 					if (currentX < left + halfWidth) {
 						newIx = 0;
 						return false;
@@ -203,22 +218,22 @@ export default forwardRef(function GridHeaderRow(props, ref) {
 						newIx = 1;
 						return false;
 					}
-				} else if (ix === all.length -1) {
-					// last column
+				} else if (adjustedIx === all.length - 1 - rowHandleOffset) {
+					// last actual data column (account for nav column and row handle)
 					if (currentX < left + halfWidth) {
-						newIx = ix;
+						newIx = adjustedIx;
 						return false;
 					}
-					newIx = ix +1;
+					newIx = adjustedIx + 1;
 					return false;
 				}
 				
 				// all other columns
 				if (left <= currentX && currentX < left + halfWidth) {
-					newIx = ix;
+					newIx = adjustedIx;
 					return false;
 				} else if (currentX < right) {
-					newIx = ix +1;
+					newIx = adjustedIx + 1;
 					return false;
 				}
 			});
@@ -230,7 +245,8 @@ export default forwardRef(function GridHeaderRow(props, ref) {
 
 			// Render marker showing destination location (can't use regular render cycle because this div is absolutely positioned on page)
 			const
-				columnHeaderRect = columnHeaders[newIx].getBoundingClientRect(),
+				targetColumnIndex = newIx + rowHandleOffset, // Add back offset for visual positioning
+				columnHeaderRect = columnHeaders[targetColumnIndex].getBoundingClientRect(),
 				left = columnHeaderRect.left;
 			let marker = dragColumnSlot && dragColumnSlot.marker;
 			if (marker) {
@@ -468,7 +484,12 @@ export default forwardRef(function GridHeaderRow(props, ref) {
 				if (showRowHandle) {
 					headerColumns.unshift(<Box
 						key="RowHandleSpacer"
-						className="Spacer-RowHandle w-[40px] flex-none"
+						className={clsx(
+							'Spacer-RowHandle',
+							'w-[40px]',
+							'flex-none',
+							styles.ROW_HANDLE_CLASSNAME,
+						)}
 					/>);
 				}
 				if (!hideNavColumn) {
@@ -510,4 +531,3 @@ export default forwardRef(function GridHeaderRow(props, ref) {
 		showRowHandle,
 	]);
 });
-

package/src/Components/Grid/GridRow.js

@@ -29,7 +29,7 @@ let getEmptyImage = null;
 
 // This was broken out from Grid simply so we can memoize it
 
-const GridRow = forwardRef(function GridRow(props, ref) {
+const GridRow = forwardRef((props, ref) => {
 	const {
 			columnsConfig,
 			columnProps,
@@ -37,6 +37,7 @@ const GridRow = forwardRef(function GridRow(props, ref) {
 			rowProps,
 			hideNavColumn,
 			showRowHandle,
+			areCellsScrollable,
 			rowCanSelect,
 			rowCanDrag,
 			isRowHoverable,
@@ -141,7 +142,7 @@ const GridRow = forwardRef(function GridRow(props, ref) {
 						'justify-center',
 						'border-r-black-100',
 						'block',
-						'overflow-auto',
+						areCellsScrollable ? 'overflow-auto' : 'overflow-hidden',
 						whichCursor,
 						styles.GRID_ROW_MAX_HEIGHT_EXTRA,
 					);
@@ -207,7 +208,7 @@ const GridRow = forwardRef(function GridRow(props, ref) {
 							let textClassName = clsx(
 								'GridRow-TextNative',
 								'self-center',
-								'overflow-hidden',
+								areCellsScrollable ? 'overflow-auto' : 'overflow-hidden',
 								colClassName,
 								styles.GRID_CELL_CLASSNAME,
 								styles.GRID_ROW_MAX_HEIGHT_EXTRA,
@@ -216,7 +217,7 @@ const GridRow = forwardRef(function GridRow(props, ref) {
 								textClassName += ' ' + config.className;
 							}
 							const rendererProps = {
-								...testProps('rendererCol-' + config.fieldName),
+								...testProps('rendererCol-' + (config.fieldName || config.id || key)),
 								className: textClassName,
 								...propsToPass,
 								...extraProps,
@@ -283,7 +284,10 @@ const GridRow = forwardRef(function GridRow(props, ref) {
 										'px-2',
 										'py-3',
 										'block',
-										'overflow-scroll',
+										areCellsScrollable ? 'overflow-auto' : 'overflow-hidden',
+										'[&::-webkit-scrollbar]:h-2',
+										'[&::-webkit-scrollbar-thumb]:bg-gray-400',
+										'[&::-webkit-scrollbar-thumb]:rounded-full',
 										colClassName,
 										styles.GRID_CELL_CLASSNAME,
 										styles.GRID_ROW_MAX_HEIGHT_NORMAL,
@@ -291,6 +295,9 @@ const GridRow = forwardRef(function GridRow(props, ref) {
 									if (config.className) {
 										elementClassName += ' ' + config.className;
 									}
+									if (rowProps?._cell?.className) {
+										elementClassName += ' ' + rowProps._cell.className;
+									}
 									if (cellProps.className) {
 										elementClassName += ' ' + cellProps.className;
 									}
@@ -346,11 +353,14 @@ const GridRow = forwardRef(function GridRow(props, ref) {
 					let textClassName = clsx(
 						'GridRow-TextNative',
 						'self-center',
-						'overflow-hidden',
+						areCellsScrollable ? 'overflow-auto' : 'overflow-hidden',
 						colClassName,
 						styles.GRID_CELL_CLASSNAME,
 						styles.GRID_ROW_MAX_HEIGHT_EXTRA,
 					);
+					if (rowProps?._cell?.className) {
+						textClassName += ' ' + rowProps._cell.className;
+					}
 					if (config.className) {
 						textClassName += ' ' + config.className;
 					}

package/src/Components/Grid/RowHandle.js

@@ -3,15 +3,17 @@ import {
 	Icon,
 	VStack,
 } from '@project-components/Gluestack';
-import withTooltip from '@onehat/ui/src/Components/Hoc/withTooltip';
+import withTooltip from '../Hoc/withTooltip';
 import clsx from 'clsx';
+import UiGlobals from '../../UiGlobals.js';
 import Arcs from '../Icons/Arcs.js';
 
 const RowHandle = forwardRef((props, ref) => {
 	const {
 			isDragSource,
 			isDraggable
-		} = props;
+		} = props,
+		styles = UiGlobals.styles;
 	let className = clsx(
 		'RowHandle',
 		'h-full',
@@ -20,13 +22,23 @@ const RowHandle = forwardRef((props, ref) => {
 		'items-center',
 		'justify-center',
 		'select-none',
-		'cursor-pointer'
+		'cursor-pointer',
+		styles.ROW_HANDLE_CLASSNAME,
 	);
 	return <VStack
 				ref={isDragSource || isDraggable ? ref : undefined}
 				className={className}
 			>
-				<Icon as={Arcs} size="xs" className="w-full h-full text-[#ddd]" />
+				<Icon
+					as={Arcs}
+					size="xs"
+					className={clsx(
+						'w-full',
+						'h-full',
+						'text-[#ddd]',
+						styles.ROW_HANDLE_ICON_CLASSNAME,
+					)}
+				/>
 			</VStack>;
 });
 

package/src/Components/Hoc/Secondary/withSecondaryEditor.js

@@ -32,6 +32,7 @@ export default function withSecondaryEditor(WrappedComponent, isTree = false) {
 				secondaryUserCanEdit = true, // not permissions, but capability
 				secondaryUserCanView = true,
 				secondaryCanEditorViewOnly = false, // whether the editor can *ever* change state out of 'View' mode
+				secondaryCanProceedWithCrud, // fn returns bool on if the CRUD operation can proceed
 				secondaryDisableAdd = false,
 				secondaryDisableEdit = false,
 				secondaryDisableDelete = false,
@@ -47,12 +48,14 @@ export default function withSecondaryEditor(WrappedComponent, isTree = false) {
 				secondaryEditorType,
 				secondaryOnAdd,
 				secondaryOnChange, // any kind of crud change
+				secondaryOnBeforeDelete,
 				secondaryOnDelete,
 				secondaryOnSave, // this could also be called 'onEdit'
 				secondaryOnEditorClose,
 				secondaryNewEntityDisplayValue,
 				secondaryNewEntityDisplayProperty, // in case the field to set for newEntityDisplayValue is different from model
 				secondaryDefaultValues,
+				secondaryInitialEditorMode = EDITOR_MODE__VIEW,
 				secondaryStayInEditModeOnSelectionChange = false,
 
 				// withComponent
@@ -86,11 +89,11 @@ export default function withSecondaryEditor(WrappedComponent, isTree = false) {
 			secondaryNewEntityDisplayValueRef = useRef(),
 			secondaryEditorModeRef = useRef(EDITOR_MODE__VIEW),
 			secondaryIsIgnoreNextSelectionChangeRef = useRef(false),
+			secondaryIsEditorShownRef = useRef(false),
 			secondaryModel = SecondaryRepository?.schema?.name,
 			[secondaryCurrentRecord, secondarySetCurrentRecord] = useState(null),
 			[secondaryIsAdding, setIsAdding] = useState(false),
 			[secondaryIsSaving, setIsSaving] = useState(false),
-			[secondaryIsEditorShown, secondarySetIsEditorShownRaw] = useState(false),
 			[secondaryIsEditorViewOnly, setIsEditorViewOnly] = useState(secondaryCanEditorViewOnly), // current state of whether editor is in view-only mode
 			[secondaryLastSelection, setLastSelection] = useState(),
 			secondarySetIsIgnoreNextSelectionChange = (bool) => {
@@ -100,11 +103,24 @@ export default function withSecondaryEditor(WrappedComponent, isTree = false) {
 				return secondaryIsIgnoreNextSelectionChangeRef.current;
 			},
 			secondarySetIsEditorShown = (bool) => {
-				secondarySetIsEditorShownRaw(bool);
+				secondaryIsEditorShownRef.current = bool;
+				forceUpdate();
 				if (!bool && secondaryOnEditorClose) {
 					secondaryOnEditorClose();
 				}
 			},
+			secondaryGetIsEditorShown = () => {
+				return secondaryIsEditorShownRef.current;
+			},
+			secondarySetIsWaitModalShown = (bool) => {
+				const
+					dispatch = UiGlobals.redux?.dispatch,
+					setIsWaitModalShownAction = UiGlobals.systemReducer?.setIsWaitModalShownAction;
+				if (setIsWaitModalShownAction) {
+					console.log('withSecondaryEditor:setIsWaitModalShownAction', bool);
+					dispatch(setIsWaitModalShownAction(bool));
+				}
+			},
 			secondarySetSelectionDecorated = (newSelection) => {
 				function doIt() {
 					secondarySetSelection(newSelection);
@@ -139,7 +155,7 @@ export default function withSecondaryEditor(WrappedComponent, isTree = false) {
 					forceUpdate();
 				}
 			},
-			getNewEntityDisplayValue = () => {
+			secondaryGetNewEntityDisplayValue = () => {
 				return secondaryNewEntityDisplayValueRef.current;
 			},
 			secondaryDoAdd = async (e, values) => {
@@ -147,6 +163,9 @@ export default function withSecondaryEditor(WrappedComponent, isTree = false) {
 					showPermissionsError(ADD, secondaryModel);
 					return;
 				}
+				if (secondaryCanProceedWithCrud && !secondaryCanProceedWithCrud()) {
+					return;
+				}
 
 				const secondarySelection = secondaryGetSelection();
 				let addValues = values;
@@ -165,20 +184,20 @@ export default function withSecondaryEditor(WrappedComponent, isTree = false) {
 					// 1. directlty submit 'values' to use in secondaryDoAdd(), or
 					// 2. Use the repository's default values (defined on each property as 'defaultValue'), or
 					// 3. Individually override the repository's default values with submitted 'defaultValues' (given as a prop to this HOC)
-					let defaultValuesToUse = SecondaryRepository.getSchema().getDefaultValues();
+					let secondaryDefaultValuesToUse = SecondaryRepository.getSchema().getDefaultValues();
 					if (secondaryDefaultValues) {
-						_.merge(defaultValuesToUse, secondaryDefaultValues);
+						_.merge(secondaryDefaultValuesToUse, secondaryDefaultValues);
 					}
-					addValues = {...defaultValuesToUse};
+					addValues = {...secondaryDefaultValuesToUse};
 				}
 
 				if (secondarySelectorId && !_.isEmpty(secondarySelectorSelected)) {
 					addValues[secondarySelectorId] = secondarySelectorSelected[secondarySelectorSelectedField];
 				}
 
-				if (getNewEntityDisplayValue()) {
+				if (secondaryGetNewEntityDisplayValue()) {
 					const displayPropertyName = secondaryNewEntityDisplayProperty || SecondaryRepository.getSchema().model.displayProperty;
-					addValues[displayPropertyName] = getNewEntityDisplayValue();
+					addValues[displayPropertyName] = secondaryGetNewEntityDisplayValue();
 				}
 
 				if (getListeners().onBeforeAdd) {
@@ -246,6 +265,9 @@ export default function withSecondaryEditor(WrappedComponent, isTree = false) {
 					showPermissionsError(EDIT, secondaryModel);
 					return;
 				}
+				if (secondaryCanProceedWithCrud && !secondaryCanProceedWithCrud()) {
+					return;
+				}
 				const secondarySelection = secondaryGetSelection();
 				if (_.isEmpty(secondarySelection) || (_.isArray(secondarySelection) && (secondarySelection.length > 1 || secondarySelection[0]?.isDestroyed))) {
 					return;
@@ -265,6 +287,9 @@ export default function withSecondaryEditor(WrappedComponent, isTree = false) {
 					showPermissionsError(DELETE, secondaryModel);
 					return;
 				}
+				if (secondaryCanProceedWithCrud && !secondaryCanProceedWithCrud()) {
+					return;
+				}
 				let cb = null;
 				if (_.isFunction(args)) {
 					cb = args;
@@ -273,7 +298,15 @@ export default function withSecondaryEditor(WrappedComponent, isTree = false) {
 				if (_.isEmpty(secondarySelection) || (_.isArray(secondarySelection) && (secondarySelection.length > 1 || secondarySelection[0]?.isDestroyed))) {
 					return;
 				}
+				if (secondaryOnBeforeDelete) {
+					// This listener is set by parent components using a prop
+					const listenerResult = await secondaryOnBeforeDelete(secondarySelection);
+					if (listenerResult === false) {
+						return;
+					}
+				}
 				if (getListeners().onBeforeDelete) {
+					// This listener is set by child components using setWithEditListeners()
 					const listenerResult = await getListeners().onBeforeDelete();
 					if (listenerResult === false) {
 						return;
@@ -309,26 +342,33 @@ export default function withSecondaryEditor(WrappedComponent, isTree = false) {
 					});
 				} else
 				if (isSingle && isPhantom) {
-					deleteRecord(cb);
+					secondaryDeleteRecord(cb);
 				} else {
 					const identifier = secondaryGetRecordIdentifier(secondarySelection);
-					confirm('Are you sure you want to delete the ' + identifier, () => deleteRecord(null, cb));
+					confirm('Are you sure you want to delete the ' + identifier, () => secondaryDeleteRecord(null, cb));
 				}
 			},
 			secondaryDoMoveChildren = (cb) => {
 				hideAlert();
-				deleteRecord(true, cb);
+				secondaryDeleteRecord(true, cb);
 			},
 			secondaryDoDeleteChildren = (cb) => {
 				hideAlert();
-				deleteRecord(false, cb);
+				secondaryDeleteRecord(false, cb);
 			},
-			deleteRecord = async (moveSubtreeUp, cb) => {
+			secondaryDeleteRecord = async (moveSubtreeUp, cb) => {
 				if (canUser && !canUser(DELETE, secondaryModel)) {
 					showPermissionsError(DELETE, secondaryModel);
 					return;
 				}
 				const secondarySelection = secondaryGetSelection();
+				if (secondaryOnBeforeDelete) {
+					// This listener is set by parent components using a prop
+					const listenerResult = await secondaryOnBeforeDelete(secondarySelection);
+					if (listenerResult === false) {
+						return;
+					}
+				}
 				if (getListeners().onBeforeDelete) {
 					const listenerResult = await getListeners().onBeforeDelete(secondarySelection);
 					if (listenerResult === false) {
@@ -362,6 +402,9 @@ export default function withSecondaryEditor(WrappedComponent, isTree = false) {
 					showPermissionsError(VIEW, secondaryModel);
 					return;
 				}
+				if (secondaryCanProceedWithCrud && !secondaryCanProceedWithCrud()) {
+					return;
+				}
 				if (secondaryEditorType === EDITOR_TYPE__INLINE) {
 					alert('Cannot view in inline editor.');
 					return; // inline editor doesn't have a view mode
@@ -389,37 +432,70 @@ export default function withSecondaryEditor(WrappedComponent, isTree = false) {
 					showPermissionsError(DUPLICATE, secondaryModel);
 					return;
 				}
-
-				// check permissions for duplicate
+				if (secondaryCanProceedWithCrud && !secondaryCanProceedWithCrud()) {
+					return;
+				}
 
 				const secondarySelection = secondaryGetSelection();
 				if (secondarySelection.length !== 1) {
 					return;
 				}
+
 				if (secondaryUseRemoteDuplicate) {
-					const results = await onRemoteDuplicate();
-					return results;
+					return await secondaryOnRemoteDuplicate();
+				}
+
+				let isSuccess = false,
+					duplicateEntity;
+				try {
+					const
+						entity = secondarySelection[0],
+						idProperty = SecondaryRepository.getSchema().model.idProperty,
+						rawValues = _.omit(entity.getOriginalData(), idProperty);
+					rawValues.id = null; // unset the id of the duplicate
+
+					setIsWaitModalShown(true);
+
+					duplicateEntity = await SecondaryRepository.add(rawValues, false, true);
+					isSuccess = true;
+
+				} catch(err) {
+					// do nothing
+				} finally {
+					setIsWaitModalShown(false);
+				}
+
+				if (isSuccess) {
+					secondarySetIsIgnoreNextSelectionChange(true);
+					secondarySetSelection([duplicateEntity]);
+					secondarySetEditorMode(EDITOR_MODE__EDIT);
+					secondarySetIsEditorShown(true);
 				}
-				const
-					entity = secondarySelection[0],
-					idProperty = SecondaryRepository.getSchema().model.idProperty,
-					rawValues = _.omit(entity.getOriginalData(), idProperty);
-				rawValues.id = null; // unset the id of the duplicate
-				const duplicate = await SecondaryRepository.add(rawValues, false, true);
-				secondarySetIsIgnoreNextSelectionChange(true);
-				secondarySetSelection([duplicate]);
-				secondarySetEditorMode(EDITOR_MODE__EDIT);
-				secondarySetIsEditorShown(true);
 			},
-			onRemoteDuplicate = async () => {
-				const
-					secondarySelection = secondaryGetSelection(),
-					entity = secondarySelection[0],
-					duplicateEntity = await SecondaryRepository.remoteDuplicate(entity);
+			secondaryOnRemoteDuplicate = async () => {
+				let isSuccess = false,
+					duplicateEntity;
+				try {
+					const
+						secondarySelection = secondaryGetSelection(),
+						entity = secondarySelection[0];
+					
+					setIsWaitModalShown(true);
 
-				secondarySetIsIgnoreNextSelectionChange(true);
-				secondarySetSelection([duplicateEntity]);
-				secondaryDoEdit();
+					duplicateEntity = await SecondaryRepository.remoteDuplicate(entity);
+					isSuccess = true;
+					
+				} catch(err) {
+					// do nothing
+				} finally {
+					setIsWaitModalShown(false);
+				}
+				if (isSuccess) {
+					secondarySetIsIgnoreNextSelectionChange(true);
+					secondarySetSelection([duplicateEntity]);
+					secondaryDoEdit();
+					return duplicateEntity;
+				}
 			},
 			secondaryDoEditorSave = async (data, e) => {
 				let mode = secondaryGetEditorMode() === EDITOR_MODE__ADD ? ADD : EDIT;
@@ -516,7 +592,7 @@ export default function withSecondaryEditor(WrappedComponent, isTree = false) {
 						isSingle = secondarySelection.length === 1,
 						isPhantom = secondarySelection[0] && !secondarySelection[0]?.isDestroyed && secondarySelection[0].isPhantom;
 					if (isSingle && isPhantom) {
-						await deleteRecord();
+						await secondaryDeleteRecord();
 					}
 					
 					setIsAdding(false);
@@ -551,7 +627,7 @@ export default function withSecondaryEditor(WrappedComponent, isTree = false) {
 					secondarySetIsEditorShown(false);
 				});
 			},
-			calculateEditorMode = () => {
+			secondaryCalculateEditorMode = () => {
 			
 				let secondaryIsIgnoreNextSelectionChange = secondaryGetIsIgnoreNextSelectionChange(),
 					doStayInEditModeOnSelectionChange = secondaryStayInEditModeOnSelectionChange;
@@ -563,7 +639,7 @@ export default function withSecondaryEditor(WrappedComponent, isTree = false) {
 					secondaryIsIgnoreNextSelectionChange = true;
 				}
 			
-				// calculateEditorMode gets called only on selection changes
+				// secondaryCalculateEditorMode gets called only on selection changes
 				const secondarySelection = secondaryGetSelection();
 				let mode;
 				if (secondaryEditorType === EDITOR_TYPE__SIDE && !_.isNil(UiGlobals.isSideEditorAlwaysEditMode) && UiGlobals.isSideEditorAlwaysEditMode) {
@@ -617,10 +693,26 @@ export default function withSecondaryEditor(WrappedComponent, isTree = false) {
 			};
 
 		useEffect(() => {
-			secondarySetEditorMode(calculateEditorMode());
 
-			secondarySetIsIgnoreNextSelectionChange(false);
+			if (secondaryEditorType === EDITOR_TYPE__SIDE) {
+				if (secondarySelection?.length) { //  || isAdding
+					// there is a selection, so show the editor
+					secondarySetIsEditorShown(true);
+				} else {
+					// no selection, so close the editor
+					secondarySetIsEditorShown(false);
+				}
+			}
+
+			secondarySetEditorMode(secondaryCalculateEditorMode());
 			setLastSelection(secondarySelection);
+			
+			// 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(() => {
+				secondarySetIsIgnoreNextSelectionChange(false);
+			});
 		}, [secondarySelection]);
 	
 		if (self) {
@@ -638,21 +730,23 @@ export default function withSecondaryEditor(WrappedComponent, isTree = false) {
 			// NOTE: If I don't calculate this on the fly for selection changes,
 			// we see a flash of the previous state, since useEffect hasn't yet run.
 			// (basically redo what's in the useEffect, above)
-			secondarySetEditorMode(calculateEditorMode());
+			secondarySetEditorMode(secondaryCalculateEditorMode());
 		}
 
 		return <WrappedComponent
 					{...props}
+					ref={ref}
 					secondaryDisableWithEditor={false}
 					secondaryAlreadyHasWithEditor={true}
-					ref={ref}
 					secondaryCurrentRecord={secondaryCurrentRecord}
 					secondarySetCurrentRecord={secondarySetCurrentRecord}
-					secondaryIsEditorShown={secondaryIsEditorShown}
+					secondaryIsEditorShown={secondaryGetIsEditorShown()}
+					secondaryGetIsEditorShown={secondaryGetIsEditorShown}
 					secondaryIsEditorViewOnly={secondaryIsEditorViewOnly}
 					secondaryIsAdding={secondaryIsAdding}
 					secondaryIsSaving={secondaryIsSaving}
 					secondaryEditorMode={secondaryGetEditorMode()}
+					secondaryGetEditorMode={secondaryGetEditorMode}
 					secondaryOnEditMode={secondarySetEditMode}
 					secondaryOnViewMode={secondarySetViewMode}
 					secondaryEditorStateRef={secondaryEditorStateRef}

package/src/Components/Hoc/Secondary/withSecondarySideEditor.js

@@ -68,7 +68,7 @@ export default function withSecondarySideEditor(WrappedComponent, isTree = false
 								isSideEditor={true}
 								{...props}
 							/>}
-					east={<Editor
+					east={props.secondaryIsEditorShown && <Editor
 								{...propsToPass}
 								editorType={EDITOR_TYPE__SIDE}
 								{...secondaryEditorProps}

package/src/Components/Hoc/withData.js

@@ -130,6 +130,13 @@ export default function withData(WrappedComponent) {
 					displayField={displayField}
 					idIx={localIdIx}
 					displayIx={localDisplayIx}
+					setBaseParams={(baseParams) => {
+						// This allows components down the hierarchy to dynamically set the baseParams
+						LocalRepository.setBaseParams(baseParams);
+						if (LocalRepository.isRemote) {
+							LocalRepository.load();
+						}
+					}}
 				/>;
 	});
 }