@onehat/ui 0.3.148 → 0.3.150

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@onehat/ui",
-	"version": "0.3.148",
+	"version": "0.3.150",
 	"description": "Base UI for OneHat apps",
 	"main": "src/index.js",
 	"type": "module",
@@ -29,7 +29,7 @@
 		"@gluestack-ui/themed": "^0.1.53",
 		"@hookform/resolvers": "^3.3.1",
 		"@k-renwick/colour-mixer": "^1.2.1",
-		"@onehat/data": "^1.19.0",
+		"@onehat/data": "^1.20.0",
 		"@reduxjs/toolkit": "^1.9.5",
 		"inflector-js": "^1.0.1",
 		"js-cookie": "^3.0.5",

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

@@ -46,12 +46,15 @@ export function ComboComponent(props) {
 			_input = {},
 			isEditor = false,
 			isDisabled = false,
+			isInTag = false,
 			tooltipPlacement = 'bottom',
 			placeholder,
 			onRowPress,
 			icon,
 			Editor, // only used for the eyeButton
-			onSave, // to hook into when menu saves (ComboEditor only)
+			onGridAdd, // to hook into when menu adds (ComboEditor only)
+			onGridSave, // to hook into when menu saves (ComboEditor only)
+			onGridDelete, // to hook into when menu deletes (ComboEditor only)
 
 			// withComponent
 			self,
@@ -735,19 +738,21 @@ export function ComboComponent(props) {
 						}
 
 					}}
+					onAdd={onGridAdd}
 					onSave={(selection) => {
 						const entity = selection[0];
-						if (entity?.id !== value) {
+						if (entity?.id !== value && !isInTag) { // Tag doesn't use value, so don't do this comparison in the Tag
 							// Either a phantom record was just solidified into a real record, or a new (non-phantom) record was added.
 							// Select it and set the value of the combo.
 							setGridSelection([entity]);
 							const id = entity.id;
 							setValue(id);
 						}
-						if (onSave) {
-							onSave(selection);
+						if (onGridSave) {
+							onGridSave(selection);
 						}
 					}}
+					onDelete={onGridDelete}
 					onRowPress={(item, e) => {
 						if (onRowPress) {
 							onRowPress(item, e);

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

@@ -40,6 +40,7 @@ function TagComponent(props) {
 			setValue,
 			...propsToPass // break connection between Tag and Combo props
 		} = props,
+		valueRef = useRef(value),
 		ignoreNextComboValueChangeRef = useRef(false),
 		[isViewerShown, setIsViewerShown] = useState(false),
 		[viewerSelection, setViewerSelection] = useState([]),
@@ -138,6 +139,67 @@ function TagComponent(props) {
 			});			
 			setValue(newValue);
 		},
+		onGridAdd = (selection) => {
+			// underlying GridEditor added a record.
+			// add it to this Tag's value
+			const
+				entity = selection[0],
+				id = entity.id,
+				newValue = _.clone(valueRef.current);
+			newValue.push({
+				id,
+				text: entity.displayValue,
+			});
+			setValue(newValue);
+		},
+		onGridSave = (selection) => {
+			// underlying GridEditor has changed a record.
+			// Check if that value exists, and if so, update its displayValue
+			if (_.isEmpty(valueRef.current)) {
+				return;
+			}
+
+			const
+				entity = selection[0],
+				id = entity.id,
+				ix = _.findIndex(valueRef.current, (item) => {
+					return item.id === id;
+				}),
+				isFound = ix !== -1;
+			if (!isFound) {
+				return;
+			}
+			
+			const newValue = _.clone(valueRef.current);
+			newValue[ix] = {
+				id,
+				text: entity.displayValue,
+			};
+			setValue(newValue);
+		},
+		onGridDelete = (selection) => {
+			// underlying GridEditor has deleted a value.
+			// Check if that value exists, and if so delete it
+			if (_.isEmpty(valueRef.current)) {
+				return;
+			}
+
+			const
+				entity = selection[0],
+				id = entity.id,
+				ix = _.findIndex(valueRef.current, (item) => {
+					return item.id === id;
+				}),
+				isFound = ix !== -1;
+			if (!isFound) {
+				return;
+			}
+
+			const newValue = _.filter(valueRef.current, (item) => {
+				return item.id !== id;
+			});
+			setValue(newValue);
+		},
 		valueBoxes = _.map(value, (val, ix) => {
 			return <ValueBox
 						key={ix}
@@ -146,6 +208,8 @@ function TagComponent(props) {
 						onDelete={!isViewOnly ? () => onDelete(val) : null}
 					/>;
 		});
+	
+	valueRef.current = value; // the onGrid* methods were dealing with stale data, so use a ref, and update it here
 
 	let WhichCombo = Combo;
 	if (_combo.isEditor) {
@@ -193,6 +257,10 @@ function TagComponent(props) {
 										onChangeValue={onChangeComboValue}
 										parent={self}
 										reference="combo"
+										isInTag={true}
+										onGridAdd={onGridAdd}
+										onGridSave={onGridSave}
+										onGridDelete={onGridDelete}
 										{..._combo}
 									/>}
 				</Column>

package/src/Components/Grid/Grid.js

@@ -287,6 +287,7 @@ function GridComponent(props) {
 					reference="reorderBtn"
 					onPress={() => setIsDragMode(!isDragMode)}
 					icon={<Icon as={isDragMode ? NoReorderRows : ReorderRows} color={styles.GRID_TOOLBAR_ITEMS_COLOR} />}
+					tooltip="Reorder Rows"
 				/>);
 			}
 			return items;
@@ -618,7 +619,7 @@ function GridComponent(props) {
 			}
 
 			setDragRowSlot({ ix: newIx, marker, useBottom, });
-			// console.log('onRowReorderDrag', newIx);
+			// console.log('onRowReorderDrag slot', newIx);
 
 		},
 		onRowReorderDragStop = (delta, e, config) => {
@@ -887,7 +888,7 @@ function GridComponent(props) {
 
 	isAddingRef.current = isAdding;
 
-	const footerToolbarItemComponents = useMemo(() => getFooterToolbarItems(), [additionalToolbarButtons, isDragMode]);
+	const footerToolbarItemComponents = useMemo(() => getFooterToolbarItems(), [Repository?.hash, additionalToolbarButtons, isDragMode]);
 
 	if (!isInited) {
 		// first time through, render a placeholder so we can get container dimensions

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

@@ -7,7 +7,6 @@ import {
 	EDITOR_MODE__ADD,
 	EDITOR_MODE__EDIT,
 } from '../../../Constants/Editor.js';
-import UiGlobals from '../../../UiGlobals.js';
 import _ from 'lodash';
 
 // NOTE: This is a modified version of @onehat/ui/src/Hoc/withEditor
@@ -38,8 +37,10 @@ export default function withSecondaryEditor(WrappedComponent, isTree = false) {
 					return 'record' + (secondarySelection[0].displayValue ? ' "' + secondarySelection[0].displayValue + '"' : '') + '?';
 				},
 				secondaryRecord,
-				secondaryOnChange,
-				secondaryOnSave,
+				secondaryOnAdd,
+				secondaryOnChange, // any kind of crud change
+				secondaryOnDelete,
+				secondaryOnSave, // this could also be called 'onEdit'
 				secondaryNewEntityDisplayValue,
 				secondaryDefaultValues,
 
@@ -93,12 +94,12 @@ export default function withSecondaryEditor(WrappedComponent, isTree = false) {
 			getNewEntityDisplayValue = () => {
 				return secondaryNewEntityDisplayValueRef.current;
 			},
-			secondaryOnAdd = async (e, values) => {
+			secondaryDoAdd = async (e, values) => {
 				let addValues = values;
 
 				if (!values) {
 					// you can either:
-					// 1. directlty submit 'values' to use in onAdd(), or
+					// 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 = Repository.getSchema().getDefaultValues();
@@ -151,18 +152,20 @@ export default function withSecondaryEditor(WrappedComponent, isTree = false) {
 				setIsSaving(false);
 				setSecondaryIsIgnoreNextSelectionChange(true);
 				secondarySetSelection([entity]);
+				if (SecondaryRepository.isAutoSave) {
+					// for isAutoSave Repositories, submit the handers right away
+					if (getListeners().onAfterAdd) {
+						await getListeners().onAfterAdd(entity);
+					}
+					if (onAdd) {
+						await secondaryOnAdd(entity);
+					}
+				}
 				setIsEditorViewOnly(false);
-				secondarySetEditorMode(EDITOR_MODE__ADD);
+				setEditorMode(SecondaryRepository.isAutoSave ? EDITOR_MODE__EDIT : EDITOR_MODE__ADD);
 				secondarySetIsEditorShown(true);
-
-				if (getListeners().onAfterAdd) {
-					await getListeners().onAfterAdd(entity);
-				}
-				if (secondaryOnChange) {
-					secondaryOnChange();
-				}
 			},
-			secondaryOnEdit = async () => {
+			secondaryDoEdit = async () => {
 				if (_.isEmpty(secondarySelection) || (_.isArray(secondarySelection) && (secondarySelection.length > 1 || secondarySelection[0]?.isDestroyed))) {
 					return;
 				}
@@ -176,7 +179,7 @@ export default function withSecondaryEditor(WrappedComponent, isTree = false) {
 				secondarySetEditorMode(EDITOR_MODE__EDIT);
 				secondarySetIsEditorShown(true);
 			},
-			secondaryOnDelete = async (args) => {
+			secondaryDoDelete = async (args) => {
 				let cb = null;
 				if (_.isFunction(args)) {
 					cb = args;
@@ -203,10 +206,10 @@ export default function withSecondaryEditor(WrappedComponent, isTree = false) {
 						message: 'The node you have selected for deletion has children. ' + 
 								'Should these children be moved up to this node\'s parent, or be deleted?',
 						buttons: [
-							<Button colorScheme="danger" onPress={() => secondaryOnMoveChildren(cb)} key="moveBtn">
+							<Button colorScheme="danger" onPress={() => secondaryDoMoveChildren(cb)} key="moveBtn">
 								Move Children
 							</Button>,
-							<Button colorScheme="danger" onPress={() => secondaryOnDeleteChildren(cb)} key="deleteBtn">
+							<Button colorScheme="danger" onPress={() => secondaryDoDeleteChildren(cb)} key="deleteBtn">
 								Delete Children
 							</Button>
 						],
@@ -220,17 +223,20 @@ export default function withSecondaryEditor(WrappedComponent, isTree = false) {
 					confirm('Are you sure you want to delete the ' + identifier, () => deleteRecord(null, cb));
 				}
 			},
-			secondaryOnMoveChildren = (cb) => {
+			secondaryDoMoveChildren = (cb) => {
 				hideAlert();
 				deleteRecord(true, cb);
 			},
-			secondaryOnDeleteChildren = (cb) => {
+			secondaryDoDeleteChildren = (cb) => {
 				hideAlert();
 				deleteRecord(false, cb);
 			},
 			deleteRecord = async (moveSubtreeUp, cb) => {
-				if (getListeners().onBeforeDeleteSave) {
-					await getListeners().onBeforeDeleteSave(secondarySelection);
+				if (getListeners().onBeforeDelete) {
+					const listenerResult = await getListeners().onBeforeDelete(secondarySelection);
+					if (listenerResult === false) {
+						return;
+					}
 				}
 
 				await SecondaryRepository.delete(secondarySelection, moveSubtreeUp);
@@ -242,13 +248,16 @@ export default function withSecondaryEditor(WrappedComponent, isTree = false) {
 				}
 				secondarySetSelection([]);
 				if (cb) {
-					cb();
+					cb(secondarySelection);
 				}
 				if (secondaryOnChange) {
-					secondaryOnChange();
+					secondaryOnChange(secondarySelection);
+				}
+				if (secondaryOnDelete) {
+					secondaryOnDelete(secondarySelection);
 				}
 			},
-			secondaryOnView = async () => {
+			secondaryDoView = async () => {
 				if (!secondaryUserCanView) {
 					return;
 				}
@@ -263,7 +272,7 @@ export default function withSecondaryEditor(WrappedComponent, isTree = false) {
 					await getListeners().onAfterView();
 				}
 			},
-			secondaryOnDuplicate = async () => {
+			secondaryDoDuplicate = async () => {
 				if (!secondaryUserCanEdit || secondaryDisableDuplicate) {
 					return;
 				}
@@ -290,9 +299,10 @@ export default function withSecondaryEditor(WrappedComponent, isTree = false) {
 
 				setSecondaryIsIgnoreNextSelectionChange(true);
 				secondarySetSelection([duplicateEntity]);
-				secondaryOnEdit();
+				secondaryDoEdit();
 			},
-			secondaryOnEditorSave = async (data, e) => {
+			secondaryDoEditorSave = async (data, e) => {
+				// NOTE: The Form submits onSave for both adds (when not isAutoSsave) and edits.
 				const
 					what = secondaryRecord || secondarySelection,
 					isSingle = what.length === 1;
@@ -314,8 +324,11 @@ export default function withSecondaryEditor(WrappedComponent, isTree = false) {
 					});
 				}
 
-				if (getListeners().onBeforeEditSave) {
-					await getListeners().onBeforeEditSave(what);
+				if (getListeners().onBeforeSave) {
+					const listenerResult = await getListeners().onBeforeSave(what);
+					if (listenerResult === false) {
+						return;
+					}
 				}
 
 				setIsSaving(true);
@@ -330,25 +343,32 @@ export default function withSecondaryEditor(WrappedComponent, isTree = false) {
 				setIsSaving(false);
 
 				if (success) {
-					setIsAdding(false);
-					
-					secondarySetEditorMode(EDITOR_MODE__EDIT);
-					// secondarySetIsEditorShown(false);
-					
-					if (getListeners().onAfterEdit) {
-						await getListeners().onAfterEdit(what);
-					}
 					if (secondaryOnChange) {
-						secondaryOnChange();
+						secondaryOnChange(what);
 					}
-					if (secondaryOnSave) {
-						secondaryOnSave(what);
+					if (editorMode === EDITOR_MODE__ADD) {
+						if (onAdd) {
+							await onAdd(what);
+						}
+						if (getListeners().onAfterAdd) {
+							await getListeners().onAfterAdd(what);
+						}
+						setIsAdding(false);
+						setEditorMode(EDITOR_MODE__EDIT);
+					} else if (editorMode === EDITOR_MODE__EDIT) {
+						if (getListeners().onAfterEdit) {
+							await getListeners().onAfterEdit(what);
+						}
+						if (secondaryOnSave) {
+							secondaryOnSave(what);
+						}
 					}
+					// secondarySetIsEditorShown(false);
 				}
 
 				return success;
 			},
-			secondaryOnEditorCancel =  () => {
+			secondaryDoEditorCancel =  () => {
 				async function doIt() {
 					const
 						isSingle = secondarySelection.length === 1,
@@ -367,14 +387,14 @@ export default function withSecondaryEditor(WrappedComponent, isTree = false) {
 					doIt();
 				}
 			},
-			secondaryOnEditorClose = () => {
+			secondaryDoEditorClose = () => {
 				if (secondaryIsAdding) {
-					secondaryOnEditorCancel();
+					secondaryDoEditorCancel();
 				}
 				secondarySetIsEditorShown(false);
 			},
-			secondaryOnEditorDelete = async () => {
-				secondaryOnDelete(() => {
+			secondaryDoEditorDelete = async () => {
+				secondaryDoDelete(() => {
 					secondarySetEditorMode(EDITOR_MODE__VIEW);
 					secondarySetIsEditorShown(false);
 				});
@@ -396,10 +416,10 @@ export default function withSecondaryEditor(WrappedComponent, isTree = false) {
 				}
 				return mode;
 			},
-			secondaryOnEditMode = () => {
+			secondarySetEditMode = () => {
 				secondarySetEditorMode(EDITOR_MODE__EDIT);
 			},
-			secondaryOnViewMode = () => {
+			secondarySetViewMode = () => {
 				function doIt() {
 					secondarySetEditorMode(EDITOR_MODE__VIEW);
 				}
@@ -428,12 +448,12 @@ export default function withSecondaryEditor(WrappedComponent, isTree = false) {
 		}, [secondarySelection]);
 	
 		if (self) {
-			self.secondaryAdd = secondaryOnAdd;
-			self.secondaryEdit = secondaryOnEdit;
-			self.secondaryDelete = secondaryOnDelete;
-			self.secondarnMoveChildren = secondaryOnMoveChildren;
-			self.secondaryDeleteChildren = secondaryOnDeleteChildren;
-			self.secondaryDuplicate = secondaryOnDuplicate;
+			self.secondaryAdd = secondaryDoAdd;
+			self.secondaryEdit = secondaryDoEdit;
+			self.secondaryDelete = secondaryDoDelete;
+			self.secondarnMoveChildren = secondaryDoMoveChildren;
+			self.secondaryDeleteChildren = secondaryDoDeleteChildren;
+			self.secondaryDuplicate = secondaryDoDuplicate;
 		}
 		secondaryNewEntityDisplayValueRef.current = secondaryNewEntityDisplayValue;
 
@@ -458,19 +478,19 @@ export default function withSecondaryEditor(WrappedComponent, isTree = false) {
 					secondaryIsAdding={secondaryIsAdding}
 					secondaryIsSaving={secondaryIsSaving}
 					secondaryEditorMode={secondaryEditorMode}
-					secondaryOnEditMode={secondaryOnEditMode}
-					secondaryOnViewMode={secondaryOnViewMode}
+					secondaryOnEditMode={secondarySetEditMode}
+					secondaryOnViewMode={secondarySetViewMode}
 					secondaryEditorStateRef={secondaryEditorStateRef}
 					secondarySetIsEditorShown={secondarySetIsEditorShown}
-					secondaryOnAdd={(!secondaryUserCanEdit || secondaryDisableAdd) ? null : secondaryOnAdd}
-					secondaryOnEdit={(!secondaryUserCanEdit || secondaryDisableEdit) ? null : secondaryOnEdit}
-					secondaryOnDelete={(!secondaryUserCanEdit || secondaryDisableDelete) ? null : secondaryOnDelete}
-					secondaryOnView={secondaryOnView}
-					secondaryOnDuplicate={secondaryOnDuplicate}
-					secondaryOnEditorSave={secondaryOnEditorSave}
-					secondaryOnEditorCancel={secondaryOnEditorCancel}
-					secondaryOnEditorDelete={(!secondaryUserCanEdit || secondaryDisableDelete) ? null : secondaryOnEditorDelete}
-					secondaryOnEditorClose={secondaryOnEditorClose}
+					secondaryOnAdd={(!secondaryUserCanEdit || secondaryDisableAdd) ? null : secondaryDoAdd}
+					secondaryOnEdit={(!secondaryUserCanEdit || secondaryDisableEdit) ? null : secondaryDoEdit}
+					secondaryOnDelete={(!secondaryUserCanEdit || secondaryDisableDelete) ? null : secondaryDoDelete}
+					secondaryOnView={secondaryDoView}
+					secondaryOnDuplicate={secondaryDoDuplicate}
+					secondaryOnEditorSave={secondaryDoEditorSave}
+					secondaryOnEditorCancel={secondaryDoEditorCancel}
+					secondaryOnEditorDelete={(!secondaryUserCanEdit || secondaryDisableDelete) ? null : secondaryDoEditorDelete}
+					secondaryOnEditorClose={secondaryDoEditorClose}
 					secondarySetWithEditListeners={setListeners}
 					secondaryIsEditor={true}
 					secondaryUserCanEdit={secondaryUserCanEdit}

package/src/Components/Hoc/withEditor.js

@@ -7,7 +7,6 @@ import {
 	EDITOR_MODE__ADD,
 	EDITOR_MODE__EDIT,
 } from '../../Constants/Editor.js';
-import UiGlobals from '../../UiGlobals.js';
 import _ from 'lodash';
 
 export default function withEditor(WrappedComponent, isTree = false) {
@@ -35,8 +34,10 @@ export default function withEditor(WrappedComponent, isTree = false) {
 					return 'record' + (selection[0].displayValue ? ' "' + selection[0].displayValue + '"' : '') + '?';
 				},
 				record,
-				onChange,
-				onSave,
+				onAdd,
+				onChange, // any kind of crud change
+				onDelete,
+				onSave, // this could also be called 'onEdit'
 				newEntityDisplayValue,
 				defaultValues,
 
@@ -95,12 +96,12 @@ export default function withEditor(WrappedComponent, isTree = false) {
 			getNewEntityDisplayValue = () => {
 				return newEntityDisplayValueRef.current;
 			},
-			onAdd = async (e, values) => {
+			doAdd = async (e, values) => {
 				let addValues = values;
 
 				if (!values) {
 					// you can either:
-					// 1. directlty submit 'values' to use in onAdd(), or
+					// 1. directlty submit 'values' to use in doAdd(), 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 = Repository.getSchema().getDefaultValues();
@@ -153,18 +154,20 @@ export default function withEditor(WrappedComponent, isTree = false) {
 				setIsSaving(false);
 				setIsIgnoreNextSelectionChange(true);
 				setSelection([entity]);
+				if (Repository.isAutoSave) {
+					// for isAutoSave Repositories, submit the handers right away
+					if (getListeners().onAfterAdd) {
+						await getListeners().onAfterAdd(entity);
+					}
+					if (onAdd) {
+						await onAdd(entity);
+					}
+				}
 				setIsEditorViewOnly(false);
-				setEditorMode(EDITOR_MODE__ADD);
+				setEditorMode(Repository.isAutoSave ? EDITOR_MODE__EDIT : EDITOR_MODE__ADD);
 				setIsEditorShown(true);
-
-				if (getListeners().onAfterAdd) {
-					await getListeners().onAfterAdd(entity);
-				}
-				if (onChange) {
-					onChange();
-				}
 			},
-			onEdit = async () => {
+			doEdit = async () => {
 				if (_.isEmpty(selection) || (_.isArray(selection) && (selection.length > 1 || selection[0]?.isDestroyed))) {
 					return;
 				}
@@ -178,7 +181,7 @@ export default function withEditor(WrappedComponent, isTree = false) {
 				setEditorMode(EDITOR_MODE__EDIT);
 				setIsEditorShown(true);
 			},
-			onDelete = async (args) => {
+			doDelete = async (args) => {
 				let cb = null;
 				if (_.isFunction(args)) {
 					cb = args;
@@ -205,10 +208,10 @@ export default function withEditor(WrappedComponent, isTree = false) {
 						message: 'The node you have selected for deletion has children. ' + 
 								'Should these children be moved up to this node\'s parent, or be deleted?',
 						buttons: [
-							<Button colorScheme="danger" onPress={() => onMoveChildren(cb)} key="moveBtn">
+							<Button colorScheme="danger" onPress={() => doMoveChildren(cb)} key="moveBtn">
 								Move Children
 							</Button>,
-							<Button colorScheme="danger" onPress={() => onDeleteChildren(cb)} key="deleteBtn">
+							<Button colorScheme="danger" onPress={() => doDeleteChildren(cb)} key="deleteBtn">
 								Delete Children
 							</Button>
 						],
@@ -222,17 +225,20 @@ export default function withEditor(WrappedComponent, isTree = false) {
 					confirm('Are you sure you want to delete the ' + identifier, () => deleteRecord(null, cb));
 				}
 			},
-			onMoveChildren = (cb) => {
+			doMoveChildren = (cb) => {
 				hideAlert();
 				deleteRecord(true, cb);
 			},
-			onDeleteChildren = (cb) => {
+			doDeleteChildren = (cb) => {
 				hideAlert();
 				deleteRecord(false, cb);
 			},
 			deleteRecord = async (moveSubtreeUp, cb) => {
-				if (getListeners().onBeforeDeleteSave) {
-					await getListeners().onBeforeDeleteSave(selection);
+				if (getListeners().onBeforeDelete) {
+					const listenerResult = await getListeners().onBeforeDelete(selection);
+					if (listenerResult === false) {
+						return;
+					}
 				}
 
 				await Repository.delete(selection, moveSubtreeUp);
@@ -244,13 +250,16 @@ export default function withEditor(WrappedComponent, isTree = false) {
 				}
 				setSelection([]);
 				if (cb) {
-					cb();
+					cb(selection);
 				}
 				if (onChange) {
-					onChange();
+					onChange(selection);
+				}
+				if (onDelete) {
+					onDelete(selection);
 				}
 			},
-			onView = async () => {
+			doView = async () => {
 				if (!userCanView) {
 					return;
 				}
@@ -265,7 +274,7 @@ export default function withEditor(WrappedComponent, isTree = false) {
 					await getListeners().onAfterView();
 				}
 			},
-			onDuplicate = async () => {
+			doDuplicate = async () => {
 				if (!userCanEdit || disableDuplicate) {
 					return;
 				}
@@ -292,9 +301,10 @@ export default function withEditor(WrappedComponent, isTree = false) {
 
 				setIsIgnoreNextSelectionChange(true);
 				setSelection([duplicateEntity]);
-				onEdit();
+				doEdit();
 			},
-			onEditorSave = async (data, e) => {
+			doEditorSave = async (data, e) => {
+				// NOTE: The Form submits onSave for both adds (when not isAutoSsave) and edits.
 				const
 					what = record || selection,
 					isSingle = what.length === 1;
@@ -316,8 +326,11 @@ export default function withEditor(WrappedComponent, isTree = false) {
 					});
 				}
 
-				if (getListeners().onBeforeEditSave) {
-					await getListeners().onBeforeEditSave(what);
+				if (getListeners().onBeforeSave) {
+					const listenerResult = await getListeners().onBeforeSave(what);
+					if (listenerResult === false) {
+						return;
+					}
 				}
 
 				setIsSaving(true);
@@ -332,25 +345,32 @@ export default function withEditor(WrappedComponent, isTree = false) {
 				setIsSaving(false);
 
 				if (success) {
-					setIsAdding(false);
-					
-					setEditorMode(EDITOR_MODE__EDIT);
-					// setIsEditorShown(false);
-					
-					if (getListeners().onAfterEdit) {
-						await getListeners().onAfterEdit(what);
-					}
 					if (onChange) {
-						onChange();
+						onChange(what);
 					}
-					if (onSave) {
-						onSave(what);
+					if (editorMode === EDITOR_MODE__ADD) {
+						if (onAdd) {
+							await onAdd(what);
+						}
+						if (getListeners().onAfterAdd) {
+							await getListeners().onAfterAdd(what);
+						}
+						setIsAdding(false);
+						setEditorMode(EDITOR_MODE__EDIT);
+					} else if (editorMode === EDITOR_MODE__EDIT) {
+						if (getListeners().onAfterEdit) {
+							await getListeners().onAfterEdit(what);
+						}
+						if (onSave) {
+							onSave(what);
+						}
 					}
+					// setIsEditorShown(false);
 				}
 
 				return success;
 			},
-			onEditorCancel =  () => {
+			doEditorCancel =  () => {
 				async function doIt() {
 					const
 						isSingle = selection.length === 1,
@@ -369,14 +389,14 @@ export default function withEditor(WrappedComponent, isTree = false) {
 					doIt();
 				}
 			},
-			onEditorClose = () => {
+			doEditorClose = () => {
 				if (isAdding) {
-					onEditorCancel();
+					doEditorCancel();
 				}
 				setIsEditorShown(false);
 			},
-			onEditorDelete = async () => {
-				onDelete(() => {
+			doEditorDelete = async () => {
+				doDelete(() => {
 					setEditorMode(EDITOR_MODE__VIEW);
 					setIsEditorShown(false);
 				});
@@ -398,10 +418,10 @@ export default function withEditor(WrappedComponent, isTree = false) {
 				}
 				return mode;
 			},
-			onEditMode = () => {
+			setEditMode = () => {
 				setEditorMode(EDITOR_MODE__EDIT);
 			},
-			onViewMode = () => {
+			setViewMode = () => {
 				function doIt() {
 					setEditorMode(EDITOR_MODE__VIEW);
 				}
@@ -417,7 +437,7 @@ export default function withEditor(WrappedComponent, isTree = false) {
 			// When selection changes, set the mode appropriately
 			let mode;
 			if (isIgnoreNextSelectionChange) {
-				// on selection change from onAdd/onDuplicate/etc, calculate whether to put Editor in "add" or "edit" mode
+				// on selection change from doAdd/doDuplicate/etc, calculate whether to put Editor in "add" or "edit" mode
 				mode = calculateEditorMode();
 			} else {
 				// Most of the time, if selection changed, put the Editor in "view" mode
@@ -430,12 +450,12 @@ export default function withEditor(WrappedComponent, isTree = false) {
 		}, [selection]);
 
 		if (self) {
-			self.add = onAdd;
-			self.edit = onEdit;
-			self.delete = onDelete;
-			self.moveChildren = onMoveChildren;
-			self.deleteChildren = onDeleteChildren;
-			self.duplicate = onDuplicate;
+			self.add = doAdd;
+			self.edit = doEdit;
+			self.delete = doDelete;
+			self.moveChildren = doMoveChildren;
+			self.deleteChildren = doDeleteChildren;
+			self.duplicate = doDuplicate;
 		}
 		newEntityDisplayValueRef.current = newEntityDisplayValue;
 
@@ -460,19 +480,19 @@ export default function withEditor(WrappedComponent, isTree = false) {
 					isAdding={isAdding}
 					isSaving={isSaving}
 					editorMode={editorMode}
-					onEditMode={onEditMode}
-					onViewMode={onViewMode}
+					onEditMode={setEditMode}
+					onViewMode={setViewMode}
 					editorStateRef={editorStateRef}
 					setIsEditorShown={setIsEditorShown}
-					onAdd={(!userCanEdit || disableAdd) ? null : onAdd}
-					onEdit={(!userCanEdit || disableEdit) ? null : onEdit}
-					onDelete={(!userCanEdit || disableDelete) ? null : onDelete}
-					onView={onView}
-					onDuplicate={onDuplicate}
-					onEditorSave={onEditorSave}
-					onEditorCancel={onEditorCancel}
-					onEditorDelete={(!userCanEdit || disableDelete) ? null : onEditorDelete}
-					onEditorClose={onEditorClose}
+					onAdd={(!userCanEdit || disableAdd) ? null : doAdd}
+					onEdit={(!userCanEdit || disableEdit) ? null : doEdit}
+					onDelete={(!userCanEdit || disableDelete) ? null : doDelete}
+					onView={doView}
+					onDuplicate={doDuplicate}
+					onEditorSave={doEditorSave}
+					onEditorCancel={doEditorCancel}
+					onEditorDelete={(!userCanEdit || disableDelete) ? null : doEditorDelete}
+					onEditorClose={doEditorClose}
 					setWithEditListeners={setListeners}
 					isEditor={true}
 					userCanEdit={userCanEdit}

package/src/Components/Toolbar/Pagination.js

@@ -186,7 +186,7 @@ export default function Pagination(props) {
 					{items}
 				</Row>;
 	}, [
-		// Repository,
+		Repository?.hash,
 		showPagination,
 		page,
 		pageSize,

package/src/Components/Tree/Tree.js

@@ -1079,8 +1079,8 @@ function TreeComponent(props) {
 	});
 	
 	const
-		headerToolbarItemComponents = useMemo(() => getHeaderToolbarItems(), [treeSearchValue, isDragMode, getTreeNodeData()]),
-		footerToolbarItemComponents = useMemo(() => getFooterToolbarItems(), [additionalToolbarButtons, isDragMode, getTreeNodeData()]);
+		headerToolbarItemComponents = useMemo(() => getHeaderToolbarItems(), [Repository?.hash, treeSearchValue, isDragMode, getTreeNodeData()]),
+		footerToolbarItemComponents = useMemo(() => getFooterToolbarItems(), [Repository?.hash, additionalToolbarButtons, isDragMode, getTreeNodeData()]);
 
 	if (!isReady) {
 		return null;