@onehat/ui 0.4.82 → 0.4.84

package/src/Components/Grid/Grid.js

@@ -77,6 +77,7 @@ import Toolbar from '../Toolbar/Toolbar.js';
 import NoReorderRows from '../Icons/NoReorderRows.js';
 import ReorderRows from '../Icons/ReorderRows.js';
 import Unauthorized from '../Messages/Unauthorized.js';
+import Mask from '../Panel/Mask.js';
 import _ from 'lodash';
 
 
@@ -133,6 +134,7 @@ function GridComponent(props) {
 			flatListProps = {},
 			onRowPress,
 			onRender,
+			onLayout,
 			disableLoadOnRender = false,
 			forceLoadOnRender = false,
 			pullToRefresh = true,
@@ -146,6 +148,7 @@ function GridComponent(props) {
 			showSelectHandle = true,
 			isRowSelectable = true,
 			isRowHoverable = true,
+			isDisabled = false,
 			canColumnsSort = true,
 			canColumnsReorder = true,
 			canColumnsResize = true,
@@ -521,6 +524,33 @@ function GridComponent(props) {
 							onContextMenu(item, e, newSelection);
 						}
 					}}
+					onContextMenu={(e) => {
+						// web only; happens before onLongPress triggers
+						// different behavior here than onLongPress:
+						// if user clicks on a header row or phantom record, or if onContextMenu is not set, pass to the browser's context menu
+						if (isHeaderRow || isReorderMode) {
+							return
+						}
+						if (selection && selection[0] && selection[0].isRemotePhantom) {
+							return; // block context menu or changing selection when a remote phantom is already selected
+						}
+						if (onContextMenu) {
+							e.preventDefault();
+							e.stopPropagation(); // disallow browser's default behavior for context menu
+
+							// if the right-clicked item is not in the current selection,
+							// set the selection only to this one item.
+							let newSelection = selection;
+							if (!isInSelection(item)) {
+								newSelection = [item];
+								if (!disableWithSelection) {
+									setSelection(newSelection);
+								}
+							}
+
+							onContextMenu(item, e, newSelection);
+						}
+					}}
 					className={clsx(
 						'Pressable',
 						'Row',
@@ -1092,6 +1122,9 @@ function GridComponent(props) {
 			if (!Repository || Repository.isDestroyed) { // This method gets delayed, so it's possible for Repository to have been destroyed. Check for this
 				return;
 			}
+			if (onLayout) {
+				onLayout(e);
+			}
 			if (DEBUG) {
 				console.log(`${getMeasurementPhase()}, adjustPageSizeToHeight A`);
 			}
@@ -1675,51 +1708,55 @@ function GridComponent(props) {
 		className += ' ' + props.className;
 	}
 
-	grid = <VStackNative
-				{...testProps(self)}
-				ref={containerRef}
-				tabIndex={0}
-				onKeyDown={onGridKeyDown}
-				onLayout={(e) => debouncedAdjustPageSizeToHeight(e)}
-				className={className}
-				style={style}
-			>
-				{topToolbar &&
-					<VStack ref={topToolbarRef}>
-						{topToolbar}
-					</VStack>}
-
-				<VStack
-					ref={gridContainerRef}
-					onClick={() => {
-						if (!isReorderMode && !isInlineEditorShown && deselectAll) {
-							deselectAll();
-						}
-					}}
-					className={clsx(
-						'gridContainer',
-						'w-full',
-						// 'h-full',
-						'flex-1',
-						'min-h-[40px]',
-						'relative', // Enable positioning for overlay
-						gridContainerBorderClassName,
-					)}
-				>
-					{grid}
-					{/* Loading overlay during measurement phases to prevent visual flashing */}
-					{autoAdjustPageSizeToHeight && 
-					 (getMeasurementPhase() === PHASES__INITIAL || getMeasurementPhase() === PHASES__MEASURING) && 
-					 entities?.length > 0 && (
-						<VStack className="absolute inset-0 z-10 bg-white">
-							<Loading isScreen={true} />
+	if (isDisabled) {
+		grid = <Mask />;
+	} else {
+		grid = <VStackNative
+						{...testProps(self)}
+						ref={containerRef}
+						tabIndex={0}
+						onKeyDown={onGridKeyDown}
+						onLayout={(e) => debouncedAdjustPageSizeToHeight(e)}
+						className={className}
+						style={style}
+					>
+						{topToolbar &&
+							<VStack ref={topToolbarRef}>
+								{topToolbar}
+							</VStack>}
+
+						<VStack
+							ref={gridContainerRef}
+							onClick={() => {
+								if (!isReorderMode && !isInlineEditorShown && deselectAll) {
+									deselectAll();
+								}
+							}}
+							className={clsx(
+								'gridContainer',
+								'w-full',
+								// 'h-full',
+								'flex-1',
+								'min-h-[40px]',
+								'relative', // Enable positioning for overlay
+								gridContainerBorderClassName,
+							)}
+						>
+							{grid}
+							{/* Loading overlay during measurement phases to prevent visual flashing */}
+							{autoAdjustPageSizeToHeight && 
+							(getMeasurementPhase() === PHASES__INITIAL || getMeasurementPhase() === PHASES__MEASURING) && 
+							entities?.length > 0 && (
+								<VStack className="absolute inset-0 z-10 bg-white">
+									<Loading isScreen={true} />
+								</VStack>
+							)}
 						</VStack>
-					)}
-				</VStack>
 
-				{listFooterComponent}
+						{listFooterComponent}
 
-			</VStackNative>
+					</VStackNative>;
+	}
 
 	if (isDropTarget) {
 		grid = <VStackNative

package/src/Components/Grid/GridRow.js

@@ -285,6 +285,9 @@ const GridRow = forwardRef((props, ref) => {
 										'py-3',
 										'block',
 										areCellsScrollable ? 'overflow-auto' : 'overflow-hidden',
+										'[&::-webkit-scrollbar]:h-2',
+										'[&::-webkit-scrollbar-thumb]:bg-gray-300',
+										'[&::-webkit-scrollbar-thumb]:rounded-full',
 										colClassName,
 										styles.GRID_CELL_CLASSNAME,
 										styles.GRID_ROW_MAX_HEIGHT_NORMAL,
@@ -347,10 +350,17 @@ const GridRow = forwardRef((props, ref) => {
 					if (config.getCellProps) {
 						_.assign(elementProps, config.getCellProps(item));
 					}
+
+					// TODO: incorporate better scrollbar formatting with
+					// tailwind plugin 'tailwind-scrollbar' (already installed, just not yet used here)
+
 					let textClassName = clsx(
 						'GridRow-TextNative',
 						'self-center',
 						areCellsScrollable ? 'overflow-auto' : 'overflow-hidden',
+						'[&::-webkit-scrollbar]:h-2',
+						'[&::-webkit-scrollbar-thumb]:bg-gray-300',
+						'[&::-webkit-scrollbar-thumb]:rounded-full',
 						colClassName,
 						styles.GRID_CELL_CLASSNAME,
 						styles.GRID_ROW_MAX_HEIGHT_EXTRA,

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

@@ -47,11 +47,12 @@ export default function withSecondarySideEditor(WrappedComponent, isTree = false
 			throw Error('SecondaryEditor is not defined');
 		}
 
+		const containerProps = {};
 		if (isResizable) {
-			secondaryEditorProps.w = 500;
-			secondaryEditorProps.isResizable = true;
+			containerProps.eastIsResizable = true;
+			containerProps.eastInitialWidth = 500;
 		} else {
-			secondaryEditorProps.flex = secondarySideFlex;
+			containerProps.eastInitialFlex = secondarySideFlex;
 		}
 
 		if (!secondaryEditorProps.className) {
@@ -68,13 +69,14 @@ export default function withSecondarySideEditor(WrappedComponent, isTree = false
 								isSideEditor={true}
 								{...props}
 							/>}
-					east={<Editor
+					east={props.secondaryIsEditorShown && <Editor
 								{...propsToPass}
 								editorType={EDITOR_TYPE__SIDE}
 								{...secondaryEditorProps}
 								parent={self}
 								reference="secondaryEditor"
 							/>}
+					{...containerProps}
 				/>;
 	});
 	return withAdditionalProps(withSecondaryEditor(SideEditor, isTree));

package/src/Components/Hoc/withContextMenu.js

@@ -95,9 +95,8 @@ export default function withContextMenu(WrappedComponent) {
 								action="secondary"
 							/>;
 				});
-				const showId = true; // TODO: This should only be for local dev
-				if (showId) {
-					contextMenuItemComponents.push(<Text key="idViewer" className="flex-1 py-2 px-4 select-none">id: {selection?.[0]?.id}</Text>);
+				if (UiGlobals.isLocal) {
+					contextMenuItemComponents.push(<Text key="idViewer" className="flex-1 py-2 px-4 select-none">id: {selection?.[0]?.actualId || selection?.[0]?.id}</Text>);
 				}
 				return contextMenuItemComponents;
 			};
@@ -122,9 +121,19 @@ export default function withContextMenu(WrappedComponent) {
 			// may change based on the selection; and this is why we're using 
 			// useEffect to show the context menu instead of onContextMenu.
 
+			// TODO: There might be a bug here. As the comment above suggests, useEffect()
+			// was running if contextMenuItems changed. But the comment next to the args
+			// for useEffect() says we're not including contextMenuItems in the args
+			// to avoid infinite loops. Is this a problem??
+
+			const contextMenuItemComponents = createContextMenuItemComponents();
+			if (contextMenuItemComponents.length === 0) {
+				// No items to show
+				return;
+			}
+			
 			// show context menu
 			const
-				contextMenuItemComponents = createContextMenuItemComponents(),
 				className = clsx(
 					'context-menu-container',
 					'absolute',

package/src/Components/Hoc/withDraggable.js

@@ -14,8 +14,6 @@ import {
 } from 'uuid';
 import getComponentFromType from '../../Functions/getComponentFromType.js';
 
-
-
 // Note on modes:
 // HORIZONTAL means the component moves along the X axis.
 // VERTICAL means the component moves along the Y axis.
@@ -62,6 +60,8 @@ export default function withDraggable(WrappedComponent) {
 				if (isDragging) {
 					return;
 				}
+
+				// console.log('start x', info.x);
 				
 				const
 					node = getDraggableNodeFromNode(info.node),
@@ -132,6 +132,9 @@ export default function withDraggable(WrappedComponent) {
 					deltaY,
 				} = info;
 
+
+				// console.log('drag x', info.x);
+
 				// Move the proxy to where it should be
 				const
 					proxy = document.getElementById('dragproxy'),
@@ -157,7 +160,8 @@ export default function withDraggable(WrappedComponent) {
 					return;
 				}
 
-				// console.log('end', info);
+				// console.log('end x', info.x);
+
 				// remove proxy
 				const proxy = document.getElementById('dragproxy');
 				proxy.remove();