@onehat/ui 0.4.34 → 0.4.35

package/package.json

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

package/src/Components/Editor/Editor.js

@@ -15,7 +15,9 @@ function Editor(props) {
 			onEditorSave: onSave,
 			onEditorClose: onClose,
 			onEditorDelete: onDelete,
-			getEditorMode,
+			getEditorMode = () => {
+				return props.editorMode;
+			},
 			onEditMode,
 			canRecordBeEdited,
 			_viewer = {},

package/src/Components/Form/Form.js

@@ -65,8 +65,7 @@ import _ from 'lodash';
 // Form is embedded on screen in some other way. Mainly use startingValues, items, validator
 
 function Form(props) {
-	const
-		{
+	const {
 			editorType = EDITOR_TYPE__WINDOWED, // EDITOR_TYPE__INLINE | EDITOR_TYPE__WINDOWED | EDITOR_TYPE__SIDE | EDITOR_TYPE__SMART | EDITOR_TYPE__PLAIN
 			startingValues = {},
 			items = [], // Columns, FieldSets, Fields, etc to define the form
@@ -114,7 +113,7 @@ function Form(props) {
 			// withEditor
 			isEditorViewOnly = false,
 			isSaving = false,
-			getEditorMode,
+			getEditorMode = () => {},
 			onCancel,
 			onSave,
 			onClose,
@@ -247,16 +246,14 @@ function Form(props) {
 				} else {
 					// editor is not defined, fall back to property definition
 					if (isEditable) {
-						const
-							{
+						const {
 								type: t,
 								...p
 							} = propertyDef?.editorType;
 						type = t;
 						editorTypeProps = p;
 					} else if (propertyDef?.viewerType) {
-						const
-							{
+						const {
 								type: t,
 								...p
 							} =  propertyDef?.viewerType;
@@ -504,16 +501,14 @@ function Form(props) {
 			}
 			if (!type) {
 				if (isEditable) {
-					const
-						{
+					const {
 							type: t,
 							...p
 						} = propertyDef?.editorType;
 					type = t;
 					editorTypeProps = p;
 				} else if (propertyDef?.viewerType) {
-					const
-						{
+					const {
 							type: t,
 							...p
 						} =  propertyDef?.viewerType;

package/src/Components/Grid/Grid.js

@@ -391,6 +391,7 @@ function GridComponent(props) {
 
 			let rowComponent =
 				<Pressable
+					dataSet={{ ix: index }}
 					{...testProps(getRowTestId ? getRowTestId(row) : ((Repository ? Repository.schema.name : 'GridRow') + '-' + item?.id))}
 					onPress={(e) => {
 						if (e.preventDefault && e.cancelable) {
@@ -467,7 +468,7 @@ function GridComponent(props) {
 							onContextMenu(item, e, selection);
 						}
 					}}
-					className="flex-row grow">
+					className="Pressable Row flex-row grow">
 					{({
 						hovered,
 						focused,
@@ -1182,7 +1183,7 @@ function GridComponent(props) {
 					initialNumToRender={initialNumToRender}
 					initialScrollIndex={0}
 					renderItem={renderRow}
-					className="FlatList bg-grey-100"
+					className="bg-grey-100"
 					{...flatListProps}
 				/>;
 	

package/src/Components/Grid/GridRow.js

@@ -319,7 +319,7 @@ function GridRow(props) {
 			rowClassName += ' border-4 border-[#0ff]';
 		}
 		return <HStackNative
-					{...testProps('row' + (isSelected ? '-selected' : ''))}
+					{...testProps('Row ' + (isSelected ? 'row-selected' : ''))}
 					{...rowProps}
 					key={hash}
 					className={rowClassName}

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

@@ -13,6 +13,7 @@ import {
 	EDITOR_TYPE__SIDE,
 	EDITOR_TYPE__INLINE,
 } from '../../../Constants/Editor.js';
+import useForceUpdate from '../../../Hooks/useForceUpdate.js'
 import Button from '../../Buttons/Button.js';
 import UiGlobals from '../../../UiGlobals.js';
 import _ from 'lodash';
@@ -27,7 +28,6 @@ export default function withSecondaryEditor(WrappedComponent, isTree = false) {
 			return <WrappedComponent {...props} ref={ref} isTree={isTree} />;
 		}
 
-		let [secondaryEditorMode, secondarySetEditorMode] = useState(EDITOR_MODE__VIEW); // Can change below, so use 'let'
 		const {
 				secondaryUserCanEdit = true, // not permissions, but capability
 				secondaryUserCanView = true,
@@ -72,6 +72,7 @@ export default function withSecondaryEditor(WrappedComponent, isTree = false) {
 
 				// withSecondarySelection
 				secondarySelection,
+				secondaryGetSelection,
 				secondarySetSelection,
 
 				// withAlert
@@ -79,17 +80,25 @@ export default function withSecondaryEditor(WrappedComponent, isTree = false) {
 				confirm,
 				hideAlert,
 			} = props,
+			forceUpdate = useForceUpdate(),
 			secondaryListeners = useRef({}),
 			secondaryEditorStateRef = useRef(),
 			secondaryNewEntityDisplayValueRef = useRef(),
+			secondaryEditorModeRef = useRef(EDITOR_MODE__VIEW),
+			secondaryIsIgnoreNextSelectionChangeRef = 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
-			[secondaryIsIgnoreNextSelectionChange, setSecondaryIsIgnoreNextSelectionChange] = useState(false),
 			[secondaryLastSelection, setLastSelection] = useState(),
+			secondarySetIsIgnoreNextSelectionChange = (bool) => {
+				secondaryIsIgnoreNextSelectionChangeRef.current = bool;
+			},
+			secondaryGetIsIgnoreNextSelectionChange = () => {
+				return secondaryIsIgnoreNextSelectionChangeRef.current;
+			},
 			secondarySetIsEditorShown = (bool) => {
 				secondarySetIsEditorShownRaw(bool);
 				if (!bool && secondaryOnEditorClose) {
@@ -100,8 +109,10 @@ export default function withSecondaryEditor(WrappedComponent, isTree = false) {
 				function doIt() {
 					secondarySetSelection(newSelection);
 				}
-				const formState = secondaryEditorStateRef.current;
-				if (!_.isEmpty(formState?.dirtyFields) && newSelection !== secondarySelection && secondaryEditorMode === EDITOR_MODE__EDIT) {
+				const
+					formState = secondaryEditorStateRef.current,
+					secondarySelection = secondaryGetSelection();
+				if (!_.isEmpty(formState?.dirtyFields) && newSelection !== secondarySelection && secondaryGetEditorMode() === EDITOR_MODE__EDIT) {
 					confirm('This record has unsaved changes. Are you sure you want to cancel editing? Changes will be lost.', doIt);
 				} else if (secondarySelection && secondarySelection[0] && !secondarySelection[0].isDestroyed && (secondarySelection[0]?.isPhantom || secondarySelection[0]?.isRemotePhantom)) {
 					confirm('This new record is unsaved. Are you sure you want to cancel editing? Changes will be lost.', async () => {
@@ -119,6 +130,15 @@ export default function withSecondaryEditor(WrappedComponent, isTree = false) {
 				secondaryListeners.current = obj;
 				// forceUpdate(); // we don't want to get into an infinite loop of renders. Simply directly assign the secondaryListeners in every child render
 			},
+			secondaryGetEditorMode = () => {
+				return secondaryEditorModeRef.current;
+			},
+			secondarySetEditorMode = (mode) => {
+				if (secondaryEditorModeRef.current !== mode) {
+					secondaryEditorModeRef.current = mode;
+					forceUpdate();
+				}
+			},
 			getNewEntityDisplayValue = () => {
 				return secondaryNewEntityDisplayValueRef.current;
 			},
@@ -128,6 +148,7 @@ export default function withSecondaryEditor(WrappedComponent, isTree = false) {
 					return;
 				}
 
+				const secondarySelection = secondaryGetSelection();
 				let addValues = values;
 
 				if (SecondaryRepository?.isLoading) {
@@ -202,7 +223,7 @@ export default function withSecondaryEditor(WrappedComponent, isTree = false) {
 				setIsSaving(true);
 				const entity = await SecondaryRepository.add(addValues, false, true);
 				setIsSaving(false);
-				setSecondaryIsIgnoreNextSelectionChange(true);
+				secondarySetIsIgnoreNextSelectionChange(true);
 				secondarySetSelection([entity]);
 				if (getListeners().onAfterAdd) {
 					await getListeners().onAfterAdd(entity);
@@ -225,6 +246,7 @@ export default function withSecondaryEditor(WrappedComponent, isTree = false) {
 					showPermissionsError(EDIT, secondaryModel);
 					return;
 				}
+				const secondarySelection = secondaryGetSelection();
 				if (_.isEmpty(secondarySelection) || (_.isArray(secondarySelection) && (secondarySelection.length > 1 || secondarySelection[0]?.isDestroyed))) {
 					return;
 				}
@@ -247,6 +269,7 @@ export default function withSecondaryEditor(WrappedComponent, isTree = false) {
 				if (_.isFunction(args)) {
 					cb = args;
 				}
+				const secondarySelection = secondaryGetSelection();
 				if (_.isEmpty(secondarySelection) || (_.isArray(secondarySelection) && (secondarySelection.length > 1 || secondarySelection[0]?.isDestroyed))) {
 					return;
 				}
@@ -305,6 +328,7 @@ export default function withSecondaryEditor(WrappedComponent, isTree = false) {
 					showPermissionsError(DELETE, secondaryModel);
 					return;
 				}
+				const secondarySelection = secondaryGetSelection();
 				if (getListeners().onBeforeDelete) {
 					const listenerResult = await getListeners().onBeforeDelete(secondarySelection);
 					if (listenerResult === false) {
@@ -345,6 +369,7 @@ export default function withSecondaryEditor(WrappedComponent, isTree = false) {
 
 				// check permissions for view
 				
+				const secondarySelection = secondaryGetSelection();
 				if (secondarySelection.length !== 1) {
 					return;
 				}
@@ -367,7 +392,7 @@ export default function withSecondaryEditor(WrappedComponent, isTree = false) {
 
 				// check permissions for duplicate
 
-
+				const secondarySelection = secondaryGetSelection();
 				if (secondarySelection.length !== 1) {
 					return;
 				}
@@ -381,29 +406,32 @@ export default function withSecondaryEditor(WrappedComponent, isTree = false) {
 					rawValues = _.omit(entity.getOriginalData(), idProperty);
 				rawValues.id = null; // unset the id of the duplicate
 				const duplicate = await SecondaryRepository.add(rawValues, false, true);
-				setSecondaryIsIgnoreNextSelectionChange(true);
+				secondarySetIsIgnoreNextSelectionChange(true);
 				secondarySetSelection([duplicate]);
 				secondarySetEditorMode(EDITOR_MODE__EDIT);
 				secondarySetIsEditorShown(true);
 			},
 			onRemoteDuplicate = async () => {
 				const
+					secondarySelection = secondaryGetSelection(),
 					entity = secondarySelection[0],
 					duplicateEntity = await SecondaryRepository.remoteDuplicate(entity);
 
-				setSecondaryIsIgnoreNextSelectionChange(true);
+				secondarySetIsIgnoreNextSelectionChange(true);
 				secondarySetSelection([duplicateEntity]);
 				secondaryDoEdit();
 			},
 			secondaryDoEditorSave = async (data, e) => {
-				let mode = secondaryEditorMode === EDITOR_MODE__ADD ? ADD : EDIT;
+				let mode = secondaryGetEditorMode() === EDITOR_MODE__ADD ? ADD : EDIT;
 				if (canUser && !canUser(mode, secondaryModel)) {
 					showPermissionsError(mode, secondaryModel);
 					return;
 				}
 
 				// NOTE: The Form submits onSave for both adds (when not isAutoSsave) and edits.
-				const isSingle = secondarySelection.length === 1;
+				const
+					secondarySelection = secondaryGetSelection(),
+					isSingle = secondarySelection.length === 1;
 				let useStaged = false;
 				if (isSingle) {
 					// just update this one entity
@@ -450,7 +478,7 @@ export default function withSecondaryEditor(WrappedComponent, isTree = false) {
 					if (secondaryOnChange) {
 						secondaryOnChange(secondarySelection);
 					}
-					if (secondaryEditorMode === EDITOR_MODE__ADD) {
+					if (secondaryGetEditorMode() === EDITOR_MODE__ADD) {
 						if (secondaryOnAdd) {
 							await secondaryOnAdd(secondarySelection);
 						}
@@ -463,7 +491,7 @@ export default function withSecondaryEditor(WrappedComponent, isTree = false) {
 						} else {
 							secondarySetEditorMode(EDITOR_MODE__VIEW);
 						}
-					} else if (secondaryEditorMode === EDITOR_MODE__EDIT) {
+					} else if (secondaryGetEditorMode() === EDITOR_MODE__EDIT) {
 						if (getListeners().onAfterEdit) {
 							await getListeners().onAfterEdit(secondarySelection);
 						}
@@ -479,6 +507,7 @@ export default function withSecondaryEditor(WrappedComponent, isTree = false) {
 			secondaryDoEditorCancel =  () => {
 				async function doIt() {
 					const
+						secondarySelection = secondaryGetSelection(),
 						isSingle = secondarySelection.length === 1,
 						isPhantom = secondarySelection[0] && !secondarySelection[0]?.isDestroyed && secondarySelection[0].isPhantom;
 					if (isSingle && isPhantom) {
@@ -517,9 +546,10 @@ export default function withSecondaryEditor(WrappedComponent, isTree = false) {
 					secondarySetIsEditorShown(false);
 				});
 			},
-			calculateEditorMode = (secondaryIsIgnoreNextSelectionChange = false) => {
+			calculateEditorMode = () => {
 			
-				let doStayInEditModeOnSelectionChange = secondaryStayInEditModeOnSelectionChange;
+				let secondaryIsIgnoreNextSelectionChange = secondaryGetIsIgnoreNextSelectionChange(),
+					doStayInEditModeOnSelectionChange = secondaryStayInEditModeOnSelectionChange;
 				if (!_.isNil(UiGlobals.stayInEditModeOnSelectionChange)) {
 					// allow global override to for this property
 					doStayInEditModeOnSelectionChange = UiGlobals.stayInEditModeOnSelectionChange;
@@ -529,13 +559,14 @@ export default function withSecondaryEditor(WrappedComponent, isTree = false) {
 				}
 			
 				// calculateEditorMode gets called only on selection changes
+				const secondarySelection = secondaryGetSelection();
 				let mode;
 				if (secondaryEditorType === EDITOR_TYPE__SIDE && !_.isNil(UiGlobals.isSideEditorAlwaysEditMode) && UiGlobals.isSideEditorAlwaysEditMode) {
 					// special case: side editor is always edit mode
 					mode = EDITOR_MODE__EDIT;
 				} else {
 					if (secondaryIsIgnoreNextSelectionChange) {
-						mode = secondaryEditorMode;
+						mode = secondaryGetEditorMode();
 						if (!secondaryCanEditorViewOnly && secondaryUserCanEdit) {
 							if (secondarySelection.length > 1) {
 								if (!secondaryDisableEdit) {
@@ -581,9 +612,9 @@ export default function withSecondaryEditor(WrappedComponent, isTree = false) {
 			};
 
 		useEffect(() => {
-			secondarySetEditorMode(calculateEditorMode(secondaryIsIgnoreNextSelectionChange));
+			secondarySetEditorMode(calculateEditorMode());
 
-			setSecondaryIsIgnoreNextSelectionChange(false);
+			secondarySetIsIgnoreNextSelectionChange(false);
 			setLastSelection(secondarySelection);
 		}, [secondarySelection]);
 	
@@ -602,7 +633,7 @@ 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)
-			secondaryEditorMode = calculateEditorMode(secondaryIsIgnoreNextSelectionChange);
+			secondarySetEditorMode(calculateEditorMode());
 		}
 
 		return <WrappedComponent
@@ -615,11 +646,12 @@ export default function withSecondaryEditor(WrappedComponent, isTree = false) {
 					secondaryIsEditorViewOnly={secondaryIsEditorViewOnly}
 					secondaryIsAdding={secondaryIsAdding}
 					secondaryIsSaving={secondaryIsSaving}
-					secondaryEditorMode={secondaryEditorMode}
+					secondaryEditorMode={secondaryGetEditorMode()}
 					secondaryOnEditMode={secondarySetEditMode}
 					secondaryOnViewMode={secondarySetViewMode}
 					secondaryEditorStateRef={secondaryEditorStateRef}
 					secondarySetIsEditorShown={secondarySetIsEditorShown}
+					secondarySetIsIgnoreNextSelectionChange={secondarySetIsIgnoreNextSelectionChange}
 					secondaryOnAdd={(!secondaryUserCanEdit || secondaryDisableAdd) ? null : secondaryDoAdd}
 					secondaryOnEdit={(!secondaryUserCanEdit || secondaryDisableEdit) ? null : secondaryDoEdit}
 					secondaryOnDelete={(!secondaryUserCanEdit || secondaryDisableDelete) ? null : secondaryDoDelete}

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

@@ -1,18 +1,18 @@
-import { useState, useEffect, } from 'react';
+import { forwardRef, useState, useEffect, useRef, } from 'react';
 import {
 	SELECTION_MODE_SINGLE,
 	SELECTION_MODE_MULTI,
 	SELECT_UP,
 	SELECT_DOWN,
 } from '../../../Constants/Selection.js';
+import useForceUpdate from '../../../Hooks/useForceUpdate.js';
 import inArray from '../../../Functions/inArray.js';
 import _ from 'lodash';
 
 // NOTE: This is a modified version of @onehat/ui/src/Hoc/withSelection
-// This HOC will eventually get out of sync with that one, and may need to be updated.
 
 export default function withSelection(WrappedComponent) {
-	return (props) => {
+	return forwardRef((props, ref) => {
 
 		if (props.secondaryDisableWithSelection) {
 			return <WrappedComponent {...props} />;
@@ -25,8 +25,7 @@ export default function withSelection(WrappedComponent) {
 			return <WrappedComponent {...props} />;
 		}
 
-		const
-			{
+		const {
 				secondarySelection,
 				secondaryDefaultSelection,
 				secondaryOnChangeSelection,
@@ -49,20 +48,25 @@ export default function withSelection(WrappedComponent) {
 			} = props,
 			usesWithValue = !!secondarySetValue,
 			initialSelection = secondarySelection || secondaryDefaultSelection || [],
-			[secondaryLocalSelection, setLocalSelection] = useState(initialSelection),
+			forceUpdate = useForceUpdate(),
+			secondarySelectionRef = useRef(initialSelection),
 			[isReady, setIsReady] = useState(secondarySelection || false), // if secondarySelection is already defined, or secondaryValue is not null and we don't need to load repository, it's ready
 			secondarySetSelection = (secondarySelection) => {
-				if (_.isEqual(secondarySelection, secondaryLocalSelection)) {
+				if (_.isEqual(secondarySelection, secondaryGetSelection())) {
 					return;
 				}
 
-				setLocalSelection(secondarySelection);
+				secondarySelectionRef.current = secondarySelection;
 				if (secondaryOnChangeSelection) {
 					secondaryOnChangeSelection(secondarySelection);
 				}
 				if (fireEvent) {
 					fireEvent('secondaryChangeSelection', secondarySelection);
 				}
+				forceUpdate();
+			},
+			secondaryGetSelection = () => {
+				return secondarySelectionRef.current;
 			},
 			secondarySelectPrev = () => {
 				secondarySelectDirection(SELECT_UP);
@@ -103,21 +107,21 @@ export default function withSelection(WrappedComponent) {
 				}
 			},
 			secondaryAddToSelection = (item) => {
-				const newSelection = _.clone(secondaryLocalSelection); // so we get a new object, so descendants rerender
+				const newSelection = _.clone(secondaryGetSelection()); // so we get a new object, so descendants rerender
 				newSelection.push(item);
 				secondarySetSelection(newSelection);
 			},
 			secondaryRemoveFromSelection = (item) => {
 				let newSelection = [];
 				if (SecondaryRepository) {
-					newSelection = _.remove(secondaryLocalSelection, (sel) => sel !== item);
+					newSelection = _.remove(secondaryGetSelection(), (sel) => sel !== item);
 				} else {
-					newSelection = _.remove(secondaryLocalSelection, (sel) => sel[secondaryIdIx] !== item[secondaryIdIx]);
+					newSelection = _.remove(secondaryGetSelection(), (sel) => sel[secondaryIdIx] !== item[secondaryIdIx]);
 				}
 				secondarySetSelection(newSelection);
 			},
 			secondaryDeselectAll = () => {
-				if (!_.isEmpty(secondaryLocalSelection)) {
+				if (!_.isEmpty(secondaryGetSelection())) {
 					secondarySetSelection([]);
 				}
 			},
@@ -128,7 +132,7 @@ export default function withSelection(WrappedComponent) {
 				// That way, after a load event, we'll keep the same selection, if possible.
 				const
 					newSelection = [],
-					ids = _.map(secondaryLocalSelection, (item) => item.id);
+					ids = _.map(secondaryGetSelection(), (item) => item.id);
 				_.each(ids, (id) => {
 					const found = SecondaryRepository.getById(id);
 					if (found) {
@@ -162,9 +166,9 @@ export default function withSelection(WrappedComponent) {
 			secondarySelectRangeTo = (item) => {
 				// Select above max or below min to this one
 				const
-					currentSelectionLength = secondaryLocalSelection.length,
+					currentSelectionLength = secondaryGetSelection().length,
 					index = getIndexOfSelectedItem(item);
-				let newSelection = _.clone(secondaryLocalSelection); // so we get a new object, so descendants rerender
+				let newSelection = _.clone(secondaryGetSelection()); // so we get a new object, so descendants rerender
 
 				if (currentSelectionLength) {
 					const { items, max, min, } = getMaxMinSelectionIndices();
@@ -191,10 +195,10 @@ export default function withSelection(WrappedComponent) {
 			},
 			secondaryIsInSelection = (item) => {
 				if (SecondaryRepository) {
-					return inArray(item, secondaryLocalSelection);
+					return inArray(item, secondaryGetSelection());
 				}
 
-				const found = _.find(secondaryLocalSelection, (selectedItem) => {
+				const found = _.find(secondaryGetSelection(), (selectedItem) => {
 						return selectedItem[secondaryIdIx] === item[secondaryIdIx];
 					});
 				return !!found;
@@ -216,10 +220,10 @@ export default function withSelection(WrappedComponent) {
 				return found;
 			},
 			secondaryGetIdsFromLocalSelection = () => {
-				if (!secondaryLocalSelection[0]) {
+				if (!secondaryGetSelection()[0]) {
 					return null;
 				}
-				const secondaryValues = _.map(secondaryLocalSelection, (item) => {
+				const secondaryValues = _.map(secondaryGetSelection(), (item) => {
 					if (SecondaryRepository) {
 						return item.id;
 					}
@@ -303,7 +307,7 @@ export default function withSelection(WrappedComponent) {
 					}
 				}
 
-				if (!_.isEqual(newSelection, secondaryLocalSelection)) {
+				if (!_.isEqual(newSelection, secondaryGetSelection())) {
 					secondarySetSelection(newSelection);
 				}
 			};
@@ -354,7 +358,7 @@ export default function withSelection(WrappedComponent) {
 		}, [secondaryValue]);
 
 		if (self) {
-			self.secondarySelection = secondaryLocalSelection;
+			self.secondarySelection = secondaryGetSelection();
 			self.secondarySetSelection = secondarySetSelection;
 			self.secondarySelectPrev = secondarySelectPrev;
 			self.secondarySelectNext = secondarySelectNext;
@@ -395,8 +399,10 @@ export default function withSelection(WrappedComponent) {
 		
 		return <WrappedComponent
 					{...props}
+					ref={ref}
 					secondaryDisableWithSelection={false}
-					secondarySelection={secondaryLocalSelection}
+					secondarySelection={secondaryGetSelection()}
+					secondaryGetSelection={secondaryGetSelection}
 					secondarySetSelection={secondarySetSelection}
 					secondarySelectionMode={secondarySelectionMode}
 					secondarySelectPrev={secondarySelectPrev}
@@ -411,5 +417,5 @@ export default function withSelection(WrappedComponent) {
 					secondaryGetIdsFromSelection={secondaryGetIdsFromLocalSelection}
 					secondaryGetDisplayValuesFromSelection={secondaryGetDisplayValuesFromLocalSelection}
 				/>;
-	};
+	});
 }

package/src/Components/Hoc/withEditor.js

@@ -13,6 +13,7 @@ import {
 	EDITOR_TYPE__SIDE,
 	EDITOR_TYPE__INLINE,
 } from '../../Constants/Editor.js';
+import useForceUpdate from '../../Hooks/useForceUpdate.js'
 import Button from '../Buttons/Button.js';
 import UiGlobals from '../../UiGlobals.js';
 import _ from 'lodash';
@@ -76,6 +77,7 @@ export default function withEditor(WrappedComponent, isTree = false) {
 				confirm,
 				hideAlert,
 			} = props,
+			forceUpdate = useForceUpdate(),
 			listeners = useRef({}),
 			editorStateRef = useRef(),
 			newEntityDisplayValueRef = useRef(),
@@ -128,7 +130,10 @@ export default function withEditor(WrappedComponent, isTree = false) {
 				return editorModeRef.current;
 			},
 			setEditorMode = (mode) => {
-				editorModeRef.current = mode;
+				if (editorModeRef.current !== mode) {
+					editorModeRef.current = mode;
+					forceUpdate();
+				}
 			},
 			getNewEntityDisplayValue = () => {
 				return newEntityDisplayValueRef.current;

package/src/Components/Hoc/withPdfButtons.js

@@ -11,7 +11,6 @@ import Form from '../Form/Form.js';
 import Pdf from '../Icons/Pdf.js';
 import UiGlobals from '../../UiGlobals.js';
 import inArray from '../../Functions/inArray.js';
-import testProps from '../../Functions/testProps.js';
 import _ from 'lodash';
 
 export default function withPdfButtons(WrappedComponent) {

package/src/Components/Hoc/withSelection.js

@@ -23,8 +23,7 @@ export default function withSelection(WrappedComponent) {
 			return <WrappedComponent {...props} ref={ref} />;
 		}
 
-		const
-			{
+		const {
 				selection,
 				defaultSelection,
 				onChangeSelection,
@@ -120,7 +119,9 @@ export default function withSelection(WrappedComponent) {
 				setSelection(newSelection);
 			},
 			deselectAll = () => {
-				setSelection([]);
+				if (!_.isEmpty(getSelection())) {
+					setSelection([]);
+				}
 			},
 			refreshSelection = () => {
 				// When Repository reloads, the entities get destroyed.

package/src/Functions/Cypress/dom_functions.js

@@ -39,11 +39,21 @@ export function verifyElementDoesNotExist(selectors) {
 	cy.get('body').then(($body) => {
 		const selectorString = getTestIdSelectors(selectors);
 		if ($body.find(selectorString).length > 0) {
-			throw new Error(`Element with selectors ${selectorString} exists in the DOM`);
+			throw new Error(`Element with selectors ${selectorString} exists in the DOM, when it should not`);
 		}
 	});
 }
 
+/**
+ * Verifies that an element with the given selectors exists in the DOM.
+ * @argument {string | string[]} selectors - data-testid attribute values
+ * If an array is given, these will be considered nested selectors.
+ * e.g. ['parent', 'child'] will be converted to '[data-testid="parent"] [data-testid="child"]'
+ */
+export function verifyElementExists(selectors) {
+	cy.get(getTestIdSelectors(selectors)).should('exist');
+}
+
 /**
  * Builds selector string for data-testid attributes.
  * It leaves classname, id, and attribute selectors unchanged.
@@ -103,13 +113,21 @@ export function drag(draggableSelectors, droppableSelectors, options = {}) {
 			});
 }
 
+
+// conditions functions that make use of cypress-if
 export function ifExists(parentSelectors, name, cb) {
 	if (_.isString(parentSelectors)) {
 		parentSelectors = [parentSelectors];
 	}
-	return getDomNode([...parentSelectors, name]).if().then((node) => { // NOTE if() is a cypress-if function
+	return getDomNode([...parentSelectors, name]).if().then((node) => {
 		if (node) {
 			cb(node);
 		}
 	});
 }
+export function ifNotExists(parentSelectors, name, cb) {
+	if (_.isString(parentSelectors)) {
+		parentSelectors = [parentSelectors];
+	}
+	return getDomNode([...parentSelectors, name]).if('not.exist').then(cb);
+}

package/src/Functions/Cypress/form_functions.js

@@ -274,100 +274,100 @@ export function setInputValue(selectors, value) {
 	setTextValue(selectors, value);
 }
 
+/**
+ * Given a form,
+ * return a url-encoded string representing all keys and values
+ *
+ * @param {jQuery} form
+ * @return {String}
+ * /
+export function formSerialize(form) {
+	'use strict';
+	var i, j, len, jLen, formElement, 
+		q = [],
+		theForm = form[0],
+		varCounters = {};
+
+	function addNameValue(name, value) { // create this function so I can use varCounters for 
+		var matches = name.match(/([\w\d]+)\[\]/i),
+			varName,
+			ix = 0;
+		if (matches && matches[1]) {
+			varName = matches[1];
+			if (typeof varCounters[varName] === 'undefined') {
+				varCounters[varName] = ix;
+			} else {
+				ix = ++varCounters[varName];
+			}
+			name = varName + '[' + ix + ']';
+		}
+		q.push(urlencode(name) + '=' + urlencode(value));
+	}
 
-// /**
-//  * Given a form,
-//  * return a url-encoded string representing all keys and values
-//  *
-//  * @param {jQuery} form
-//  * @return {String}
-//  */
-// export function formSerialize(form) {
-// 	'use strict';
-// 	var i, j, len, jLen, formElement, 
-// 		q = [],
-// 		theForm = form[0],
-// 		varCounters = {};
-
-// 	function addNameValue(name, value) { // create this function so I can use varCounters for 
-// 		var matches = name.match(/([\w\d]+)\[\]/i),
-// 			varName,
-// 			ix = 0;
-// 		if (matches && matches[1]) {
-// 			varName = matches[1];
-// 			if (typeof varCounters[varName] === 'undefined') {
-// 				varCounters[varName] = ix;
-// 			} else {
-// 				ix = ++varCounters[varName];
-// 			}
-// 			name = varName + '[' + ix + ']';
-// 		}
-// 		q.push(urlencode(name) + '=' + urlencode(value));
-// 	}
-
-// 	if (!theForm || !theForm.nodeName || theForm.nodeName.toLowerCase() !== 'form') {
-// 		throw 'You must supply a form element';
-// 	}
-// 	for (i = 0, len = theForm.elements.length; i < len; i++) {
-// 		formElement = theForm.elements[i];
-// 		if (formElement.name === '' || formElement.disabled) {
-// 			continue;
-// 		}
-// 		switch (formElement.nodeName.toLowerCase()) {
-// 			case 'input':
-// 				switch (formElement.type) {
-// 					case 'text':
-// 					case 'hidden':
-// 					case 'password':
-// 					case 'button': // Not submitted when submitting form manually, though jQuery does serialize this and it can be an HTML4 successful control
-// 					case 'submit':
-// 						addNameValue(formElement.name, formElement.value);
-// 						break;
-// 					case 'checkbox':
-// 					case 'radio':
-// 						if (formElement.checked) {
-// 							addNameValue(formElement.name, formElement.value);
-// 						} else if (formElement.value === '1') {
-// 							addNameValue(formElement.name, '0'); // Submit actual value of zero for booleans, instead of no value at all
-// 						}
-// 						break;
-// 					case 'file':
-// 						// addNameValue(formElement.name, formElement.value); // Will work and part of HTML4 "successful controls", but not used in jQuery
-// 						break;
-// 					case 'reset':
-// 						break;
-// 				}
-// 				break;
-// 			case 'textarea':
-// 				addNameValue(formElement.name, formElement.value);
-// 				break;
-// 			case 'select':
-// 				switch (formElement.type) {
-// 					case 'select-one':
-// 						addNameValue(formElement.name, formElement.value);
-// 						break;
-// 					case 'select-multiple':
-// 						for (j = 0, jLen = formElement.options.length; j < jLen; j++) {
-// 							if (formElement.options[j].selected) {
-// 								addNameValue(formElement.name, formElement.options[j].value);
-// 							}
-// 						}
-// 						break;
-// 				}
-// 				break;
-// 			case 'button': // jQuery does not submit these, though it is an HTML4 successful control
-// 				switch (formElement.type) {
-// 					case 'reset':
-// 					case 'submit':
-// 					case 'button':
-// 						addNameValue(formElement.name, formElement.value);
-// 						break;
-// 				}
-// 				break;
-// 		}
-// 	}
-// 	return q.join('&');
-// }
+	if (!theForm || !theForm.nodeName || theForm.nodeName.toLowerCase() !== 'form') {
+		throw 'You must supply a form element';
+	}
+	for (i = 0, len = theForm.elements.length; i < len; i++) {
+		formElement = theForm.elements[i];
+		if (formElement.name === '' || formElement.disabled) {
+			continue;
+		}
+		switch (formElement.nodeName.toLowerCase()) {
+			case 'input':
+				switch (formElement.type) {
+					case 'text':
+					case 'hidden':
+					case 'password':
+					case 'button': // Not submitted when submitting form manually, though jQuery does serialize this and it can be an HTML4 successful control
+					case 'submit':
+						addNameValue(formElement.name, formElement.value);
+						break;
+					case 'checkbox':
+					case 'radio':
+						if (formElement.checked) {
+							addNameValue(formElement.name, formElement.value);
+						} else if (formElement.value === '1') {
+							addNameValue(formElement.name, '0'); // Submit actual value of zero for booleans, instead of no value at all
+						}
+						break;
+					case 'file':
+						// addNameValue(formElement.name, formElement.value); // Will work and part of HTML4 "successful controls", but not used in jQuery
+						break;
+					case 'reset':
+						break;
+				}
+				break;
+			case 'textarea':
+				addNameValue(formElement.name, formElement.value);
+				break;
+			case 'select':
+				switch (formElement.type) {
+					case 'select-one':
+						addNameValue(formElement.name, formElement.value);
+						break;
+					case 'select-multiple':
+						for (j = 0, jLen = formElement.options.length; j < jLen; j++) {
+							if (formElement.options[j].selected) {
+								addNameValue(formElement.name, formElement.options[j].value);
+							}
+						}
+						break;
+				}
+				break;
+			case 'button': // jQuery does not submit these, though it is an HTML4 successful control
+				switch (formElement.type) {
+					case 'reset':
+					case 'submit':
+					case 'button':
+						addNameValue(formElement.name, formElement.value);
+						break;
+				}
+				break;
+		}
+	}
+	return q.join('&');
+}
+*/
 
 
 
@@ -377,94 +377,100 @@ export function setInputValue(selectors, value) {
 // / /_/ /  __/ /_/ /_/  __/ /  (__  )
 // \____/\___/\__/\__/\___/_/  /____/
 
-// /**
-//  * Get data from a form
-//  * @param {object} schema - fieldName/fieldType pairs
-//  * @returns {object} formValues - object of fieldName/value pairs
-//  */
-// export function getFormValues(editor, schema) {
-// 	const fields = editor.find('.x-form-field'),
-// 		formValues = {};
-
-// 	_.each(fields, (field) => {
-// 		const fieldType = schema[field.name];
-// 		switch(fieldType) {
-// 			case 'checkbox':
-// 				formValues[fieldName] = getCheckboxValue(fieldName);
-// 				break;
-// 			case 'combo':
-// 				formValues[fieldName] = getComboValue(fieldName);
-// 				break;
-// 			case 'date':
-// 				formValues[fieldName] = getDateValue(fieldName);
-// 				break;
-// 			case 'datetime':
-// 				formValues[fieldName] = getDatetimeValue(fieldName);
-// 				break;
-// 			case 'file':
-// 				formValues[fieldName] = getFileValue(fieldName);
-// 				break;
-// 			case 'number':
-// 				formValues[fieldName] = getNumberValue(fieldName);
-// 				break;
-// 			case 'radio':
-// 				formValues[fieldName] = getRadioValue(fieldName);
-// 				break;
-// 			case 'tag':
-// 				formValues[fieldName] = getTagValue(fieldName);
-// 				break;
-// 			case 'text':
-// 			case 'textarea':
-// 				formValues[fieldName] = getTextValue(fieldName);
-// 				break;
-// 			case 'time':
-// 				formValues[fieldName] = getTimeValue(fieldName);
-// 				break;
-// 		}
-// 	});
-// 	return formValues;
-// }
+/**
+ * Get data from a form
+ * @param {object} schema - fieldName/fieldType pairs
+ * @returns {object} formValues - object of fieldName/value pairs
+ * /
+export function getFormValues(editor, schema) {
+	const fields = editor.find('.x-form-field'),
+		formValues = {};
+
+	_.each(fields, (field) => {
+		const fieldType = schema[field.name];
+		switch(fieldType) {
+			case 'checkbox':
+				formValues[fieldName] = getCheckboxValue(fieldName);
+				break;
+			case 'combo':
+				formValues[fieldName] = getComboValue(fieldName);
+				break;
+			case 'date':
+				formValues[fieldName] = getDateValue(fieldName);
+				break;
+			case 'datetime':
+				formValues[fieldName] = getDatetimeValue(fieldName);
+				break;
+			case 'file':
+				formValues[fieldName] = getFileValue(fieldName);
+				break;
+			case 'number':
+				formValues[fieldName] = getNumberValue(fieldName);
+				break;
+			case 'radio':
+				formValues[fieldName] = getRadioValue(fieldName);
+				break;
+			case 'tag':
+				formValues[fieldName] = getTagValue(fieldName);
+				break;
+			case 'text':
+			case 'textarea':
+				formValues[fieldName] = getTextValue(fieldName);
+				break;
+			case 'time':
+				formValues[fieldName] = getTimeValue(fieldName);
+				break;
+		}
+	});
+	return formValues;
+}
+*/
 
 
-// /**
-//  * Validate that form values match what they're supposed to
-//  */
-// export function validateFormValues(data, schema) {
-// 	cy.wrap().then(() => { // Wrap this in a Cypress promise, so it executes in correct order, relative to other Cypress promises
-
-// 		const formValues = getFormValues(schema);
-// 		let diff = deepDiffObj(formValues, data);
-
-// 		// SPECIAL CASE: Omit password fields from diff
-// 		const omitFields = [];
-// 		_.each(diff, (value, key) => {
-// 			if (key.match(/^password/i)) {
-// 				omitFields.push(key);
-// 			}
-// 		});
-// 		if (omitFields.length) {
-// 			diff = _.omit(diff, omitFields);
-// 		}
+/**
+ * Validate that form values match what they're supposed to
+ * /
+export function validateFormValues(data, schema) {
+	cy.wrap().then(() => { // Wrap this in a Cypress promise, so it executes in correct order, relative to other Cypress promises
+
+		const formValues = getFormValues(schema);
+		let diff = deepDiffObj(formValues, data);
+
+		// SPECIAL CASE: Omit password fields from diff
+		const omitFields = [];
+		_.each(diff, (value, key) => {
+			if (key.match(/^password/i)) {
+				omitFields.push(key);
+			}
+		});
+		if (omitFields.length) {
+			diff = _.omit(diff, omitFields);
+		}
 		
-// 		// If there are still any differences, log them
-// 		if (_.keys(diff).length > 0) {
-// 			console.log('data', data);
-// 			console.log('formValues', formValues);
-// 			console.log('diff', diff);
-// 		}
-
-// 		expect(diff).to.deep.equal({});
-// 	});
-// }
+		// If there are still any differences, log them
+		if (_.keys(diff).length > 0) {
+			console.log('data', data);
+			console.log('formValues', formValues);
+			console.log('diff', diff);
+		}
+
+		expect(diff).to.deep.equal({});
+	});
+}
+*/
 
 
 
 // export function getCheckboxValue(fieldName) {
 
 // }
-// export function getComboValue(fieldName) {
-	
-// }
+export function getComboValue(selectors, fieldName) {
+	cy.log('getComboValue ' + fieldName);
+	return getDomNode([...selectors, 'field-' + fieldName, 'input']).then((field) => {
+		return cy.wrap(field)
+				.invoke('val');
+	});
+}
 // export function getDateValue(fieldName) {
 	
 // }

package/src/Functions/Cypress/grid_functions.js

@@ -11,6 +11,15 @@ import _ from 'lodash';
 const $ = Cypress.$;
 
 
+// Get cells
+export function getGridCellValue(gridSelector, rowId, field) {
+	cy.log('getGridCellValue ' + gridSelector + ' ' + rowId + ' ' + field);
+	const rowSelector = getGridRowSelectorById(gridSelector, rowId);
+	return getDomNode([gridSelector, rowSelector, 'cell-' + field])
+				.invoke('text');
+}
+
+
 
 // Get rows
 export function hasRowWithFieldValue(gridSelector, field, value) {
@@ -56,12 +65,16 @@ export function selectGridRowIfNotAlreadySelectedById(gridSelector, id) {
 		}
 	})
 }
+export function selectGridRowByIx(gridSelector, ix) {
+	cy.log('selectGridRowByIx ' + gridSelector + ' ' + ix);
+	
+	ix++; // compensate for header row
+	getDomNode([gridSelector, '[data-ix=' + ix + ']'])
+		.click();
+}
 // export function selectRowWithText(grid, text) {
 // 	getRowWithText(grid, text).click(5, 5);
 // }
-// export function selectRowWithIx(grid, ix) {
-// 	getRowWithIx(grid, ix).click(5, 5);
-// }
 // export function cmdClickRowWithId(grid, id) {
 // 	getRowWithId(grid, id).click('left', { metaKey: true });
 // }
@@ -234,12 +247,8 @@ export function getModelFromGridSelector(gridSelector) {
 }
 export function getGridRowSelectorById(gridSelector, id) {
 	const
-		model = getModelFromGridSelector(gridSelector);
-
-		if (!model) {
-			debugger;
-		}
-		const inflected = fixInflector(Inflector.camelize(Inflector.pluralize(model)));
+		model = getModelFromGridSelector(gridSelector),
+		inflected = fixInflector(Inflector.camelize(Inflector.pluralize(model)));
 	return inflected + '-' + id;
 }