@onehat/ui 0.4.96 → 0.4.98

package/package.json

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

package/src/Components/Container/Container.js

@@ -1,4 +1,4 @@
-import { cloneElement, useState, useEffect, useRef, } from 'react';
+import { cloneElement, useState, useEffect, useRef, useCallback, } from 'react';
 import {
 	BoxNative,
 	HStack,
@@ -16,6 +16,7 @@ import {
 } from '../../Constants/UiModes.js';
 import withComponent from '../Hoc/withComponent.js';
 import useForceUpdate from '../../Hooks/useForceUpdate.js';
+import getComponentFromType from '../../Functions/getComponentFromType.js';
 import getSaved from '../../Functions/getSaved.js';
 import setSaved from '../../Functions/setSaved.js';
 import Splitter from './Splitter.js';
@@ -106,6 +107,8 @@ function Container(props) {
 		} = props,
 		id = props.id || props.self?.path,
 		isWeb = CURRENT_MODE === UI_MODE_WEB,
+		useWindowSize = getComponentFromType('useWindowSize'),
+		windowSize = useWindowSize(),
 		forceUpdate = useForceUpdate(),
 		centerRef = useRef(null),
 		northRef = useRef(null),
@@ -118,77 +121,111 @@ function Container(props) {
 		westWidthRef = useRef(westInitialWidth),
 		[isReady, setIsReady] = useState(false),
 		[isComponentsDisabled, setIsComponentsDisabled] = useState(false),
-		[localNorthIsCollapsed, setLocalNorthIsCollapsed] = useState(northInitialIsCollapsed),
-		[localSouthIsCollapsed, setLocalSouthIsCollapsed] = useState(southInitialIsCollapsed),
-		[localEastIsCollapsed, setLocalEastIsCollapsed] = useState(eastInitialIsCollapsed),
-		[localWestIsCollapsed, setLocalWestIsCollapsed] = useState(westInitialIsCollapsed),
+		localNorthIsCollapsedRef = useRef(northInitialIsCollapsed),
+		localSouthIsCollapsedRef = useRef(southInitialIsCollapsed),
+		localEastIsCollapsedRef = useRef(eastInitialIsCollapsed),
+		localWestIsCollapsedRef = useRef(westInitialIsCollapsed),
+		onLayout = async (e) => {
+			console.log('Container onLayout', e.nativeEvent.layout.width);
+			if (id) {
+				// save prevScreenSize if changed
+				const
+					height = parseFloat(e.nativeEvent.layout.height),
+					width = parseFloat(e.nativeEvent.layout.width),
+					key = id + '-prevScreenSize',
+					prevScreenSize = await getSaved(key);
+				if (!prevScreenSize || prevScreenSize.width !== width || prevScreenSize.height !== height) {
+					await setSaved(key, {
+						height,
+						width,
+					});
+
+					// reset all sizes to null, so they recalculate
+					setNorthHeight(null);
+					setSouthHeight(null);
+					setEastWidth(null);
+					setWestWidth(null);
+					forceUpdate();
+				}
+			}
+		},
+		debouncedOnLayout = useCallback(
+			_.debounce((e) => {
+				onLayout(e);
+			}, 2000), // delay is signficant, as all we're trying to do is catch screen size changes
+			[]
+		),
 		setNorthIsCollapsed = (bool) => {
 			if (setExternalNorthIsCollapsed) {
 				setExternalNorthIsCollapsed(bool);
 			} else {
-				setLocalNorthIsCollapsed(bool);
+				localNorthIsCollapsedRef.current = bool;
 			}
 
 			if (id) {
 				setSaved(id + '-northIsCollapsed', bool);
 			}
+			forceUpdate();
 		},
 		getNorthIsCollapsed = () => {
 			if (setExternalNorthIsCollapsed) {
 				return northIsCollapsed;
 			}
-			return localNorthIsCollapsed;
+			return localNorthIsCollapsedRef.current;
 		},
 		setSouthIsCollapsed = (bool) => {
 			if (setExternalSouthIsCollapsed) {
 				setExternalSouthIsCollapsed(bool);
 			} else {
-				setLocalSouthIsCollapsed(bool);
+				localSouthIsCollapsedRef.current = bool;
 			}
 
 			if (id) {
 				setSaved(id + '-southIsCollapsed', bool);
 			}
+			forceUpdate();
 		},
 		getSouthIsCollapsed = () => {
 			if (setExternalSouthIsCollapsed) {
 				return southIsCollapsed;
 			}
-			return localSouthIsCollapsed;
+			return localSouthIsCollapsedRef.current;
 		},
 		setEastIsCollapsed = (bool) => {
 			if (setExternalEastIsCollapsed) {
 				setExternalEastIsCollapsed(bool);
 			} else {
-				setLocalEastIsCollapsed(bool);
+				localEastIsCollapsedRef.current = bool;
 			}
 
 			if (id) {
 				setSaved(id + '-eastIsCollapsed', bool);
 			}
+			forceUpdate();
 		},
 		getEastIsCollapsed = () => {
 			if (setExternalEastIsCollapsed) {
 				return eastIsCollapsed;
 			}
-			return localEastIsCollapsed;
+			return localEastIsCollapsedRef.current;
 		},
 		setWestIsCollapsed = (bool) => {
 			if (setExternalWestIsCollapsed) {
 				setExternalWestIsCollapsed(bool);
 			} else {
-				setLocalWestIsCollapsed(bool);
+				localWestIsCollapsedRef.current = bool;
 			}
 
 			if (id) {
 				setSaved(id + '-westIsCollapsed', bool);
 			}
+			forceUpdate();
 		},
 		getWestIsCollapsed = () => {
 			if (setExternalWestIsCollapsed) {
 				return westIsCollapsed;
 			}
-			return localWestIsCollapsed;
+			return localWestIsCollapsedRef.current;
 		},
 		setNorthHeight = (height) => {
 			if (!getNorthIsCollapsed()) {
@@ -289,53 +326,72 @@ function Container(props) {
 
 			if (id) {
 				let key, val;
-				key = id + '-northIsCollapsed';
-				val = await getSaved(key);
-				if (!_.isNil(val)) {
-					setNorthIsCollapsed(val);
-				}
 
-				key = id + '-southIsCollapsed';
+				// does screensize from previous render exist?
+				key = id + '-prevScreenSize';
 				val = await getSaved(key);
+				let prevScreenSize = null;
 				if (!_.isNil(val)) {
-					setSouthIsCollapsed(val);
+					prevScreenSize = val;
 				}
+				const currentScreenSize = {
+					width: windowSize?.width ?? null,
+					height: windowSize?.height ?? null,
+				};
+				if (!prevScreenSize || (prevScreenSize.width === currentScreenSize.width && prevScreenSize.height === currentScreenSize.height)) {
+				
+					// only load these saved settings if the screen size is the same as when they were saved
+					key = id + '-northIsCollapsed';
+					val = await getSaved(key);
+					if (!_.isNil(val)) {
+						setNorthIsCollapsed(val);
+					}
 
-				key = id + '-eastIsCollapsed';
-				val = await getSaved(key);
-				if (!_.isNil(val)) {
-					setEastIsCollapsed(val);
-				}
+					key = id + '-southIsCollapsed';
+					val = await getSaved(key);
+					if (!_.isNil(val)) {
+						setSouthIsCollapsed(val);
+					}
 
-				key = id + '-westIsCollapsed';
-				val = await getSaved(key);
-				if (!_.isNil(val)) {
-					setWestIsCollapsed(val);
-				}
+					key = id + '-eastIsCollapsed';
+					val = await getSaved(key);
+					if (!_.isNil(val)) {
+						setEastIsCollapsed(val);
+					}
 
-				key = id + '-northHeight';
-				val = await getSaved(key);
-				if (!_.isNil(val)) {
-					setNorthHeight(val);
-				}
+					key = id + '-westIsCollapsed';
+					val = await getSaved(key);
+					if (!_.isNil(val)) {
+						setWestIsCollapsed(val);
+					}
 
-				key = id + '-southHeight';
-				val = await getSaved(key);
-				if (!_.isNil(val)) {
-					setSouthHeight(val);
-				}
+					key = id + '-northHeight';
+					val = await getSaved(key);
+					if (!_.isNil(val)) {
+						setNorthHeight(val);
+					}
 
-				key = id + '-eastWidth';
-				val = await getSaved(key);
-				if (!_.isNil(val)) {
-					setEastWidth(val);
-				}
+					key = id + '-southHeight';
+					val = await getSaved(key);
+					if (!_.isNil(val)) {
+						setSouthHeight(val);
+					}
 
-				key = id + '-westWidth';
-				val = await getSaved(key);
-				if (!_.isNil(val)) {
-					setWestWidth(val);
+					key = id + '-eastWidth';
+					val = await getSaved(key);
+					if (!_.isNil(val)) {
+						setEastWidth(val);
+					}
+
+					key = id + '-westWidth';
+					val = await getSaved(key);
+					if (!_.isNil(val)) {
+						setWestWidth(val);
+					}
+				
 				}
+
+
 			}
 
 			if (!isReady) {
@@ -348,7 +404,7 @@ function Container(props) {
 		return null;
 	}
 	
-	let componentProps = {},
+	let componentProps = { _panel: { ...center?.props?._panel }, },
 		wrapperProps = null,
 		centerComponent = null,
 		northComponent = null,
@@ -360,15 +416,16 @@ function Container(props) {
 		westComponent = null,
 		westSplitter = null;
 
-	componentProps.isCollapsible = false;
-	componentProps.isDisabled = isDisabled || isComponentsDisabled;
+	componentProps._panel.isCollapsible = false;
+	componentProps._panel.isDisabled = isDisabled || isComponentsDisabled;
+	componentProps.onLayout = debouncedOnLayout;
 	centerComponent = cloneElement(center, componentProps);
 	if (north) {
-		componentProps = {};
+		componentProps = { _panel: { ...north.props?._panel }, };
 		wrapperProps = {};
 		
-		componentProps.isDisabled = isDisabled || isComponentsDisabled;
-		componentProps.className = 'h-full w-full ' + (north.props.className || '');
+		componentProps._panel.isDisabled = isDisabled || isComponentsDisabled;
+		componentProps._panel.className = 'h-full w-full ' + (north.props.className || '');
 		wrapperProps.onLayout = (e) => {
 			const height = parseFloat(e.nativeEvent.layout.height);
 			if (height && height !== northHeight) {
@@ -387,9 +444,9 @@ function Container(props) {
 				wrapperProps.style = { height: northHeight, };
 			}
 		}
-		componentProps.collapseDirection = VERTICAL;
-		componentProps.isCollapsed = getNorthIsCollapsed();
-		componentProps.setIsCollapsed = setNorthIsCollapsed;
+		componentProps._panel.collapseDirection = VERTICAL;
+		componentProps._panel.isCollapsed = getNorthIsCollapsed();
+		componentProps._panel.setIsCollapsed = setNorthIsCollapsed;
 		if (isWeb && northIsResizable) {
 			northSplitter = <Splitter
 								mode={VERTICAL}
@@ -402,11 +459,11 @@ function Container(props) {
 						</BoxNative>;
 	}
 	if (south) {
-		componentProps = {};
+		componentProps = { _panel: { ...south.props?._panel }, };
 		wrapperProps = {};
 		
-		componentProps.isDisabled = isDisabled || isComponentsDisabled;
-		componentProps.className = 'h-full w-full ' + (south.props.className || '');
+		componentProps._panel.isDisabled = isDisabled || isComponentsDisabled;
+		componentProps._panel.className = 'h-full w-full ' + (south.props.className || '');
 		wrapperProps.onLayout = (e) => {
 			const height = parseFloat(e.nativeEvent.layout.height);
 			if (height && height !== getSouthHeight()) {
@@ -425,9 +482,9 @@ function Container(props) {
 				wrapperProps.style = { height: southHeight, };
 			}
 		}
-		componentProps.collapseDirection = VERTICAL;
-		componentProps.isCollapsed = getSouthIsCollapsed();
-		componentProps.setIsCollapsed = setSouthIsCollapsed;
+		componentProps._panel.collapseDirection = VERTICAL;
+		componentProps._panel.isCollapsed = getSouthIsCollapsed();
+		componentProps._panel.setIsCollapsed = setSouthIsCollapsed;
 		if (isWeb && southIsResizable) {
 			southSplitter = <Splitter
 								mode={VERTICAL}
@@ -440,11 +497,11 @@ function Container(props) {
 						</BoxNative>;
 	}
 	if (east) {
-		componentProps = {};
+		componentProps = { _panel: { ...east.props?._panel }, };
 		wrapperProps = {};
 		
-		componentProps.isDisabled = isDisabled || isComponentsDisabled;
-		componentProps.className = 'h-full w-full ' + (east.props.className || '');
+		componentProps._panel.isDisabled = isDisabled || isComponentsDisabled;
+		componentProps._panel.className = 'h-full w-full ' + (east.props.className || '');
 		wrapperProps.onLayout = (e) => {
 			const width = parseFloat(e.nativeEvent.layout.width);
 			if (width && width !== getEastWidth()) {
@@ -463,9 +520,9 @@ function Container(props) {
 				wrapperProps.style = { width: eastWidth, };
 			}
 		}
-		componentProps.collapseDirection = HORIZONTAL;
-		componentProps.isCollapsed = getEastIsCollapsed();
-		componentProps.setIsCollapsed = setEastIsCollapsed;
+		componentProps._panel.collapseDirection = HORIZONTAL;
+		componentProps._panel.isCollapsed = getEastIsCollapsed();
+		componentProps._panel.setIsCollapsed = setEastIsCollapsed;
 		if (isWeb && eastIsResizable) {
 			eastSplitter = <Splitter
 								mode={HORIZONTAL}
@@ -478,11 +535,11 @@ function Container(props) {
 						</BoxNative>;
 	}
 	if (west) {
-		componentProps = {};
+		componentProps = { _panel: { ...west.props?._panel }, };
 		wrapperProps = {};
 		
-		componentProps.isDisabled = isDisabled || isComponentsDisabled;
-		componentProps.className = 'h-full w-full ' + (west.props.className || '');
+		componentProps._panel.isDisabled = isDisabled || isComponentsDisabled;
+		componentProps._panel.className = 'h-full w-full ' + (west.props.className || '');
 		wrapperProps.onLayout = (e) => {
 			const width = parseFloat(e.nativeEvent.layout.width);
 			if (width && width !== getWestWidth()) {
@@ -501,9 +558,9 @@ function Container(props) {
 				wrapperProps.style = { width: westWidth, };
 			}
 		}
-		componentProps.collapseDirection = HORIZONTAL;
-		componentProps.isCollapsed = getWestIsCollapsed();
-		componentProps.setIsCollapsed = setWestIsCollapsed;
+		componentProps._panel.collapseDirection = HORIZONTAL;
+		componentProps._panel.isCollapsed = getWestIsCollapsed();
+		componentProps._panel.setIsCollapsed = setWestIsCollapsed;
 		if (isWeb && westIsResizable) {
 			westSplitter = <Splitter
 								mode={HORIZONTAL}
@@ -517,17 +574,17 @@ function Container(props) {
 	}
 	return <VStack className="Container-all w-full flex-1">
 				{northComponent}
-				{!northIsCollapsed && !localNorthIsCollapsed && northSplitter}
+				{!getNorthIsCollapsed() && northSplitter}
 				<HStack className="Container-mid w-full flex-[100]">
 					{westComponent}
-					{!westIsCollapsed && !localWestIsCollapsed && westSplitter}
+					{!getWestIsCollapsed() && westSplitter}
 					<VStack className="Container-center h-full overflow-auto flex-[100]">
 						{centerComponent}
 					</VStack>
-					{!eastIsCollapsed && !localEastIsCollapsed && eastSplitter}
+					{!getEastIsCollapsed() && eastSplitter}
 					{eastComponent}
 				</HStack>
-				{!southIsCollapsed && !localSouthIsCollapsed && southSplitter}
+				{!getSouthIsCollapsed() && southSplitter}
 				{southComponent}
 			</VStack>;
 }

package/src/Components/Form/Form.js

@@ -522,6 +522,8 @@ function Form(props) {
 			}
 			let {
 					type,
+					editorType: itemEditorType,
+					viewerType,
 					title,
 					name,
 					isEditable = true,
@@ -560,12 +562,18 @@ function Form(props) {
 			}
 			if (!type) {
 				if (isEditable) {
-					const {
-							type: t,
-							...p
-						} = propertyDef?.editorType;
-					type = t;
-					editorTypeProps = p;
+					if (itemEditorType) {
+						type = itemEditorType;
+					} else {
+						const {
+								type: t,
+								...p
+							} = propertyDef?.editorType;
+						type = t;
+						editorTypeProps = p;
+					}
+				} else if (viewerType) {
+					type = viewerType;
 				} else if (propertyDef?.viewerType) {
 					const {
 							type: t,
@@ -1390,6 +1398,7 @@ function Form(props) {
 						onPress={() => doReset()}
 						icon={Rotate}
 						isDisabled={!formState.isDirty}
+						tooltip="Reset Form"
 					/>}
 
 				{showCancelBtn &&

package/src/Components/Grid/Grid.js

@@ -423,7 +423,16 @@ function GridComponent(props) {
 			}
 		},
 		getFooterToolbarItems = () => {
-			const items = _.map(additionalToolbarButtons, (config, ix) => getIconButtonFromConfig(config, ix, self));
+			// Process additionalToolbarButtons to evaluate getIsButtonDisabled functions
+			const processedButtons = _.map(additionalToolbarButtons, (config) => {
+				const processedConfig = { ...config };
+				// If the button has an getIsButtonDisabled function, evaluate it with current selection
+				if (_.isFunction(config.getIsButtonDisabled)) {
+					processedConfig.isDisabled = config.getIsButtonDisabled(selection);
+				}
+				return processedConfig;
+			});
+			const items = _.map(processedButtons, (config, ix) => getIconButtonFromConfig(config, ix, self));
 			if (canRowsReorder && CURRENT_MODE === UI_MODE_WEB) { // DND is currently web-only  TODO: implement for RN
 				items.unshift(<IconButton
 					{...testProps('reorderBtn')}
@@ -476,33 +485,41 @@ function GridComponent(props) {
 									}
 									break;
 								case DOUBLE_CLICK:
-									if (!isSelected) { // If a row was already selected when double-clicked, the first click will deselect it,
-										onRowClick(item, e); // so reselect it
-									}
-
-									if (UiGlobals.doubleClickingGridRowOpensEditorInViewMode) { // global setting
-										if (onView) {
-											if (canUser && !canUser(VIEW)) { // permissions
-												return;
-											}
-											onView(!props.isEditorViewOnly);
+									if (editorType === EDITOR_TYPE__SIDE) {
+										// For side-editors, a double-click just acts like a single click
+										if (!getIsEditorShown()) {
+											onRowClick(item, e); // sets selection
 										}
 									} else {
-										let canDoEdit = false,
-											canDoView = false;
-										if (onEdit && canUser && canUser(EDIT) && (!canRecordBeEdited || canRecordBeEdited(selection)) && !props.disableEdit && !isEditorViewOnly) {
-											canDoEdit = true;
-										} else
-										if (onView && canUser && canUser(VIEW) && !props.disableView) {
-											canDoView = true;
+										if (!isSelected) { // If a row was already selected when double-clicked, the first click will deselect it,
+											onRowClick(item, e); // so reselect it
 										}
+										if (UiGlobals.doubleClickingGridRowOpensEditorInViewMode) { // global setting
+											if (onView) {
+												if (canUser && !canUser(VIEW)) { // permissions
+													return;
+												}
+												onView(!props.isEditorViewOnly);
+											}
+										} else {
+											let canDoEdit = false,
+												canDoView = false;
+											if (onEdit && canUser && canUser(EDIT) && (!canRecordBeEdited || canRecordBeEdited(selection)) && !props.disableEdit && !isEditorViewOnly) {
+												canDoEdit = true;
+											} else
+											if (onView && canUser && canUser(VIEW) && !props.disableView) {
+												canDoView = true;
+											}
 
-										if (canDoEdit) {
-											onEdit();
-										} else if (canDoView) {
-											onView();
+											if (canDoEdit) {
+												onEdit();
+											} else if (canDoView) {
+												onView();
+											}
 										}
+
 									}
+
 									break;
 								case TRIPLE_CLICK:
 									break;
@@ -1562,10 +1579,19 @@ function GridComponent(props) {
 		const
 			currentLength = entities?.length || 0,
 			wasEmpty = previousEntitiesLength.current === 0,
-			isNowPopulated = currentLength > 0;
+			isNowPopulated = currentLength > 0,
+			hasPhantomRecord = entities?.some(entity => entity?.isPhantom);
+			
+		// NOTE: The Repository was reloading when a phantom record was added,
+		// and this broke the Editor because selection was being reset to zero.
+		// This is because adjustPageSizeToHeight calls setPageSize,
+		// which calls _onChangePagination, which calls reload.
+		// The reloaded repository doesn’t get the new phantom record,
+		// so it’s not found, and selection goes to zero.
+		// So we skip this adjustment when there is a phantom record.
 		
 		// Only remeasure the FIRST time rows appear after being empty
-		if (autoAdjustPageSizeToHeight && wasEmpty && isNowPopulated && !hasRemeasuredAfterRowsAppeared.current) {
+		if (!hasPhantomRecord && autoAdjustPageSizeToHeight && wasEmpty && isNowPopulated && !hasRemeasuredAfterRowsAppeared.current) {
 			// Rows just appeared for the first time - restart measurement cycle to use actual heights
 			if (DEBUG) {
 				console.log(`${getMeasurementPhase()}, useEffect 5 - rows appeared for first time, restarting measurement cycle`);
@@ -1602,13 +1628,24 @@ function GridComponent(props) {
 		// first time through, render a placeholder so we can get container dimensions
 		return <VStackNative
 					onLayout={(e) => {
-						if (DEBUG) {
-							console.log(`${getMeasurementPhase()}, placeholder onLayout, call adjustPageSizeToHeight()`);
-						}
-						const containerHeight = e.nativeEvent.layout.height;
-						adjustPageSizeToHeight(containerHeight);
-						if (DEBUG) {
-							console.log(`${getMeasurementPhase()}, placeholder onLayout, call setIsInited(true)`);
+						const hasPhantomRecord = entities?.some(entity => entity?.isPhantom);
+						if (!hasPhantomRecord) {
+							// NOTE: The Repository was reloading when a phantom record was added,
+							// and this broke the Editor because selection was being reset to zero.
+							// This is because adjustPageSizeToHeight calls setPageSize,
+							// which calls _onChangePagination, which calls reload.
+							// The reloaded repository doesn’t get the new phantom record,
+							// so it’s not found, and selection goes to zero.
+							// So we skip this adjustment when there is a phantom record.
+
+							if (DEBUG) {
+								console.log(`${getMeasurementPhase()}, placeholder onLayout, call adjustPageSizeToHeight()`);
+							}
+							const containerHeight = e.nativeEvent.layout.height;
+							adjustPageSizeToHeight(containerHeight);
+							if (DEBUG) {
+								console.log(`${getMeasurementPhase()}, placeholder onLayout, call setIsInited(true)`);
+							}
 						}
 						setIsInited(true);
 					}}
@@ -1785,14 +1822,11 @@ function GridComponent(props) {
 							)}
 						>
 							{grid}
-							{/* Loading overlay during measurement phases to prevent visual flashing */}
-							{autoAdjustPageSizeToHeight && 
-							(getMeasurementPhase() === PHASES__INITIAL || getMeasurementPhase() === PHASES__MEASURING) && 
-							entities?.length > 0 && (
+							{/* Load overlay during initial phase to prevent visual flashing * /
+							autoAdjustPageSizeToHeight && getMeasurementPhase() === PHASES__INITIAL && 
 								<VStack className="absolute inset-0 z-10 bg-white">
 									<Loading />
-								</VStack>
-							)}
+								</VStack>*/}
 						</VStack>
 
 						{listFooterComponent}

package/src/Components/Hoc/withEditor.js

@@ -38,6 +38,7 @@ export default function withEditor(WrappedComponent, isTree = false) {
 				disableDuplicate = false,
 				disableView = false,
 				useRemoteDuplicate = false, // call specific copyToNew function on server, rather than simple duplicate on client
+				getDuplicateValues, // fn(entity) to get default values for duplication
 				getRecordIdentifier = (selection) => {
 					if (selection.length > 1) {
 						return 'records?';
@@ -89,6 +90,7 @@ export default function withEditor(WrappedComponent, isTree = false) {
 			editorModeRef = useRef(initialEditorMode),
 			isIgnoreNextSelectionChangeRef = useRef(false),
 			isEditorShownRef = useRef(false),
+			defaultValuesRef = useRef(defaultValues),
 			canEditorBeInEditModeRef = useRef(true), // whether the editor is allowed to be in edit mode based on canRecordBeEdited
 			[currentRecord, setCurrentRecord] = useState(null),
 			[isAdding, setIsAdding] = useState(false),
@@ -111,6 +113,12 @@ export default function withEditor(WrappedComponent, isTree = false) {
 			getIsEditorShown = () => {
 				return isEditorShownRef.current;
 			},
+			getDefaultValues = () => {
+				return defaultValuesRef.current;
+			},
+			setDefaultValues = (vals) => {
+				defaultValuesRef.current = vals;
+			},
 			setCanEditorBeInEditMode = (bool) => {
 				canEditorBeInEditModeRef.current = bool;
 				forceUpdate();
@@ -164,6 +172,9 @@ export default function withEditor(WrappedComponent, isTree = false) {
 			getNewEntityDisplayValue = () => {
 				return newEntityDisplayValueRef.current;
 			},
+			setNewEntityDisplayValue = (val) => {
+				newEntityDisplayValueRef.current = val;
+			},
 			doAdd = async (e, values) => {
 				if (canUser && !canUser(ADD)) {
 					showPermissionsError(ADD);
@@ -191,8 +202,8 @@ export default function withEditor(WrappedComponent, isTree = false) {
 					// 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();
-					if (defaultValues) {
-						_.merge(defaultValuesToUse, defaultValues);
+					if (getDefaultValues()) {
+						_.merge(defaultValuesToUse, getDefaultValues());
 					}
 					addValues = {...defaultValuesToUse};
 				}
@@ -458,7 +469,7 @@ export default function withEditor(WrappedComponent, isTree = false) {
 					const
 						entity = selection[0],
 						idProperty = Repository.getSchema().model.idProperty,
-						rawValues = _.omit(entity.getOriginalData(), idProperty);
+						rawValues = getDuplicateValues ? getDuplicateValues(entity) : _.omit(entity.getOriginalData(), idProperty);
 					rawValues.id = null; // unset the id of the duplicate
 
 					setIsWaitModalShown(true);
@@ -738,7 +749,8 @@ export default function withEditor(WrappedComponent, isTree = false) {
 			self.duplicate = doDuplicate;
 			self.setIsEditorShown = setIsEditorShown;
 		}
-		newEntityDisplayValueRef.current = newEntityDisplayValue;
+		setNewEntityDisplayValue(newEntityDisplayValue);
+		setDefaultValues(defaultValues);
 
 		if (lastSelection !== selection) {
 			// NOTE: If I don't calculate this on the fly for selection changes,