@onehat/ui 0.4.41 → 0.4.42

package/package.json

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

package/src/Components/Buttons/ReloadButton.js

@@ -30,7 +30,6 @@ export default function ReloadButton(props) {
 				{...propsToPass}
 				icon={Rotate}
 				_icon={_icon}
-				className="ml-2"
 				tooltip="Reload"
 			/>;
 }

package/src/Components/Form/Field/Checkbox/CheckboxGroup.js

@@ -28,15 +28,17 @@ const
 			const checkboxProps = {
 			};
 			if (Repository) {
-				const entities = Repository.getEntitiesOnPage();
-				checkboxes = _.map(entities, (entity, ix) => {
-					return <Checkbox
-								{...testProps('checkbox-' + entity.id)}
-								key={ix}
-								value={entity.id}
-								{...checkboxProps}
-							>{entity.displayValue}</Checkbox>;
-				});
+				if (!Repository.isDestroyed) {
+					const entities = Repository.getEntitiesOnPage();
+					checkboxes = _.map(entities, (entity, ix) => {
+						return <Checkbox
+									{...testProps('checkbox-' + entity.id)}
+									key={ix}
+									value={entity.id}
+									{...checkboxProps}
+								>{entity.displayValue}</Checkbox>;
+					});
+				}
 			} else {
 				checkboxes = _.map(data, (datum, ix) => {
 					return <Checkbox

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

@@ -36,6 +36,21 @@ import _ from 'lodash';
 
 const FILTER_NAME = 'q';
 
+/**
+ * isEmptyValue
+ * _.isEmpty returns true for all integers, so we need this instead
+ * @param {*} value 
+ * @returns boolean
+ */
+function isEmptyValue(value) {
+	// 
+	return value === null ||
+			value === undefined ||
+			value === '' ||
+			value === 0 ||
+			(_.isObject(value) && _.isEmpty(value));
+};
+
 export const ComboComponent = forwardRef((props, ref) => {
 
 	const {
@@ -170,19 +185,20 @@ export const ComboComponent = forwardRef((props, ref) => {
 			} else if (_.isArray(value)) {
 				displayValue = [];
 				if (Repository) {
-					if (!Repository.isLoaded) {
-						debugger;
-						throw Error('Not yet implemented'); // Would a Combo ever have multiple remote selections? Shouldn't that be a Tag field??
-					}
-					if (Repository.isLoading) {
-						await Repository.waitUntilDoneLoading();
-					}
-					displayValue = _.each(value, (id) => {
-						const entity = Repository.getById(id);
-						if (entity) {
-							displayValue.push(entity.displayValue);
+					if (!Repository.isDestroyed) {
+						if (!Repository.isLoaded) {
+							throw Error('Not yet implemented'); // Would a Combo ever have multiple remote selections? Shouldn't that be a Tag field??
 						}
-					});
+						if (Repository.isLoading) {
+							await Repository.waitUntilDoneLoading();
+						}
+						displayValue = _.each(value, (id) => {
+							const entity = Repository.getById(id);
+							if (entity) {
+								displayValue.push(entity.displayValue);
+							}
+						});
+					}
 				} else {
 					displayValue = _.each(value, (id) => {
 						const item = _.find(data, (datum) => datum[idIx] === id);
@@ -194,25 +210,33 @@ export const ComboComponent = forwardRef((props, ref) => {
 				displayValue = displayValue.join(', ');
 			} else {
 				if (Repository) {
-					let entity;
-					if (!Repository.isLoaded) {
-						entity = await Repository.getSingleEntityFromServer(value);
-					} else {
-						if (Repository.isLoading) {
-							await Repository.waitUntilDoneLoading();
-						}
-						entity = Repository.getById(value);
-						if (!entity) {
-							entity = await Repository.getSingleEntityFromServer(value);
+					if (!Repository.isDestroyed) {
+						let entity;
+						if (!isEmptyValue(value)) {
+							if (!Repository.isLoaded) {
+								entity = await Repository.getSingleEntityFromServer(value);
+							} else {
+								if (Repository.isLoading) {
+									await Repository.waitUntilDoneLoading();
+								}
+								entity = Repository.getById(value);
+								if (!entity) {
+									entity = await Repository.getSingleEntityFromServer(value);
+								}
+							}
 						}
+						displayValue = entity?.displayValue || '';
 					}
-					displayValue = entity?.displayValue || '';
 				} else {
 					const item = _.find(data, (datum) => datum[idIx] === value);
 					displayValue = (item && item[displayIx]) || '';
 				}
 			}
 
+			if (isInTag) {
+				displayValue = '';
+			}
+
 			displayValueRef.current = displayValue;
 			resetTextInputValue();
 		},
@@ -399,14 +423,16 @@ export const ComboComponent = forwardRef((props, ref) => {
 		},
 		clearGridFilters = async () => {
 			if (Repository) {
-				if (Repository.isLoading) {
-					await Repository.waitUntilDoneLoading();
-				}
-				const filterName = getFilterName();
-				if (Repository.hasFilter(filterName)) {
-					Repository.clearFilters(filterName);
-					if (Repository.isRemote && !Repository.isAutoLoad) {
-						await Repository.reload();
+				if (!Repository.isDestroyed) {
+					if (Repository.isLoading) {
+						await Repository.waitUntilDoneLoading();
+					}
+					const filterName = getFilterName();
+					if (Repository.hasFilter(filterName)) {
+						Repository.clearFilters(filterName);
+						if (Repository.isRemote && !Repository.isAutoLoad) {
+							await Repository.reload();
+						}
 					}
 				}
 			} else {
@@ -421,42 +447,44 @@ export const ComboComponent = forwardRef((props, ref) => {
 		searchForMatches = async (value) => {
 			let found;
 			if (Repository) {
-				if (Repository.isLoading) {
-					await Repository.waitUntilDoneLoading();
-				}
+				if (!Repository.isDestroyed) {
+					if (Repository.isLoading) {
+						await Repository.waitUntilDoneLoading();
+					}
 
-				if (_.isEmpty(value)) {
-					clearGridFilters();
-					return;
-				}
+					if (_.isEmpty(value)) {
+						clearGridFilters();
+						return;
+					}
 
-				// Set filter
-				const
-					idRegex = /^id:(.*)$/,
-					isId = _.isString(value) && !!value.match(idRegex),
-					filterName = getFilterName(isId);
-				if (Repository.isRemote) {
-					// remote
-					const filterValue = _.isEmpty(value) ? null : (isId ? value.match(idRegex)[1] : value + '%');
-					await Repository.filter(filterName, filterValue);
-					if (!Repository.isAutoLoad) {
-						await Repository.reload();
+					// Set filter
+					const
+						idRegex = /^id:(.*)$/,
+						isId = _.isString(value) && !!value.match(idRegex),
+						filterName = getFilterName(isId);
+					if (Repository.isRemote) {
+						// remote
+						const filterValue = _.isEmpty(value) ? null : (isId ? value.match(idRegex)[1] : value + '%');
+						await Repository.filter(filterName, filterValue);
+						if (!Repository.isAutoLoad) {
+							await Repository.reload();
+						}
+					} else {
+						// local
+						Repository.filter({
+							name: filterName,
+							fn: (entity) => {
+								const
+									displayValue = entity.displayValue,
+									regex = new RegExp('^' + value, 'i'); // case-insensitive
+								return displayValue.match(regex);
+							},
+						});
 					}
-				} else {
-					// local
-					Repository.filter({
-						name: filterName,
-						fn: (entity) => {
-							const
-								displayValue = entity.displayValue,
-								regex = new RegExp('^' + value, 'i'); // case-insensitive
-							return displayValue.match(regex);
-						},
-					});
-				}
 
-				if (!isId) {
-					setNewEntityDisplayValue(value); // capture the search query so we can tell Grid what to use for a new entity's displayValue
+					if (!isId) {
+						setNewEntityDisplayValue(value); // capture the search query so we can tell Grid what to use for a new entity's displayValue
+					}
 				}
 			} else {
 				// Search through data

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

@@ -164,6 +164,7 @@ function NumberElement(props) {
 					isDisabled={isDisabled}
 					tooltip={tooltip}
 					tooltipPlacement={tooltipPlacement}
+					tooltipClassName="flex-1"
 					className={`
 						h-full
 						text-center

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

@@ -30,15 +30,17 @@ const
 				my: '2px',
 			};
 			if (Repository) {
-				const entities = Repository.getEntitiesOnPage();
-				radios = _.map(entities, (entity, ix) => {
-					return <Radio
-								{...testProps('radio-' + entity.id)}
-								key={ix}
-								value={entity.id}
-								{...radioProps}
-							>{entity.displayValue}</Radio>;
-				});
+				if (!Repository.isDestroyed) {
+					const entities = Repository.getEntitiesOnPage();
+					radios = _.map(entities, (entity, ix) => {
+						return <Radio
+									{...testProps('radio-' + entity.id)}
+									key={ix}
+									value={entity.id}
+									{...radioProps}
+								>{entity.displayValue}</Radio>;
+					});
+				}
 			} else {
 				radios = _.map(data, (datum, ix) => {
 					return <Radio

package/src/Components/Form/Field/Select/PageSizeSelect.js

@@ -11,7 +11,7 @@ export default function PageSizeSelect(props) {
 		} = props;
 
 	return useMemo(() => {
-		return <HStack className="PageSizeSelect-HStack w-[70px] ml-3">
+		return <HStack className="PageSizeSelect-HStack w-[70px]">
 					<Select
 						data={[
 							// [ 1, '1', ],

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

@@ -124,11 +124,13 @@ function TagComponent(props) {
 			if (!id) {
 				displayValue = '';
 			} else if (Repository) {
-				item = Repository.getById(id);
-				if (!item) {
-					throw Error('item not found');
+				if (!Repository.isDestroyed) {
+					item = Repository.getById(id);
+					if (!item) {
+						throw Error('item not found');
+					}
+					displayValue = item.displayValue;
 				}
-				displayValue = item.displayValue;
 			} else {
 				item = _.find(data, (datum) => datum[idIx] === id);
 				if (!item) {
@@ -248,19 +250,19 @@ function TagComponent(props) {
 		className += ' ' + props.className;
 	}
 	const style = {};
-	if (!props.flex && !props.w) {
+	if (props.style) {
+		_.assign(style, props.style); // needed for grid; otherwise valuebox width can be too wide
+	}
+	if (!props.flex && !props.w && !style.width) {
 		style.flex = 1;
 	} else {
-		if (props.w) {
+		if (props.w && !style.width) {
 			style.width = props.w;
 		}
-		if (props.flex) {
+		if (props.flex && !style.width) {
 			style.flex = props.flex;
 		}
 	}
-	if (props.style) {
-		_.assign(style, props.style); // needed for grid; otherwise valuebox width can be too wide
-	}
 	let valueBoxesClassName = `
 		Tag-valueBoxes-container
 		w-full

package/src/Components/Form/Form.js

@@ -966,7 +966,7 @@ function Form(props) {
 		doReset = (values) => {
 			reset(values);
 			if (onReset) {
-				onReset(values, formSetValue, formGetValues);
+				onReset(values, formSetValue, formGetValues, trigger);
 			}
 		},
 		onSaveDecorated = async (data, e) => {
@@ -998,14 +998,14 @@ function Form(props) {
 		}
 		if (record === previousRecord) {
 			if (onInit) {
-				onInit(initialValues, formSetValue, formGetValues);
+				onInit(initialValues, formSetValue, formGetValues, trigger);
 			}
 		} else {
 			setPreviousRecord(record);
 			doReset(defaultValues);
 		}
 		if (formSetup) {
-			formSetup(formSetValue, formGetValues, formState);
+			formSetup(formSetValue, formGetValues, formState, trigger);
 		}
 	}, [record]);
 

package/src/Components/Grid/Grid.js

@@ -146,6 +146,7 @@ function GridComponent(props) {
 			disableBottomToolbar = false,
 			disablePagination = false,
 			bottomToolbar = 'pagination',
+			_paginationToolbarProps = {},
 			topToolbar = null,
 			additionalToolbarButtons = [],
 			bg = '#fff',
@@ -744,10 +745,12 @@ function GridComponent(props) {
 				let dragRecord,
 					dropRecord;
 				if (Repository) {
-					dragRecord = Repository.getByIx(dragIx);
-					dropRecord = Repository.getByIx(dropIx);
-					if (dropRecord) {
-						Repository.reorder(dragRecord, dropRecord, useBottom ? DROP_POSITION_AFTER : DROP_POSITION_BEFORE);
+					if (!Repository.isDestroyed) {
+						dragRecord = Repository.getByIx(dragIx);
+						dropRecord = Repository.getByIx(dropIx);
+						if (dropRecord) {
+							Repository.reorder(dragRecord, dropRecord, useBottom ? DROP_POSITION_AFTER : DROP_POSITION_BEFORE);
+						}
 					}
 				} else {
 					function arrayMove(arr, fromIndex, toIndex) {
@@ -766,21 +769,13 @@ function GridComponent(props) {
 			const
 				headerHeight = showHeaders ? 50 : 0,
 				footerHeight = !disablePagination ? 50 : 0,
-				height = containerHeight - headerHeight - footerHeight;
-
-			const rowsPerContainer = Math.floor(height / defaultRowHeight);
-
-			// // Get the total height of all rows
-			// const rows = gridRef.current._listRef._scrollRef.childNodes[0].childNodes;
-			// let totalRowHeight = 0;
-			// rows.forEach((row) => {
-			// 	totalRowHeight += row.getBoundingClientRect().height;
-			// });
-			// const rowsPerContainer = Math.floor(height / (totalRowHeight / rows.length));
-
-			let pageSize = rowsPerContainer;
-			if (showHeaders) {
-				pageSize--;
+				availableHeight = containerHeight - headerHeight - footerHeight,
+				maxClassNormal = styles.GRID_ROW_MAX_HEIGHT_NORMAL, // e.g. max-h-[40px]
+				rowNormalHeight = parseInt(maxClassNormal.match(/\d+/)[0]);
+			
+			let pageSize = Math.floor(availableHeight / rowNormalHeight);
+			if (pageSize < 1) {
+				pageSize = 1;
 			}
 			return pageSize;
 		},
@@ -1162,6 +1157,7 @@ function GridComponent(props) {
 										toolbarItems={footerToolbarItemComponents}
 										disablePageSize={disablePageSize}
 										showMoreOnly={showMoreOnly}
+										{..._paginationToolbarProps}
 									/>;
 		} else if (footerToolbarItemComponents.length) {
 			listFooterComponent = <Toolbar>

package/src/Components/Grid/GridRow.js

@@ -92,8 +92,8 @@ function GridRow(props) {
 						justify-center
 						border-r-black-100
 						block
-						max-h-[40px]
-						overflow-scroll
+						overflow-auto
+						${styles.GRID_ROW_MAX_HEIGHT_EXTRA}
 					`;
 					if (isOnlyOneVisibleColumn) {
 						colClassName = ' w-full';
@@ -167,8 +167,9 @@ function GridRow(props) {
 									if (type.match(/(Tag|TagEditor|Json)$/)) {
 										elementProps.isViewOnly = true; // TODO: this won't work for InlineGridEditor, bc that Grid can't use isViewOnly when actually editing
 									}
+									let cellProps = {};
 									if (config.getCellProps) {
-										_.assign(elementProps, config.getCellProps(item));
+										_.assign(cellProps, config.getCellProps(item));
 									}
 									let elementClassName = `
 										GridRow-Element
@@ -177,16 +178,19 @@ function GridRow(props) {
 										px-2
 										py-3
 										block
-										max-h-[40px]
 										overflow-scroll
 										${colClassName}
 										${styles.GRID_CELL_CLASSNAME}
+										${styles.GRID_ROW_MAX_HEIGHT_NORMAL}
 									`;
 									if (config.className) {
 										elementClassName += ' ' + config.className;
 									}
+									if (cellProps.className) {
+										elementClassName += ' ' + cellProps.className;
+									}
 									if (type.match(/(Tag|TagEditor)$/)) {
-										elementClassName += ' max-h-[80px]';
+										elementClassName += ' ' + styles.GRID_ROW_MAX_HEIGHT_EXTRA;
 									}
 									return <Element
 												{...testProps('cell-' + config.fieldName)}
@@ -232,14 +236,9 @@ function GridRow(props) {
 						GridRow-TextNative
 						self-center
 						overflow-hidden
-						text-ellipsis
-						truncate
-						whitespace-nowrap
-						overflow-hidden
 						${colClassName}
-						${styles.GRID_CELL_CLASSNAME} 
-						${styles.GRID_CELL_PX} 
-						${styles.GRID_CELL_PY} 
+						${styles.GRID_CELL_CLASSNAME}
+						${styles.GRID_ROW_MAX_HEIGHT_EXTRA}
 					`;
 					if (config.className) {
 						textClassName += ' ' + config.className;

package/src/Components/Hoc/withEditor.js

@@ -101,6 +101,15 @@ export default function withEditor(WrappedComponent, isTree = false) {
 					onEditorClose();
 				}
 			},
+			setIsWaitModalShown = (bool) => {
+				const
+					dispatch = UiGlobals.redux?.dispatch,
+					setIsWaitModalShownAction = UiGlobals.debugReducer?.setIsWaitModalShownAction;
+				if (setIsWaitModalShownAction) {
+					console.log('withEditor:setIsWaitModalShownAction', bool);
+					dispatch(setIsWaitModalShownAction(bool));
+				}
+			},
 			setSelectionDecorated = (newSelection) => {
 				function doIt() {
 					setSelection(newSelection);
@@ -386,36 +395,66 @@ export default function withEditor(WrappedComponent, isTree = false) {
 					return;
 				}
 
-				// check permissions for duplicate
-
 				const selection = getSelection();
 				if (selection.length !== 1) {
 					return;
 				}
+
 				if (useRemoteDuplicate) {
-					const results = await onRemoteDuplicate();
-					return results;
+					return await onRemoteDuplicate();
+				}
+
+				let isSuccess = false,
+					duplicateEntity;
+				try {
+					const
+						entity = selection[0],
+						idProperty = Repository.getSchema().model.idProperty,
+						rawValues = _.omit(entity.getOriginalData(), idProperty);
+					rawValues.id = null; // unset the id of the duplicate
+
+					setIsWaitModalShown(true);
+
+					duplicateEntity = await Repository.add(rawValues, false, true);
+					isSuccess = true;
+
+				} catch(err) {
+					// do nothing
+				} finally {
+					setIsWaitModalShown(false);
+				}
+
+				if (isSuccess) {
+					setIsIgnoreNextSelectionChange(true);
+					setSelection([duplicateEntity]);
+					setEditorMode(EDITOR_MODE__EDIT);
+					setIsEditorShown(true);
 				}
-				const
-					entity = selection[0],
-					idProperty = Repository.getSchema().model.idProperty,
-					rawValues = _.omit(entity.getOriginalData(), idProperty);
-				rawValues.id = null; // unset the id of the duplicate
-				const duplicate = await Repository.add(rawValues, false, true);
-				setIsIgnoreNextSelectionChange(true);
-				setSelection([duplicate]);
-				setEditorMode(EDITOR_MODE__EDIT);
-				setIsEditorShown(true);
 			},
 			onRemoteDuplicate = async () => {
-				const
-					selection = getSelection(),
-					entity = selection[0],
-					duplicateEntity = await Repository.remoteDuplicate(entity);
+				let isSuccess = false,
+					duplicateEntity;
+				try {
+					const
+						selection = getSelection(),
+						entity = selection[0];
+					
+					setIsWaitModalShown(true);
 
-				setIsIgnoreNextSelectionChange(true);
-				setSelection([duplicateEntity]);
-				doEdit();
+					duplicateEntity = await Repository.remoteDuplicate(entity);
+					isSuccess = true;
+					
+				} catch(err) {
+					// do nothing
+				} finally {
+					setIsWaitModalShown(false);
+				}
+				if (isSuccess) {
+					setIsIgnoreNextSelectionChange(true);
+					setSelection([duplicateEntity]);
+					doEdit();
+					return duplicateEntity;
+				}
 			},
 			doEditorSave = async (data, e) => {
 				let mode = getEditorMode() === EDITOR_MODE__ADD ? ADD : EDIT;

package/src/Components/Hoc/withFilters.js

@@ -654,7 +654,7 @@ export default function withFilters(WrappedComponent) {
 						<HStack className="withFilters-scrollViewContainer flex-1 items-center">
 							<ScrollView
 								ref={scrollViewRef}
-								className={`withFilters-ScrollView ${scrollViewClass}`}
+								className={`withFilters-ScrollView ${scrollViewClass} pb-1`}
 								horizontal={true}
 								contentContainerStyle={{ alignItems: 'center' }}
 								onContentSizeChange={onContentSizeChange}

package/src/Components/Hoc/withPdfButtons.js

@@ -141,6 +141,9 @@ export default function withPdfButtons(WrappedComponent) {
 					if (!_.isEmpty(items)) {
 						const defaults = item.defaults;
 						item.items = _.map(items, (item, ix) => {
+							if (!item){
+								return null;
+							}
 							return buildNextLayer(item, ix, defaults);
 						});
 					}

package/src/Components/Hoc/withSelection.js

@@ -150,7 +150,9 @@ export default function withSelection(WrappedComponent) {
 					currentlySelectedRowIndices = [];
 				const Repository = getRepository();
 				if (Repository) {
-					items = Repository.getEntitiesOnPage();
+					if (!Repository.isDestroyed) {
+						items = Repository.getEntitiesOnPage();
+					}
 				} else {
 					items = data;
 				}
@@ -214,8 +216,12 @@ export default function withSelection(WrappedComponent) {
 
 				// Gets ix of entity on page, or element in data array
 				if (Repository) {
-					const entities = Repository.getEntitiesOnPage();
-					return entities.indexOf(item);
+					if (!Repository.isDestroyed) {
+						const entities = Repository.getEntitiesOnPage();
+						return entities.indexOf(item);
+					} else {
+						return -1;
+					}
 				}
 				
 				let found;
@@ -272,28 +278,30 @@ export default function withSelection(WrappedComponent) {
 				const Repository = getRepository();
 				let newSelection = [];
 				if (Repository) {
-					if (Repository.isLoading) {
-						await Repository.waitUntilDoneLoading();
-					}
-					// Get entity or entities that match value
-					if ((_.isArray(value) && !_.isEmpty(value)) || !!value) {
-						if (_.isArray(value)) {
-							newSelection = Repository.getBy((entity) => inArray(entity.id, value));
-						} else {
-							let found = Repository.getById(value);
-							if (found) {
-								newSelection.push(found);
-							// } else if (Repository?.isRemote && Repository?.entities.length) {
-
-							// 	// Value cannot be found in Repository, but actually exists on server
-							// 	// Try to get this value from the server directly
-							// 	Repository.filter(Repository.schema.model.idProperty, value);
-							// 	await Repository.load();
-							// 	found = Repository.getById(value);
-							// 	if (found) {
-							// 		newSelection.push(found);
-							// 	}
-
+					if (!Repository.isDestroyed) {
+						if (Repository.isLoading) {
+							await Repository.waitUntilDoneLoading();
+						}
+						// Get entity or entities that match value
+						if ((_.isArray(value) && !_.isEmpty(value)) || !!value) {
+							if (_.isArray(value)) {
+								newSelection = Repository.getBy((entity) => inArray(entity.id, value));
+							} else {
+								let found = Repository.getById(value);
+								if (found) {
+									newSelection.push(found);
+								// } else if (Repository?.isRemote && Repository?.entities.length) {
+	
+								// 	// Value cannot be found in Repository, but actually exists on server
+								// 	// Try to get this value from the server directly
+								// 	Repository.filter(Repository.schema.model.idProperty, value);
+								// 	await Repository.load();
+								// 	found = Repository.getById(value);
+								// 	if (found) {
+								// 		newSelection.push(found);
+								// 	}
+	
+								}
 							}
 						}
 					}
@@ -326,6 +334,9 @@ export default function withSelection(WrappedComponent) {
 
 		if (Repository) {
 			useEffect(() => {
+				if (Repository.isDestroyed) {
+					return null;
+				}
 				Repository.on('load', refreshSelection);
 				return () => {
 					Repository.off('load', refreshSelection);
@@ -356,8 +367,10 @@ export default function withSelection(WrappedComponent) {
 				} else if (autoSelectFirstItem) {
 					let newSelection = [];
 					if (Repository) {
-						const entitiesOnPage = Repository.getEntitiesOnPage();
-						newSelection = entitiesOnPage[0] ? [entitiesOnPage[0]] : [];
+						if (!Repository.isDestroyed) {
+							const entitiesOnPage = Repository.getEntitiesOnPage();
+							newSelection = entitiesOnPage[0] ? [entitiesOnPage[0]] : [];
+						}
 					} else {
 						newSelection = data[0] ? [data[0]] : [];
 					}

package/src/Components/Toolbar/Pagination.js

@@ -70,14 +70,23 @@ export default function Pagination(props) {
 			}
 			if (!Repository.isLocal) {
 				items.push(<ReloadButton
-					key="reloadPageBtn"
-					className="Pagination-reloadPageBtn"
-					_icon={iconProps}
-					Repository={Repository}
-					self={self}
-				/>);
+								key="reloadPageBtn"
+								className="Pagination-reloadPageBtn"
+								_icon={iconProps}
+								Repository={Repository}
+								self={self}
+							/>);
 			}
 		} else {
+			if (!Repository.isLocal) {
+				items.push(<ReloadButton
+								key="reloadPageBtn"
+								className="Pagination-reloadPageBtn"
+								_icon={iconProps}
+								Repository={Repository}
+								self={self}
+							/>);
+			}
 			isDisabled = page === 1;
 			if (showPagination) {
 				items.push(<IconButton
@@ -104,42 +113,6 @@ export default function Pagination(props) {
 								onPress={() => Repository.prevPage()}
 								tooltip="Previous Page"
 							/>);
-				if (!minimize) {
-					items.push(<Text
-						key="page"
-						className="Pagination-page mx-1"
-					>Page</Text>);
-					items.push(<Input
-						{...testProps('pageInput')}
-						key="pageInput"
-						reference="pageInput"
-						parent={self}
-						keyboardType="numeric"
-						value={page?.toString()}
-						onChangeValue={(value) => Repository.setPage(value)}
-						maxValue={totalPages}
-						isDisabled={totalPages === 1}
-						className={`
-							Pagination-pageInput
-							min-w-[40px]
-							w-[40px]
-							text-center
-							bg-grey-100
-						`}
-						textAlignIsCenter={true}
-						tooltip="Set Page"
-						tooltipClassName="w-[40px]"
-					/>);
-					items.push(<Text
-						key="totalPages"
-						className={`
-							Pagination-totalPages
-							whitespace-nowrap
-							inline-flex
-							mx-1
-						`}
-					>{`of ${totalPages}`}</Text>);
-				}
 
 				isDisabled = page === totalPages || totalPages <= 1;
 				items.push(<IconButton
@@ -166,17 +139,44 @@ export default function Pagination(props) {
 								onPress={() => Repository.setPage(totalPages)}
 								tooltip="Last Page"
 							/>);
+				if (!minimize) {
+					items.push(<Text
+									key="page"
+									className="Pagination-page mx-1"
+								>Page</Text>);
+					items.push(<Input
+									{...testProps('pageInput')}
+									key="pageInput"
+									reference="pageInput"
+									parent={self}
+									keyboardType="numeric"
+									value={page?.toString()}
+									onChangeValue={(value) => Repository.setPage(value)}
+									maxValue={totalPages}
+									isDisabled={totalPages === 1}
+									className={`
+										Pagination-pageInput
+										min-w-[40px]
+										w-[40px]
+										text-center
+										bg-grey-100
+									`}
+									textAlignIsCenter={true}
+									tooltip="Set Page"
+									tooltipClassName="w-[40px]"
+								/>);
+					items.push(<Text
+									key="totalPages"
+									className={`
+										Pagination-totalPages
+										whitespace-nowrap
+										inline-flex
+										mx-1
+									`}
+								>{`of ${totalPages}`}</Text>);
+				}
 			}
 
-			if (!Repository.isLocal) {
-				items.push(<ReloadButton
-					key="reloadPageBtn"
-					className="Pagination-reloadPageBtn"
-					_icon={iconProps}
-					Repository={Repository}
-					self={self}
-				/>);
-			}
 			if (showPagination && !minimize && !disablePageSize) {
 				items.push(<PageSizeSelect
 								{...testProps('pageSize')}
@@ -204,15 +204,14 @@ export default function Pagination(props) {
 			}
 		}
 		return <HStack
-					style={{ userSelect: 'none', }}
+					style={{
+						userSelect: 'none',
+					}}
 					className={`
 						Pagination
-						flex-none
-						gap-1
-						justify-start
 						items-center
-						px-2
-						mr-3
+						shrink-0
+						gap-2
 					`}
 				>
 					{items}

package/src/Components/Toolbar/PaginationToolbar.js

@@ -10,11 +10,15 @@ export default function PaginationToolbar(props) {
 	const {
 			toolbarItems = [],
 			disablePageSize = false,
+			minimize,
 		} = props,
-		[minimize, setMinimize] = useState(false),
+		[minimizeLocal, setMinimizeLocal] = useState(minimize),
 		propsToPass = _.omit(props, 'toolbarItems'),
 		showPagination = true,//props.Repository?.totalPages > 1,
 		onLayout = (e) => {
+			if (minimize) {
+				return; // skip if already minimized
+			}
 			// Note to future self: this is using hard-coded values.
 			// Eventually might want to make it responsive to actual sizes
 
@@ -28,7 +32,7 @@ export default function PaginationToolbar(props) {
 				shouldMinimize = width < threshold;
 
 			if (shouldMinimize !== minimize) {
-				setMinimize(shouldMinimize);
+				setMinimizeLocal(shouldMinimize);
 			}
 		};
 
@@ -36,27 +40,26 @@ export default function PaginationToolbar(props) {
 				className={`
 					border-t
 					border-t-grey-400
-					w-full
 				`}
 				onLayout={(e) => onLayout(e)}
 			>
+				{toolbarItems.length ?
+					<HStack
+						className={`
+							PaginationToolbar-HStack
+							shrink-0
+							border-r
+							border-r-grey-400
+							mr-3
+							pr-3
+						`}
+					>{toolbarItems}</HStack> : null}
 				<Pagination
 					{...propsToPass}
 					showPagination={showPagination}
 					w={toolbarItems.length ? null : '100%'}
-					minimize={minimize}
+					minimize={minimizeLocal}
 					disablePageSize={disablePageSize}
 				/>
-				{toolbarItems.length ?
-					<HStack className={`
-						PaginationToolbar-HStack
-						flex-1
-						space-x-1
-						border-l
-						border-l-grey-400
-						ml-3
-						pl-3
-					`}
-					>{toolbarItems}</HStack> : null}
 			</Toolbar>;
 };

package/src/Components/Toolbar/Toolbar.js

@@ -9,14 +9,11 @@ export default function Toolbar(props) {
 	
 	let className = `
 		Toolbar
-		flex
-		w-full
-		justify-start
-		items-center
 		overflow-auto
-		space-x-2
-		px-2
-		py-2
+		items-center
+		justify-start
+		gap-2
+		p-2
 		border-b
 		border-solid
 		border-b-grey-400

package/src/Components/Tree/Tree.js

@@ -534,10 +534,12 @@ function TreeComponent(props) {
 		buildAndSetTreeNodeData = async () => {
 			let nodes = [];
 			if (Repository) {
-				if (!Repository.areRootNodesLoaded) {
-					nodes = await Repository.loadRootNodes(1);
-				} else {
-					nodes = Repository.getRootNodes();
+				if (!Repository.isDestroyed) {
+					if (!Repository.areRootNodesLoaded) {
+						nodes = await Repository.loadRootNodes(1);
+					} else {
+						nodes = Repository.getRootNodes();
+					}
 				}
 			} else {
 				nodes = assembleDataTreeNodes();
@@ -611,7 +613,9 @@ function TreeComponent(props) {
 		},
 		getTreeNodeByNodeId = (node_id) => {
 			if (Repository) {
-				return Repository.getById(node_id);
+				if (!Repository.isDestroyed) {
+					return Repository.getById(node_id);
+				}
 			}
 			return data[node_id]; // TODO: This is probably not right!
 		},
@@ -1217,11 +1221,11 @@ function TreeComponent(props) {
 				dropRowRecord = dropRowDatum.item;
 
 			if (Repository) {
-				
-				const commonAncestorId = await Repository.moveTreeNode(dragRowRecord, dropRowRecord.id);
-				const commonAncestorDatum = getDatumById(commonAncestorId);
-				reloadNode(commonAncestorDatum.item);
-
+				if (!Repository.isDestroyed) {
+					const commonAncestorId = await Repository.moveTreeNode(dragRowRecord, dropRowRecord.id);
+					const commonAncestorDatum = getDatumById(commonAncestorId);
+					reloadNode(commonAncestorDatum.item);
+				}
 			} else {
 
 				throw Error('Not yet implemented');

package/src/Constants/Styles.js

@@ -78,6 +78,8 @@ const defaults = {
 	GRID_ROW_BG_HOVER: '#ccc', // must be hex
 	GRID_ROW_SELECTED_BG: '#ff0', // must be hex
 	GRID_ROW_SELECTED_BG_HOVER: '#cc0', // must be hex
+	GRID_ROW_MAX_HEIGHT_NORMAL: 'max-h-[40px]',
+	GRID_ROW_MAX_HEIGHT_EXTRA: 'max-h-[80px]',
 	GRID_REORDER_BORDER_COLOR: 'border-[#23d9ea]',
 	GRID_REORDER_BORDER_WIDTH: 'border-4',
 	GRID_REORDER_BORDER_STYLE: 'border-dashed',