@onehat/ui 0.4.82 → 0.4.83

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@onehat/ui",
-	"version": "0.4.82",
+	"version": "0.4.83",
 	"description": "Base UI for OneHat apps",
 	"main": "src/index.js",
 	"type": "module",
@@ -58,17 +58,18 @@
 		"@k-renwick/colour-mixer": "^1.2.1",
 		"@legendapp/motion": "^2.4.0",
 		"@onehat/data": "^1.22.0",
-		"clsx": "^2.1.1",
-		"nativewind": "4.1.23",
-		"normalize-css-color": "^1.0.2",
 		"@react-native-community/slider": "^4.5.2",
 		"@reduxjs/toolkit": "^2.6.1",
+		"clsx": "^2.1.1",
 		"decimal.js": "^10.5.0",
 		"inflector-js": "^1.0.1",
 		"js-cookie": "^3.0.5",
+		"nativewind": "4.1.23",
+		"normalize-css-color": "^1.0.2",
 		"react-hook-form": "^7.55.0",
 		"react-native-progress": "^5.0.1",
 		"react-redux": "^9.2.0",
+		"tailwind-scrollbar": "^3.1.0",
 		"tailwindcss": "^3.4.17",
 		"yup": "^1.6.1"
 	},
@@ -79,10 +80,10 @@
 		"react": "*",
 		"react-color": "^2.19.3",
 		"react-datetime": "^3.2.0",
-		"react-dom": "*",
 		"react-dnd": "^16.0.1",
 		"react-dnd-html5-backend": "^16.0.1",
-		"react-dnd-touch-backend":"16.0.1",
+		"react-dnd-touch-backend": "16.0.1",
+		"react-dom": "*",
 		"react-draggable": "^4.4.5",
 		"react-native": "*",
 		"react-native-draggable": "^3.3.0",

package/src/Components/Form/Field/Combo/Combo.js

@@ -24,6 +24,7 @@ import testProps from '../../../../Functions/testProps.js';
 import UiGlobals from '../../../../UiGlobals.js';
 import Input from '../Input.js';
 import { Grid, WindowedGridEditor } from '../../../Grid/Grid.js';
+import useForceUpdate from '../../../../Hooks/useForceUpdate.js';
 import withAlert from '../../../Hoc/withAlert.js';
 import withComponent from '../../../Hoc/withComponent.js';
 import withData from '../../../Hoc/withData.js';
@@ -121,13 +122,16 @@ export const ComboComponent = forwardRef((props, ref) => {
 			setValue,
 		} = props,
 		styles = UiGlobals.styles,
+		forceUpdate = useForceUpdate(),
 		inputRef = useRef(),
 		inputCloneRef = useRef(),
 		triggerRef = useRef(),
 		menuRef = useRef(),
 		displayValueRef = useRef(),
 		typingTimeout = useRef(),
-		[isMenuShown, setIsMenuShown] = useState(false),
+		isMenuShown = useRef(false),
+		isGridLayoutRunWithRender = useRef(false),
+		[isMenuAbove, setIsMenuAbove] = useState(false),
 		[isViewerShown, setIsViewerShown] = useState(false),
 		[viewerSelection, setViewerSelection] = useState([]),
 		[isRendered, setIsRendered] = useState(false),
@@ -140,15 +144,39 @@ export const ComboComponent = forwardRef((props, ref) => {
 		[newEntityDisplayValue, setNewEntityDisplayValue] = useState(null),
 		[filteredData, setFilteredData] = useState(data),
 		[inputHeight, setInputHeight] = useState(0),
+		[menuRenderedHeight, setMenuRenderedHeight] = useState(0),
 		[width, setWidth] = useState(0),
 		[top, setTop] = useState(0),
 		[left, setLeft] = useState(0),
+		getIsMenuShown = () => {
+			return isMenuShown.current;
+		},
+		setIsMenuShown = (bool) => {
+			isMenuShown.current = bool;
+
+			if (!bool) {
+				// The menu's onLayout runs every time there's a change in its size or position.
+				// We're only interested in the *first* time it runs with a rendered height.
+				// So if hiding the menu, reset isGridLayoutRunWithRender here and we'll set it to true
+				// the first time onLayout runs with a height.
+				setIsGridLayoutRunWithRender(false);
+				setIsMenuAbove(false); // reset this so the next time the menu opens, it starts below the input
+			}
+
+			forceUpdate();
+		},
+		getIsGridLayoutRunWithRender = () => {
+			return isGridLayoutRunWithRender.current;
+		},
+		setIsGridLayoutRunWithRender = (bool) => {
+			isGridLayoutRunWithRender.current = bool;
+		},
 		onLayout = (e) => {
 			setIsRendered(true);
 			setContainerWidth(e.nativeEvent.layout.width);
 		},
 		showMenu = async () => {
-			if (isMenuShown) {
+			if (getIsMenuShown()) {
 				return;
 			}
 			if (CURRENT_MODE === UI_MODE_WEB && inputRef.current?.getBoundingClientRect) {
@@ -181,13 +209,13 @@ export const ComboComponent = forwardRef((props, ref) => {
 			setIsMenuShown(true);
 		},
 		hideMenu = () => {
-			if (!isMenuShown) {
+			if (!getIsMenuShown()) {
 				return;
 			}
 			setIsMenuShown(false);
 		},
 		toggleMenu = () => {
-			setIsMenuShown(!isMenuShown);
+			setIsMenuShown(!getIsMenuShown());
 		},
 		temporarilySetIsNavigatingViaKeyboard = () => {
 			setIsNavigatingViaKeyboard(true);
@@ -359,14 +387,14 @@ export const ComboComponent = forwardRef((props, ref) => {
 			if (reloadOnTrigger && Repository) {
 				await Repository.reload();
 			}
-			if (isMenuShown) {
+			if (getIsMenuShown()) {
 				hideMenu();
 			} else {
 				showMenu();
 			}
 		},
 		onTriggerBlur = (e) => {
-			if (!isMenuShown) {
+			if (!getIsMenuShown()) {
 				return;
 			}
 
@@ -409,6 +437,33 @@ export const ComboComponent = forwardRef((props, ref) => {
 		onCheckButtonPress = () => {
 			hideMenu();
 		},
+		onGridLayout = (e) => {
+			// This method is to determine if we need to flip the grid above the input
+			// because the menu is partially offscreen
+
+			if (CURRENT_MODE !== UI_MODE_WEB || !e.nativeEvent.layout.height) {
+				return;
+			}
+
+			// we reach this point only if the grid has rendered with a height.
+
+			if (!getIsGridLayoutRunWithRender()) {
+				// we reach this point only on the *first* time onGridLayout runs with a height.
+				// determine if the menu is partially offscreen
+				const
+					menuRect = menuRef.current.getBoundingClientRect(),
+					inputRect = inputRef.current.getBoundingClientRect(),
+					menuOverflows = menuRect.bottom > window.innerHeight;
+				if (menuOverflows) {
+					// flip it
+					setIsMenuAbove(true);
+				} else {
+					setIsMenuAbove(false);
+				}
+				setMenuRenderedHeight(e.nativeEvent.layout.height);
+				setIsGridLayoutRunWithRender(true);
+			}
+		},
 		isEventStillInComponent = (e) => {
 			const {
 					relatedTarget
@@ -518,7 +573,7 @@ export const ComboComponent = forwardRef((props, ref) => {
 				setFilteredData(found);
 			}
 
-			if (!isMenuShown) {
+			if (!getIsMenuShown()) {
 				showMenu();
 			}
 			setIsSearchMode(true);
@@ -734,7 +789,7 @@ export const ComboComponent = forwardRef((props, ref) => {
 				</Pressable>;
 	}
 
-	if (isMenuShown) {
+	if (getIsMenuShown()) {
 		const gridProps = _.pick(props, [
 			'Editor',
 			'model',
@@ -743,6 +798,9 @@ export const ComboComponent = forwardRef((props, ref) => {
 			'idIx',
 			'displayIx',
 			// 'value',
+			'disableAdd',
+			'disableEdit',
+			'disableDelete',
 			'disableView',
 			'disableCopy',
 			'disableDuplicate',
@@ -761,8 +819,9 @@ export const ComboComponent = forwardRef((props, ref) => {
 		if (!Repository) {
 			gridProps.data = filteredData;
 		}
-		const WhichGrid = isEditor ? WindowedGridEditor : Grid;
-		const gridStyle = {};
+		const
+			WhichGrid = isEditor ? WindowedGridEditor : Grid,
+			gridStyle = {};
 		if (CURRENT_MODE === UI_MODE_WEB) {
 			gridStyle.height = menuHeight || styles.FORM_COMBO_MENU_HEIGHT;
 		}
@@ -786,6 +845,7 @@ export const ComboComponent = forwardRef((props, ref) => {
 					disablePresetButtons={!isEditor}
 					alternateRowBackgrounds={false}
 					showSelectHandle={false}
+					onLayout={onGridLayout}
 					onChangeSelection={(selection) => {
 
 						if (Repository && selection[0]?.isPhantom) {
@@ -938,7 +998,7 @@ export const ComboComponent = forwardRef((props, ref) => {
 							</Box>;
 			}
 			dropdownMenu = <Popover
-								isOpen={isMenuShown}
+								isOpen={getIsMenuShown()}
 								onClose={() => {
 									hideMenu();
 								}}
@@ -962,15 +1022,24 @@ export const ComboComponent = forwardRef((props, ref) => {
 										'max-w-full',
 									)}
 									style={{
-										top,
+										// If flipped, position above input; otherwise, below
+										top: isMenuAbove
+											? (top - menuRenderedHeight) // above
+											: top, // below
 										left,
 										width,
-										// height: (menuHeight || styles.FORM_COMBO_MENU_HEIGHT) + inputHeight,
 										minWidth: 100,
 									}}
 								>
-									{inputClone}
-									{grid}
+									{isMenuAbove ?
+										<>
+											{grid}
+											{inputClone}
+										</> :
+										<>
+											{inputClone}
+											{grid}
+										</>}
 								</Box>
 							</Popover>;
 		}

package/src/Components/Form/Field/Json.js

@@ -21,6 +21,7 @@ export function JsonElement(props) {
 			tooltip = null,
 			isDisabled = false,
 			isViewOnly = false,
+			isCollapsed = true,
 			tooltipPlacement = 'bottom',
 			testID,
 
@@ -59,7 +60,7 @@ export function JsonElement(props) {
 					editable={!isViewOnly}
 					src={src}
 					enableClipboard={false}
-					collapsed={true}
+					collapsed={isCollapsed}
 					onEdit={(obj) => {
 						setValue(JSON.stringify(obj.updated_src));
 					}}

package/src/Components/Form/Field/Tag/Tag.js

@@ -12,6 +12,8 @@ import {
 import {
 	EDITOR_TYPE__PLAIN,
 } from '../../../../Constants/Editor.js';
+import Button from '../../../Buttons/Button.js';
+import testProps from '../../../../Functions/testProps.js';
 import Form from '../../Form.js';
 import Viewer from '../../../Viewer/Viewer.js';
 import withAlert from '../../../Hoc/withAlert.js';
@@ -36,11 +38,13 @@ function TagComponent(props) {
 			Editor,
 			_combo = {},
 			SourceRepository,
+			mustSaveBeforeEditingJoinData = false,
 			joinDataConfig,
-			outerValueId, // for recursion only. See note in useEffect
+			getBaseParams, // See note in useEffect
+			outerValueId, // See note in useEffect
 			tooltip,
 			testID,
-			getBaseParams,
+			isDirty = false,
 
 			// parent Form
 			onChangeValue,
@@ -77,11 +81,11 @@ function TagComponent(props) {
 			}
 			return null;
 		}),
-		[isInited, setIsInited] = useState(false),
+		[isInited, setIsInited] = useState(_.isUndefined(getBaseParams)), // default to true unless getBaseParams is defined
 		modelFieldStartsWith = hasJoinData ? Inflector.underscore(JoinRepository.getSchema().name) + '__' : '',
 		valueRef = useRef(value),
 		onView = async (item, e) => {
-			// This method shows the record viewer
+			// show the joined record's viewer
 			const
 				id = item.id,
 				repository = TargetRepository;
@@ -142,7 +146,7 @@ function TagComponent(props) {
 			}
 
 			// The value we get from combo is a simple int
-			// Convert this to id and displayValue from either Repository or data array.
+			// Convert this to { id, text} from either Repository or data array.
 			const
 				data = props.data,
 				idIx = props.idIx,
@@ -171,32 +175,36 @@ function TagComponent(props) {
 
 			let joinData = {};
 			if (hasJoinData) {
-				// build up the default starting values,
+				// build up the default starting values for joinData,
 				// first with schema defaultValues...
 				const
 					allSchemaDefaults = JoinRepository.getSchema().getDefaultValues(),
 					modelSchemaDefaults = _.pickBy(allSchemaDefaults, (value, key) => {
 						return key.startsWith(modelFieldStartsWith);
 					}),
-					joinFieldNames = joinDataConfig.map(fieldConfig => fieldConfig.name || fieldConfig),
-					schemaDefaultValues = _.pick(modelSchemaDefaults, joinFieldNames),
-					strippedSchemaDefaultValues = _.mapKeys(schemaDefaultValues, (value, key) => {
-						return key.startsWith(modelFieldStartsWith) ? key.slice(modelFieldStartsWith.length) : key;
-					});
-
-				// then with default values in joinDataConfig, if they exist
-				_.each(joinDataConfig, (fieldConfig) => {
-					if (!_.isNil(fieldConfig.defaultValue)) {
-						joinData[fieldConfig.name] = fieldConfig.defaultValue;
-					}
+					fullFieldNames = propertyDef.joinData.map((fieldName) => { // add the 'model_name__' prefix so we can get schema default values
+						return modelFieldStartsWith + fieldName;
+					}),
+					schemaDefaultValues = _.pick(modelSchemaDefaults, fullFieldNames);
+				joinData = _.mapKeys(schemaDefaultValues, (value, key) => { // strip out the 'model_name__' prefix from field names
+					return key.startsWith(modelFieldStartsWith) ? key.slice(modelFieldStartsWith.length) : key;
 				});
-				joinData = { ...strippedSchemaDefaultValues, ...joinData };
+
+				// then override with default values in joinDataConfig, if they exist
+				if (joinDataConfig) {
+					_.each(Object.keys(joinDataConfig), (fieldName) => {
+						const fieldConfig = joinDataConfig[fieldName];
+						if (!_.isUndefined(fieldConfig.defaultValue)) { // null in jsonDataConfig will override a default value in schema!
+							joinData[fieldName] = fieldConfig.defaultValue;
+						}
+					});
+				}
 			}
 
 
 			// add new value
 			const
-				newValue = [...value], // clone, so we trigger a re-render
+				newValue = [...value], // clone Tag's full current value (array), so we trigger a re-render after adding the new value
 				newItem = {
 					id,
 					text: displayValue,
@@ -215,8 +223,8 @@ function TagComponent(props) {
 			});			
 			setValue(newValue);
 		},
-		onJoin = async (item, e) => {
-			// This method shows the joinData viewer/editor
+		onViewEditJoinData = async (item, e) => {
+			// show the joinData viewer/editor
 
 			/* item format:
 				item = {
@@ -229,22 +237,27 @@ function TagComponent(props) {
 				}
 			*/
 
-			// prepend 'model_name__' to the field names, so they match the JoinRepository property names
+			// Prepare Form to edit the joinData
 			const
-				record = _.mapKeys(item.joinData, (value, key) => {
+				// create the Form.record, format: { meters_pm_schedules__also_resets: null, meters_pm_schedules__hide_every_n: 5 }
+				record = _.mapKeys(item.joinData, (value, key) => { // add the 'model_name__' prefix so we can match JoinRepository property names
 					return modelFieldStartsWith + key;
 				}),
+				// create the Form.items
 				items = propertyDef.joinData.map((fieldName) => {
 					let obj = {
 						name: modelFieldStartsWith + fieldName,
 					};
-					// add in any config from joinDataConfig for this field
+
+					// add in any specific config for joinData[fieldName]], if it exists
+					// (The outer *Editor can configure each Tag field's joinData Form item.
+					// This moves that configuration down and adds outerValueId)
 					if (joinDataConfig?.[fieldName]) {
-						const jdcf = _.clone(joinDataConfig[fieldName]); // don't mutate original
-						jdcf.outerValueId = item.id;
+						const joinDataConfigFieldname = _.clone(joinDataConfig[fieldName]); // don't mutate original
+						joinDataConfigFieldname.outerValueId = item.id; // so that joinData can be aware of the value of the inspected ValueBox; see note in useEffect, below
 						obj = {
 							...obj,
-							...jdcf,
+							...joinDataConfigFieldname,
 						};
 					}
 
@@ -253,6 +266,7 @@ function TagComponent(props) {
 
 			let height = 300;
 			let body;
+			const extraModalProps = {};
 			if (isViewOnly) {
 				// show Viewer
 				body = <Viewer
@@ -263,12 +277,17 @@ function TagComponent(props) {
 								labelWidth: 200,
 							}}
 						/>;
+
+				extraModalProps.customButtons = [
+					<Button
+						{...testProps('closeBtn')}
+						key="closeBtn"
+						onPress={hideModal}
+						text="Close"
+						className="text-white"
+					/>,
+				];
 			} else {
-				switch (items.length) {
-					case 1: height = 250; break;
-					case 2: height = 400; break;
-					default: height = 600; break;
-				}
 				body = <Form
 							editorType={EDITOR_TYPE__PLAIN}
 							isEditorViewOnly={false}
@@ -285,7 +304,7 @@ function TagComponent(props) {
 							]}
 							onSave={(values)=> {
 
-								// strip the 'model__' prefix from the field names
+								// strip the 'model_name__' prefix from the field names
 								values = _.mapKeys(values, (value, key) => {
 									return key.startsWith(modelFieldStartsWith) ? key.slice(modelFieldStartsWith.length) : key;
 								});
@@ -303,6 +322,11 @@ function TagComponent(props) {
 							}}
 						/>;
 			}
+			switch (items.length) {
+				case 1: height = 250; break;
+				case 2: height = 400; break;
+				default: height = 600; break;
+			}
 
 			showModal({
 				title: 'Extra data for "' + item.text + '"',
@@ -312,6 +336,7 @@ function TagComponent(props) {
 				includeReset: false,
 				includeCancel: false,
 				body,
+				...extraModalProps,
 			});
 		},
 		onGridAdd = (selection) => {
@@ -381,54 +406,47 @@ function TagComponent(props) {
 						text={val.text}
 						onView={() => onView(val)}
 						showEye={showEye}
-						onJoin={() => onJoin(val)}
-						showJoin={hasJoinData}
+						onViewEditJoinData={() => onViewEditJoinData(val)}
+						showJoin={hasJoinData && (!mustSaveBeforeEditingJoinData || !isDirty)}
 						onDelete={!isViewOnly ? () => onDelete(val) : null}
 						minimizeForRow={minimizeForRow}
 					/>;
 		});
 	
-	useEffect(() => {
-
-		// NOTE: This useEffect is so we can set the Target baseParams before it loads
-		// We did this for cases where the Tag field has joinData that's managing a nested Tag field. 
-		// ... This deals with recursion, so gets "alice in wonderland" quickly!
-		// If that inner Tag field has getBaseParams defined on the joinDataConfig of the outer Tag,
-		// then that means it needs to set its baseParams dynamically, based on the values that are 
-		// currently set, as well as the value of the outer ValueBox that was clicked on.
-
-		// For example: in the MetersEditor:
-		// {
-		// 	name: 'meters__pm_schedules',
-		// 	parent: self,
-		// 	reference: 'meters__pm_schedules',
-		// 	joinDataConfig: {
-		// 		also_resets: {
-		// 			getBaseParams: (values, outerValueId) => {
-		// 				const
-		// 					baseParams = {
-		// 						'conditions[MetersPmSchedules.meter_id]': meter_id, // limit also_resets to those MetersPmSchedules related to this meter
-		// 					},
-		// 					ids = values.map((value) => value.id),
-		// 					mpsValues = JSON.parse(self.children.meters__pm_schedules?.value || '[]');
-		// 				if (outerValueId) {
-		// 					ids.push(outerValueId);
-		// 				}
-		// 				if (!_.isEmpty(ids)) {
-		// 					baseParams['conditions[MetersPmSchedules.pm_schedule_id NOT IN]'] = ids;
-		// 				}
-		// 				return baseParams;
-		// 			},
-		// 		},
-		// 	},
-		// }
-
-
-		if (getBaseParams) {
+	if (!_.isUndefined(getBaseParams) && outerValueId) {
+		useEffect(() => {
+
+			// NOTE: This useEffect is so we can dynamically set the TargetRepository's baseParams,
+			// based on outerValueId, before it loads.
+			// We did this for cases where the Tag field has joinData that's managing a nested Tag field. 
+			// ... This deals with recursion, so gets "alice in wonderland" quickly!
+			// If that inner Tag field has getBaseParams defined on a joinDataConfig field of the outer Tag,
+			// then that means it needs to set its baseParams dynamically, based on the value of the outer ValueBox.
+
+			// For example: in the MetersEditor:
+			// {
+			// 	name: 'meters__pm_schedules',
+			// 	mustSaveBeforeEditingJoinData: true,
+			// 	joinDataConfig: {
+			// 		also_resets: {
+			// 			getBaseParams: (values, outerValueId) => {
+			// 				const baseParams = {
+			// 					'conditions[MetersPmSchedules.meter_id]': meter_id, // limit also_resets to those MetersPmSchedules related to this meter
+			// 				};
+			// 				if (outerValueId) {
+			// 					baseParams['conditions[MetersPmSchedules.id <>]'] = outerValueId; // exclude the ValueBox that was clicked on
+			// 				}
+			// 				return baseParams;
+			// 			},
+			// 		},
+			// 	},
+			// }
+
 			TargetRepository.setBaseParams(getBaseParams(value, outerValueId));
-		}
-		setIsInited(true);
-	}, [value]);
+			setIsInited(true);
+
+		}, [value]);
+	}
 
 	if (!isInited) {
 		return null;

package/src/Components/Form/Field/Tag/ValueBox.js

@@ -16,7 +16,7 @@ export default function ValueBox(props) {
 			text,
 			onView,
 			showEye = false,
-			onJoin,
+			onViewEditJoinData,
 			showJoin = false,
 			onDelete,
 			minimizeForRow = false,
@@ -60,7 +60,7 @@ export default function ValueBox(props) {
 							size: styles.FORM_TAG_VALUEBOX_ICON_SIZE,
 							className: 'text-grey-600',
 						}}
-						onPress={onJoin}
+						onPress={onViewEditJoinData}
 						className={clsx(
 							'ValueBox-joinBtn',
 							'h-full',

package/src/Components/Form/Form.js

@@ -816,6 +816,7 @@ function Form(props) {
 												{...testProps('field-' + name)}
 												name={name}
 												value={value}
+												isDirty={isDirty}
 												onChangeValue={(newValue) => {
 													if (newValue === undefined) {
 														newValue = null; // React Hook Form doesn't respond well when setting value to undefined

package/src/Components/Grid/Grid.js

@@ -133,6 +133,7 @@ function GridComponent(props) {
 			flatListProps = {},
 			onRowPress,
 			onRender,
+			onLayout,
 			disableLoadOnRender = false,
 			forceLoadOnRender = false,
 			pullToRefresh = true,
@@ -1092,6 +1093,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`);
 			}

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-400',
+										'[&::-webkit-scrollbar-thumb]:rounded-full',
 										colClassName,
 										styles.GRID_CELL_CLASSNAME,
 										styles.GRID_ROW_MAX_HEIGHT_NORMAL,

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/Toolbar/Pagination.js

@@ -56,8 +56,8 @@ export default function Pagination(props) {
 		let items = [],
 			isDisabled = false;
 		if (showMoreOnly) {
-			isDisabled = (pageEnd === total);
-			if (showPagination) {
+			if (totalPages > 1 && showPagination) {
+				isDisabled = (pageEnd === total);
 				items.push(<Button
 								{...testProps('showMoreBtn')}
 								key="showMoreBtn"
@@ -88,120 +88,122 @@ export default function Pagination(props) {
 								self={self}
 							/>);
 			}
-			isDisabled = page === 1;
-			if (showPagination) {
-				items.push(<IconButton
-								{...testProps('firstPageBtn')}
-								key="firstPageBtn"
-								reference="firstPageBtn"
-								className="Pagination-firstPageBtn"
-								parent={self}
-								isDisabled={isDisabled}
-								icon={AnglesLeft}
-								_icon={iconProps}
-								onPress={() => Repository.setPage(1)}
-								tooltip="First Page"
-							/>);
-				items.push(<IconButton
-								{...testProps('prevPageBtn')}
-								key="prevPageBtn"
-								reference="prevPageBtn"
-								className="Pagination-prevPageBtn"
-								parent={self}
-								isDisabled={isDisabled}
-								icon={AngleLeft}
-								_icon={iconProps}
-								onPress={() => Repository.prevPage()}
-								tooltip="Previous Page"
-							/>);
+			if (totalPages > 1) {
+				isDisabled = page === 1;
+				if (showPagination) {
+					items.push(<IconButton
+									{...testProps('firstPageBtn')}
+									key="firstPageBtn"
+									reference="firstPageBtn"
+									className="Pagination-firstPageBtn"
+									parent={self}
+									isDisabled={isDisabled}
+									icon={AnglesLeft}
+									_icon={iconProps}
+									onPress={() => Repository.setPage(1)}
+									tooltip="First Page"
+								/>);
+					items.push(<IconButton
+									{...testProps('prevPageBtn')}
+									key="prevPageBtn"
+									reference="prevPageBtn"
+									className="Pagination-prevPageBtn"
+									parent={self}
+									isDisabled={isDisabled}
+									icon={AngleLeft}
+									_icon={iconProps}
+									onPress={() => Repository.prevPage()}
+									tooltip="Previous Page"
+								/>);
 
-				isDisabled = page === totalPages || totalPages <= 1;
-				items.push(<IconButton
-								{...testProps('nextPageBtn')}
-								key="nextPageBtn"
-								reference="nextPageBtn"
-								className="Pagination-nextPageBtn"
-								parent={self}
-								isDisabled={isDisabled}
-								icon={AngleRight}
-								_icon={iconProps}
-								onPress={() => Repository.nextPage()}
-								tooltip="Next Page"
-							/>);
-				items.push(<IconButton
-								{...testProps('lastPageBtn')}
-								key="lastPageBtn"
-								reference="lastPageBtn"
-								className="Pagination-lastPageBtn"
-								parent={self}
-								isDisabled={isDisabled}
-								icon={AnglesRight}
-								_icon={iconProps}
-								onPress={() => Repository.setPage(totalPages)}
-								tooltip="Last Page"
-							/>);
-				if (!minimize) {
-					items.push(<Text
-									key="page"
-									className="Pagination-page mx-1"
-								>Page</Text>);
-					items.push(<Input
-									{...testProps('pageInput')}
-									key="pageInput"
-									reference="pageInput"
+					isDisabled = page === totalPages || totalPages <= 1;
+					items.push(<IconButton
+									{...testProps('nextPageBtn')}
+									key="nextPageBtn"
+									reference="nextPageBtn"
+									className="Pagination-nextPageBtn"
 									parent={self}
-									keyboardType="numeric"
-									value={page?.toString()}
-									onChangeValue={(value) => Repository.setPage(value)}
-									maxValue={totalPages}
-									isDisabled={totalPages === 1}
-									className={clsx(
-										'Pagination-pageInput',
-										'min-w-[40px]',
-										'w-[40px]',
-										'text-center',
-										'bg-grey-100',
-									)}
-									textAlignIsCenter={true}
-									tooltip="Set Page"
-									tooltipClassName="w-[40px]"
+									isDisabled={isDisabled}
+									icon={AngleRight}
+									_icon={iconProps}
+									onPress={() => Repository.nextPage()}
+									tooltip="Next Page"
+								/>);
+					items.push(<IconButton
+									{...testProps('lastPageBtn')}
+									key="lastPageBtn"
+									reference="lastPageBtn"
+									className="Pagination-lastPageBtn"
+									parent={self}
+									isDisabled={isDisabled}
+									icon={AnglesRight}
+									_icon={iconProps}
+									onPress={() => Repository.setPage(totalPages)}
+									tooltip="Last Page"
+								/>);
+					if (!minimize) {
+						items.push(<Text
+										key="page"
+										className="Pagination-page mx-1"
+									>Page</Text>);
+						items.push(<Input
+										{...testProps('pageInput')}
+										key="pageInput"
+										reference="pageInput"
+										parent={self}
+										keyboardType="numeric"
+										value={page?.toString()}
+										onChangeValue={(value) => Repository.setPage(value)}
+										maxValue={totalPages}
+										isDisabled={totalPages === 1}
+										className={clsx(
+											'Pagination-pageInput',
+											'min-w-[40px]',
+											'w-[40px]',
+											'text-center',
+											'bg-grey-100',
+										)}
+										textAlignIsCenter={true}
+										tooltip="Set Page"
+										tooltipClassName="w-[40px]"
+									/>);
+						items.push(<Text
+										key="totalPages"
+										className={clsx(
+											'Pagination-totalPages',
+											'whitespace-nowrap',
+											'inline-flex',
+											'mx-1',
+										)}
+									>{`of ${totalPages}`}</Text>);
+					}
+				}
+
+				if (showPagination && !minimize && !disablePageSize) {
+					items.push(<PageSizeSelect
+									{...testProps('pageSize')}
+									key="pageSize"
+									reference="pageSize"
+									parent={self}
+									pageSize={pageSize}
+									Repository={Repository}
 								/>);
+				}
+				if (showPagination && !minimize) {
+					let pageSpan = `${pageStart} – ${pageEnd}`;
+					if (pageStart === pageEnd) {
+						pageSpan = pageStart;
+					}
 					items.push(<Text
-									key="totalPages"
+									key="pageDisplay"
 									className={clsx(
-										'Pagination-totalPages',
+										'Pagination-pageDisplay',
 										'whitespace-nowrap',
 										'inline-flex',
 										'mx-1',
 									)}
-								>{`of ${totalPages}`}</Text>);
-				}
-			}
-
-			if (showPagination && !minimize && !disablePageSize) {
-				items.push(<PageSizeSelect
-								{...testProps('pageSize')}
-								key="pageSize"
-								reference="pageSize"
-								parent={self}
-								pageSize={pageSize}
-								Repository={Repository}
-							/>);
-			}
-			if (showPagination && !minimize) {
-				let pageSpan = `${pageStart} – ${pageEnd}`;
-				if (pageStart === pageEnd) {
-					pageSpan = pageStart;
+								>{`Displaying ${pageSpan} of ${total}`}</Text>);
 				}
-				items.push(<Text
-								key="pageDisplay"
-								className={clsx(
-									'Pagination-pageDisplay',
-									'whitespace-nowrap',
-									'inline-flex',
-									'mx-1',
-								)}
-							>{`Displaying ${pageSpan} of ${total}`}</Text>);
 			}
 		}
 		return <HStack

package/src/Components/Tree/TreeNode.js

@@ -1,6 +1,7 @@
 import { useMemo, useEffect, } from 'react';
 import {
 	Box,
+	BoxNative,
 	HStackNative,
 	Icon,
 	Spinner,
@@ -185,7 +186,7 @@ export default function TreeNode(props) {
 								styles.TREE_NODE_EXPAND_BTN_CLASSNAME,
 							)}
 						/> :
-						<Box
+						<BoxNative
 							{...testProps('spacer')}
 							className={clsx(
 								'TreeNode-spacer',

package/src/Components/Viewer/Viewer.js

@@ -161,11 +161,8 @@ function Viewer(props) {
 				viewerTypeProps.isViewOnly = true;
 				viewerTypeProps.SourceRepository = Repository;
 			}
-			if (type?.match(/(GridEditor)$/)) {
-				viewerTypeProps.disableAdd = true;
-				viewerTypeProps.disableEdit = true;
-				viewerTypeProps.disableDelete = true;
-				viewerTypeProps.disableDuplicate = true;
+			if (type?.match(/(Grid|GridEditor)$/)) {
+				viewerTypeProps.canEditorViewOnly = true;
 			}
 			const Element = getComponentFromType(type);