@onehat/ui 0.3.11 → 0.3.17

package/package.json

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

package/src/Components/Editor/Editor.js

@@ -29,13 +29,17 @@ export default function Editor(props) {
 
 	if (_.isEmpty(selection)) {
 		return null; // hide the editor when no selection
-		return <Box {...props} bg="#ddd" />;
 	}
 
-	if (Repository?.isRemotePhantomMode && selection.length === 1 && editorMode === EDITOR_MODE__VIEW) {
+	// Repository?.isRemotePhantomMode && selection.length === 1 && 
+	if (editorMode === EDITOR_MODE__VIEW) {
+		const record = selection[0];
+		if (record.isDestroyed) {
+			return null;
+		}
 		return <Viewer
 					{...props}
-					record={selection[0]}
+					record={record}
 					onEditMode={isEditorViewOnly ? null : onEditMode}
 					onClose={onClose}
 					onDelete={onDelete}

package/src/Components/Editor/Viewer.js

@@ -6,6 +6,9 @@ import {
 	Row,
 	Text,
 } from 'native-base';
+import {
+	EDITOR_TYPE__SIDE,
+} from '../../Constants/Editor.js';
 import UiGlobals from '../../UiGlobals.js';
 import getComponentFromType from '../../Functions/getComponentFromType.js';
 import Label from '../Form/Label.js';
@@ -29,10 +32,12 @@ export default function Viewer(props) {
 			selectorSelected,
 
 			// withEditor
+			editorType,
 			onEditMode,
 			onClose,
 			onDelete,
 		} = props,
+		isSideEditor = editorType === EDITOR_TYPE__SIDE,
 		styles = UiGlobals.styles,
 		flex = props.flex || 1,
 		buildAncillary = () => {
@@ -45,12 +50,18 @@ export default function Viewer(props) {
 						selectorId = null,
 						...propsToPass
 					} = item;
+					if (!propsToPass.h) {
+						propsToPass.h = 400;
+					}
 					const
 						Element = getComponentFromType(type),
 						element = <Element
 										selectorId={selectorId}
 										selectorSelected={selectorSelected || record}
 										flex={1}
+										h={350}
+										canEditorViewOnly={true}
+										uniqueRepository={true}
 										{...propsToPass}
 									/>;
 					if (title) {
@@ -65,6 +76,10 @@ export default function Viewer(props) {
 			return components;
 		};
 
+	const
+		showDeleteBtn = onDelete && viewerCanDelete,
+		showCloseBtn = !isSideEditor;
+
 	return <Column flex={flex} {...props}>
 				<ScrollView width="100%" _web={{ height: 1 }}>
 					<Column m={2}>
@@ -88,26 +103,28 @@ export default function Viewer(props) {
 
 					</Column>
 				</ScrollView>
-				<Footer justifyContent="flex-end">
-					{onDelete && viewerCanDelete && 
-						<Row flex={1} justifyContent="flex-start">
-							<Button
-								key="deleteBtn"
-								onPress={onDelete}
-								bg="warning"
-								_hover={{
-									bg: 'warningHover',
-								}}
-								color="#fff"
-							>Delete</Button>
-						</Row>}
-					<Button.Group space={2}>
-						<Button
-							key="closeBtn"
-							onPress={onClose}
-							color="#fff"
-						>Close</Button>
-					</Button.Group>
-				</Footer>
+				{(showDeleteBtn || showCloseBtn) && 
+					<Footer justifyContent="flex-end">
+						{showDeleteBtn && 
+							<Row flex={1} justifyContent="flex-start">
+								<Button
+									key="deleteBtn"
+									onPress={onDelete}
+									bg="warning"
+									_hover={{
+										bg: 'warningHover',
+									}}
+									color="#fff"
+								>Delete</Button>
+							</Row>}
+						{showCloseBtn && 
+							<Button.Group space={2}>
+								<Button
+									key="closeBtn"
+									onPress={onClose}
+									color="#fff"
+								>Close</Button>
+							</Button.Group>}
+					</Footer>}
 			</Column>;
 }

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

@@ -34,7 +34,6 @@ export function ComboComponent(props) {
 			tooltip = null,
 			menuMinWidth = 150,
 			disableDirectEntry = false,
-			disablePagination = true,
 			hideMenuOnSelection = true,
 			_input = {},
 			isEditor = false,
@@ -55,7 +54,7 @@ export function ComboComponent(props) {
 			selectionMode,
 			selectNext,
 			selectPrev,
-			getDisplayFromSelection,
+			getDisplayValuesFromSelection,
 
 			tooltipPlacement = 'bottom',
 		} = props,
@@ -90,16 +89,12 @@ export function ComboComponent(props) {
 					if (rectTop !== top) {
 						setTop(rectTop);
 					}
-					setHeight(null);
 				} else {
 					// Menu is above the combo
-
-					const rectTop = rect.top -200;
+					const rectTop = rect.top - styles.FORM_COMBO_MENU_HEIGHT;
 					if (rectTop !== top) {
 						setTop(rectTop);
 					}
-
-					setHeight(200);
 				}
 				if (rect.left !== left) {
 					setLeft(rect.left);
@@ -322,7 +317,7 @@ export function ComboComponent(props) {
 				if (found) {
 					const
 						newSelection = [found],
-						newTextValue = getDisplayFromSelection(newSelection);
+						newTextValue = getDisplayValuesFromSelection(newSelection);
 
 					setTextValue(newTextValue);
 					setSelection(newSelection);
@@ -355,7 +350,7 @@ export function ComboComponent(props) {
 		}
 
 		// Adjust text input to match selection
-		let localTextValue = getDisplayFromSelection(selection);
+		let localTextValue = getDisplayValuesFromSelection(selection);
 		if (!_.isEqual(localTextValue, textValue)) {
 			setTextValue(localTextValue);
 		}
@@ -489,14 +484,12 @@ export function ComboComponent(props) {
 										top={top + 'px'}
 										left={left + 'px'}
 										w={width + 'px'}
-										h={height ? height + 'px' : null}
 										minWidth={menuMinWidth}
 										overflow="auto"
 										bg="#fff"
 									>
 										<Popover.Body
 											ref={menuRef}
-											maxHeight={200}
 											borderWidth={1}
 											borderColor='trueGray.400'
 											borderTopWidth={0}
@@ -505,8 +498,6 @@ export function ComboComponent(props) {
 											<WhichGrid
 												showHeaders={false}
 												showHovers={true}
-												pageSize={100}
-												disableAdjustingPageSizeToHeight={true}
 												shadow={1}
 												getRowProps={() => {
 													return {
@@ -518,9 +509,11 @@ export function ComboComponent(props) {
 														w: '100%',
 													};
 												}}
+												allowToggleSelection={true}
+												disableAdjustingPageSizeToHeight={true}
 												{...props}
+												h={styles.FORM_COMBO_MENU_HEIGHT + 'px'}
 												disablePresetButtons={!isEditor}
-												disablePagination={disablePagination}
 												setSelection={(selection) => {
 													// Decorator fn to add local functionality
 													// Close the menu when row is selected on grid

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

@@ -1,12 +1,23 @@
 import {
 	SELECTION_MODE_MULTI,
 } from '../../../../Constants/Selection.js';
-import Combo from './Combo.js';
+import Combo, { ComboEditor } from './Combo.js';
 
-export default function Tag(props) {
-	return <Combo
-				selectionMode={SELECTION_MODE_MULTI}
-				disableDirectEntry={true}
-				{...props}
-			/>;
+function withAdditionalProps(WrappedComponent) {
+	return (props) => {
+		return <WrappedComponent
+					selectionMode={SELECTION_MODE_MULTI}
+					valueIsAlwaysArray={true}
+					valueAsIdAndText={true}
+					valueAsStringifiedJson={true}
+					disableDirectEntry={true}
+					pageSize={500}
+					{...props}
+				/>;
+	};
 }
+
+const Tag = withAdditionalProps(Combo);
+export const TagEditor = withAdditionalProps(ComboEditor);
+
+export default Tag;

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

@@ -4,7 +4,6 @@ import {
 } from 'native-base';
 import UiGlobals from '../../../UiGlobals.js';
 import withTooltip from '../../Hoc/withTooltip.js';
-import withValue from '../../Hoc/withValue.js';
 
 const
 	TextElement = (props) => {
@@ -21,7 +20,7 @@ const
 					{...props}
 				>{props.value}</Text>;
 	},
-	TextField = withValue(TextElement);
+	TextField = TextElement; // NOT using withValue on Text element, as this element is simply for display purposes!
 
 // Tooltip needs us to forwardRef
 export default withTooltip(React.forwardRef((props, ref) => {

package/src/Components/Form/Form.js

@@ -82,6 +82,7 @@ function Form(props) {
 			
 			// withEditor
 			isEditorViewOnly = false,
+			isSaving = false,
 			editorMode,
 			onCancel,
 			onSave,
@@ -102,6 +103,7 @@ function Form(props) {
 		isMultiple = _.isArray(record),
 		isSingle = !isMultiple, // for convenience
 		forceUpdate = useForceUpdate(),
+		[previousRecord, setPreviousRecord] = useState(record),
 		initialValues =  _.merge(startingValues, (record && !record.isDestroyed ? record.submitValues : {})),
 		defaultValues = isMultiple ? getNullFieldValues(initialValues, Repository) : initialValues, // when multiple entities, set all default values to null
 		{
@@ -162,6 +164,7 @@ function Form(props) {
 						renderer,
 						w,
 						flex,
+						useSelectorId = false,
 					} = config;
 
 				if (!isEditable) {
@@ -213,6 +216,11 @@ function Form(props) {
 											}
 											const Element = getComponentFromType(editor);
 
+											if (useSelectorId) {
+												editorProps.selectorId = selectorId;
+												editorProps.selectorSelected = editorProps;
+											}
+											
 											let element = <Element
 																name={name}
 																value={value}
@@ -223,8 +231,6 @@ function Form(props) {
 																	}
 																}}
 																onBlur={onBlur}
-																selectorId={selectorId}
-																selectorSelected={selectorSelected}
 																flex={1}
 																{...editorProps}
 																// {...defaults}
@@ -261,6 +267,7 @@ function Form(props) {
 					label,
 					items,
 					onChange: onEditorChange,
+					useSelectorId = false,
 					...propsToPass
 				} = item;
 			let editorTypeProps = {};
@@ -365,6 +372,11 @@ function Form(props) {
 							if (isValidElement(Element)) {
 								throw new Error('Should not yet be valid React element. Did you use <Element> instead of () => <Element> when defining it?')
 							}
+
+							if (useSelectorId) {
+								editorTypeProps.selectorId = selectorId;
+								editorTypeProps.selectorSelected = editorProps;
+							}
 							let element = <Element
 												name={name}
 												value={value}
@@ -375,8 +387,6 @@ function Form(props) {
 													}
 												}}
 												onBlur={onBlur}
-												selectorId={selectorId}
-												selectorSelected={selectorSelected}
 												flex={1}
 												{...defaults}
 												{...propsToPass}
@@ -420,12 +430,16 @@ function Form(props) {
 						selectorId,
 						...propsToPass
 					} = item;
+					if (!propsToPass.h) {
+						propsToPass.h = 400;
+					}
 					const
 						Element = getComponentFromType(type),
 						element = <Element
 										selectorId={selectorId}
 										selectorSelected={selectorSelected || record}
 										flex={1}
+										uniqueRepository={true}
 										{...propsToPass}
 									/>;
 					if (title) {
@@ -444,8 +458,23 @@ function Form(props) {
 			if (editorType === EDITOR_TYPE__INLINE) {
 				alert(errors.message);
 			}
+		},
+		onSaveDecorated = async (data, e) => {
+			// reset the form after a save
+			const result = await onSave(data, e);
+			if (result) {
+				const values = record.submitValues;
+				reset(values);
+			}
 		};
 
+	useEffect(() => {
+		if (record !== previousRecord) {
+			setPreviousRecord(record);
+			reset(defaultValues);
+		}
+	}, [record]);
+
 	useEffect(() => {
 		if (!Repository) {
 			return () => {};
@@ -487,6 +516,13 @@ function Form(props) {
 		sizeProps.maxHeight = maxHeight;
 	}
 
+	const savingProps = {};
+	if (isSaving) {
+		savingProps.borderTopWidth = 2;
+		savingProps.borderTopColor = '#f00';
+	}
+
+
 	let formComponents,
 		editor;
 	if (editorType === EDITOR_TYPE__INLINE) {
@@ -570,7 +606,7 @@ function Form(props) {
 				
 				{editor}
 
-				<Footer justifyContent="flex-end" {...footerProps}>
+				<Footer justifyContent="flex-end" {...footerProps}  {...savingProps}>
 					{onDelete && editorMode === EDITOR_MODE__EDIT && 
 						<Row flex={1} justifyContent="flex-start">
 							<Button
@@ -603,11 +639,11 @@ function Form(props) {
 													>Cancel</Button>}
 						{!isEditorViewOnly && onSave && <Button
 														key="saveBtn"
-														onPress={(e) => handleSubmit(onSave, onSubmitError)(e)}
+														onPress={(e) => handleSubmit(onSaveDecorated, onSubmitError)(e)}
 														isDisabled={isSaveDisabled}
 														color="#fff"
 													>{editorMode === EDITOR_MODE__ADD ? 'Add' : 'Save'}</Button>}
-						{isEditorViewOnly && onClose && <Button
+						{isEditorViewOnly && onClose && editorType !== EDITOR_TYPE__SIDE && <Button
 														key="closeBtn"
 														onPress={onClose}
 														color="#fff"

package/src/Components/Grid/Grid.js

@@ -1,4 +1,4 @@
-import React, { useState, useEffect, useRef, useMemo, } from 'react';
+import React, { useState, useEffect, useRef, useMemo, useCallback, } from 'react';
 import {
 	Column,
 	FlatList,
@@ -86,7 +86,7 @@ function GridComponent(props) {
 			canColumnsReorder = true,
 			canColumnsResize = true,
 			canRowsReorder = false,
-			allowToggleSelection = true, // i.e. single click with no shift key toggles the selection of the item clicked on
+			allowToggleSelection = false, // i.e. single click with no shift key toggles the selection of the item clicked on
 			disableBottomToolbar = false,
 			disablePagination = false,
 			bottomToolbar = 'pagination',
@@ -104,6 +104,7 @@ function GridComponent(props) {
 			onDuplicate,
 			onReset,
 			onContextMenu,
+			isAdding,
 
 			// withData
 			Repository,
@@ -141,6 +142,7 @@ function GridComponent(props) {
 		styles = UiGlobals.styles,
 		forceUpdate = useForceUpdate(),
 		gridRef = useRef(),
+		isAddingRef = useRef(),
 		[isReady, setIsReady] = useState(false),
 		[isLoading, setIsLoading] = useState(false),
 		[localColumnsConfig, setLocalColumnsConfigRaw] = useState([]),
@@ -162,6 +164,10 @@ function GridComponent(props) {
 					shiftKey,
 					metaKey,
 				 } = e;
+			let allowToggle = allowToggleSelection;
+			if (metaKey) {
+				allowToggle = true;
+			}
 				
 			if (selectionMode === SELECTION_MODE_MULTI) {
 				if (shiftKey) {
@@ -170,28 +176,18 @@ function GridComponent(props) {
 					} else {
 						selectRangeTo(item);
 					}
-				} else if (metaKey) {
-					if (isInSelection(item)) {
-						// Already selected
-						if (allowToggleSelection) {
-							removeFromSelection(item);
-						} else {
-							// Do nothing.
-						}
-					} else {
-						addToSelection(item);
-					}
 				} else {
-					if (isInSelection(item)) {
-						// Already selected
-						if (allowToggleSelection) {
+					if (allowToggle) {
+						if (isInSelection(item)) {
 							removeFromSelection(item);
 						} else {
-							// Do nothing.
+							addToSelection(item);
 						}
 					} else {
-						// select just this one
-						setSelection([item]);
+						if (!isInSelection(item)) {
+							// select just this one
+							setSelection([item]);
+						}
 					}
 				}
 			} else {
@@ -199,7 +195,7 @@ function GridComponent(props) {
 				let newSelection = selection;
 				if (isInSelection(item)) {
 					// Already selected
-					if (allowToggleSelection) {
+					if (allowToggle) {
 						// Create empty selection
 						newSelection = [];
 					} else {
@@ -616,41 +612,34 @@ function GridComponent(props) {
 			setDragRowSlot(null);
 		},
 		onLayout = (e) => {
-			if (disableAdjustingPageSizeToHeight || !Repository) {
+			if (disableAdjustingPageSizeToHeight || !Repository || CURRENT_MODE !== UI_MODE_WEB || !gridRef.current || isAddingRef.current) {
 				return;
 			}
-			const {
-					nativeEvent: {
-						layout,
-						target,
-					},
-				} = e;
-			let pageSize;
-			if (CURRENT_MODE === UI_MODE_WEB) {
-				const
-					targetBoundingBox = target.getBoundingClientRect(),
-					targetHeight = targetBoundingBox.height,
-					firstRow = target.children[0]?.children[0]?.children[0]?.children[0]?.children[0];
-				if (firstRow) {
-					const
-						rowBoundingBox = firstRow.getBoundingClientRect(),
-						rowHeight = rowBoundingBox.height,
-						rowsPerTarget = Math.floor(targetHeight / rowHeight);
-					pageSize = rowsPerTarget;
-					if (showHeaders) {
-						pageSize--;
-					}
-					if (bottomToolbar) {
-						pageSize--;
-					}
-				}
+
+			const
+				gr = gridRef.current,
+				scrollableNode = gr.getScrollableNode(),
+				scrollableNodeBoundingBox = scrollableNode.getBoundingClientRect(),
+				scrollableNodeHeight = scrollableNodeBoundingBox.height,
+				firstRow = scrollableNode.children[0].children[showHeaders ? 1: 0];
+
+			if (!firstRow) {
+				return;
 			}
-			
-			if (pageSize) {
+
+			const
+				rowHeight = firstRow.getBoundingClientRect().height,
+				rowsPerContainer = Math.floor(scrollableNodeHeight / rowHeight);
+			let pageSize = rowsPerContainer;
+			if (showHeaders) {
+				pageSize--;
+			}
+			if (pageSize !== Repository.pageSize) {
 				Repository.setPageSize(pageSize);
 			}
-		};
-		
+		},
+		debouncedOnLayout = useCallback(_.debounce(onLayout, 500), []);
+
 	useEffect(() => {
 
 		const calculateLocalColumnsConfig = () => {
@@ -778,6 +767,9 @@ function GridComponent(props) {
 
 	}, [selectorId, selectorSelected]);
 
+
+	isAddingRef.current = isAdding;
+
 	const footerToolbarItemComponents = useMemo(() => getFooterToolbarItems(), [additionalToolbarButtons, isDragMode]);
 
 	if (!isReady) {
@@ -811,23 +803,24 @@ function GridComponent(props) {
 	} else {
 		sizeProps.flex = flex ?? 1;
 	}
+
 	return <Column
 				{...testProps('Grid')}
 				w="100%"
 				bg={bg}
 				borderWidth={styles.GRID_BORDER_WIDTH}
 				borderColor={styles.GRID_BORDER_COLOR}
-				onLayout={onLayout}
+				onLayout={debouncedOnLayout}
 				{...sizeProps}
 			>
 				{topToolbar}
 
-				<Column w="100%" flex={1} borderTopWidth={isLoading ? 2 : 1} borderTopColor={isLoading ? '#f00' : 'trueGray.300'} onClick={() => {
+				<Column w="100%" flex={1} minHeight={40} borderTopWidth={isLoading ? 2 : 1} borderTopColor={isLoading ? '#f00' : 'trueGray.300'} onClick={() => {
 					if (!isDragMode && !isInlineEditorShown) {
 						deselectAll();
 					}
 				}}>
-					{!entities.length ? <NoRecordsFound text={noneFoundText} onRefresh={onRefresh} /> :
+					{!entities?.length ? <NoRecordsFound text={noneFoundText} onRefresh={onRefresh} /> :
 						<FlatList
 							ref={gridRef}
 							// ListHeaderComponent={listHeaderComponent}

package/src/Components/Grid/GridHeaderRow.js

@@ -285,7 +285,7 @@ export default function GridHeaderRow(props) {
 
 				// These header Components should match the columns exactly
 				// so we can drag/drop them to control the columns.
-				const headerColumns = _.map(localColumnsConfig, (config, ix) => {
+				const headerColumns = _.map(localColumnsConfig, (config, ix, all) => {
 					let {
 							columnId,
 							fieldName,
@@ -305,15 +305,21 @@ export default function GridHeaderRow(props) {
 							borderRightColor: '#fff',
 						}
 
-					if (w) {
-						propsToPass.w = w;
-					} else if (flex) {
-						propsToPass.flex = flex;
-						propsToPass.minWidth = 100;
-					} else if (localColumnsConfig.length === 1) {
-						// Only one column and flex is not set
-						propsToPass.flex = 1;
-						if (!header) {
+					if (all.length === 1) {
+						propsToPass.w = '100%';
+						isReorderable = false;
+						isResizable = false;
+					} else {
+						if (w) {
+							propsToPass.w = w;
+						} else if (flex) {
+							propsToPass.flex = flex;
+							propsToPass.minWidth = 100;
+						} else if (localColumnsConfig.length === 1) {
+							// Only one column and flex is not set
+							propsToPass.flex = 1;
+							if (!header) {
+							}
 						}
 					}
 

package/src/Components/Grid/GridRow.js

@@ -32,15 +32,19 @@ export default function GridRow(props) {
 		return useMemo(() => {
 			const renderColumns = (item) => {
 				if (_.isArray(columnsConfig)) {
-					return _.map(columnsConfig, (config, key) => {
+					return _.map(columnsConfig, (config, key, all) => {
 						const propsToPass = columnProps[key] || {};
-						if (config.w) {
-							propsToPass.w = config.w;
-						} else if (config.flex) {
-							propsToPass.flex = config.flex;
-							propsToPass.minWidth = 100;
+						if (all.length === 1) {
+							propsToPass.w = '100%';
 						} else {
-							propsToPass.flex = 1;
+							if (config.w) {
+								propsToPass.w = config.w;
+							} else if (config.flex) {
+								propsToPass.flex = config.flex;
+								propsToPass.minWidth = 100;
+							} else {
+								propsToPass.flex = 1;
+							}
 						}
 						propsToPass.p = 1;
 						propsToPass.justifyContent = 'center';

package/src/Components/Hoc/withEditor.js

@@ -16,7 +16,7 @@ export default function withEditor(WrappedComponent, isTree = false) {
 		const {
 				userCanEdit = true,
 				userCanView = true,
-				canEditorViewOnly = false,
+				canEditorViewOnly = false, // whether the editor can *ever* change state out of 'View' mode
 				disableAdd = false,
 				disableEdit = false,
 				disableDelete = false,
@@ -49,8 +49,10 @@ export default function withEditor(WrappedComponent, isTree = false) {
 			listeners = useRef({}),
 			editorStateRef = useRef(),
 			[currentRecord, setCurrentRecord] = useState(null),
+			[isAdding, setIsAdding] = useState(false),
+			[isSaving, setIsSaving] = useState(false),
 			[isEditorShown, setIsEditorShown] = useState(false),
-			[isEditorViewOnly, setIsEditorViewOnly] = useState(canEditorViewOnly),
+			[isEditorViewOnly, setIsEditorViewOnly] = useState(canEditorViewOnly), // current state of whether editor is in view-only mode
 			[lastSelection, setLastSelection] = useState(),
 			setSelectionDecorated = (newSelection) => {
 				function doIt() {
@@ -71,7 +73,7 @@ export default function withEditor(WrappedComponent, isTree = false) {
 				// forceUpdate(); // we don't want to get into an infinite loop of renders. Simply directly assign the listeners in every child render
 			},
 			onAdd = async () => {
-				const defaultValues = Repository.getSchema().model.defaultValues;
+				const defaultValues = Repository.getSchema().getDefaultValues();
 				let addValues = _.clone(defaultValues);
 
 				if (selectorId && !_.isEmpty(selectorSelected)) {
@@ -105,7 +107,10 @@ export default function withEditor(WrappedComponent, isTree = false) {
 				// Unmap the values, so we can input true originalData
 				addValues = Repository.unmapData(addValues);
 
+				setIsAdding(true);
+				setIsSaving(true);
 				const entity = await Repository.add(addValues, false, true);
+				setIsSaving(false);
 				setSelection([entity]);
 				setIsEditorViewOnly(false);
 				setEditorMode(EDITOR_MODE__ADD);
@@ -183,6 +188,7 @@ export default function withEditor(WrappedComponent, isTree = false) {
 				if (getListeners().onAfterDelete) {
 					await getListeners().onAfterDelete(selection);
 				}
+				setSelection([]);
 				if (cb) {
 					cb();
 				}
@@ -244,12 +250,19 @@ export default function withEditor(WrappedComponent, isTree = false) {
 					await getListeners().onBeforeEditSave(what);
 				}
 
+				setIsSaving(true);
 				await Repository.save();
-				setIsEditorShown(false);
+				setIsSaving(false);
+
+				setIsAdding(false);
+				setEditorMode(EDITOR_MODE__EDIT);
+				// setIsEditorShown(false);
 				
 				if (getListeners().onAfterEdit) {
 					await getListeners().onAfterEdit(what);
 				}
+
+				return true;
 			},
 			onEditorCancel =  () => {
 				async function doIt() {
@@ -259,6 +272,8 @@ export default function withEditor(WrappedComponent, isTree = false) {
 					if (isSingle && isPhantom) {
 						await deleteRecord();
 					}
+					
+					setIsAdding(false);
 					setEditorMode(EDITOR_MODE__VIEW);
 					setIsEditorShown(false);
 				}
@@ -330,6 +345,8 @@ export default function withEditor(WrappedComponent, isTree = false) {
 					setCurrentRecord={setCurrentRecord}
 					isEditorShown={isEditorShown}
 					isEditorViewOnly={isEditorViewOnly}
+					isAdding={isAdding}
+					isSaving={isSaving}
 					editorMode={editorMode}
 					onEditMode={onEditMode}
 					onViewMode={onViewMode}

package/src/Components/Hoc/withFilters.js

@@ -59,7 +59,7 @@ export default function withFilters(WrappedComponent) {
 					defaultFilters: modelDefaultFilters,
 					ancillaryFilters: modelAncillaryFilters,
 				} = Repository.getSchema().model,
-				id = useId(),
+				id = props.id || useId(),
 
 				// determine the starting filters
 				startingFilters = !_.isEmpty(customFilters) ? customFilters : // custom filters override component filters
@@ -235,6 +235,9 @@ export default function withFilters(WrappedComponent) {
 					const
 						filterProps = {
 							mx: 1,
+							disableAdjustingPageSizeToHeight: true,
+							pageSize: 20,
+							uniqueRepository: true,
 						},
 						filterElements = [];
 					_.each(filters, (filter, ix) => {

package/src/Components/Hoc/withPresetButtons.js

@@ -62,7 +62,6 @@ export default function withPresetButtons(WrappedComponent, isGrid = false) {
 
 				// withSelection
 				selection,
-				setSelection,
 
 				// parent container
 				selectorId,
@@ -87,7 +86,7 @@ export default function withPresetButtons(WrappedComponent, isGrid = false) {
 						}
 						break;
 					case 'edit':
-						if (disableEdit || canEditorViewOnly) {
+						if (disableEdit || canEditorViewOnly || isSideEditor) {
 							isDisabled = true;
 						}
 						break;
@@ -251,7 +250,7 @@ export default function withPresetButtons(WrappedComponent, isGrid = false) {
 				}
 	
 				// Send it to clipboard
-				navigator.clipboard.writeText(text);
+				navigator?.clipboard.writeText(text);
 			};
 			// onPrint = () => {
 			// 	debugger;

package/src/Components/Hoc/withSelection.js

@@ -38,9 +38,14 @@ export default function withSelection(WrappedComponent) {
 				displayIx,
 			} = props,
 			usesWithValue = !!setValue,
-			[localSelection, setLocalSelection] = useState(selection || defaultSelection || []),
+			initialSelection = selection || defaultSelection || [],
+			[localSelection, setLocalSelection] = useState(initialSelection),
 			[isReady, setIsReady] = useState(selection || false), // if selection is already defined, or value is not null and we don't need to load repository, it's ready
 			setSelection = (selection) => {
+				if (_.isEqual(selection, localSelection)) {
+					return;
+				}
+
 				setLocalSelection(selection);
 				if (onChangeSelection) {
 					onChangeSelection(selection);
@@ -175,7 +180,7 @@ export default function withSelection(WrappedComponent) {
 				});
 				return found;
 			},
-			getIdFromSelection = () => {
+			getIdsFromLocalSelection = () => {
 				if (!localSelection[0]) {
 					return null;
 				}
@@ -190,7 +195,7 @@ export default function withSelection(WrappedComponent) {
 				}
 				return values;
 			},
-			getDisplayFromSelection = (selection) => {
+			getDisplayValuesFromLocalSelection = (selection) => {
 				if (!selection[0]) {
 					return '';
 				}
@@ -203,18 +208,17 @@ export default function withSelection(WrappedComponent) {
 						})
 						.join(', ');
 			},
-			conformValueToSelection = () => {
+			conformValueToLocalSelection = () => {
 				if (!setValue) {
 					return;
 				}
-				// Adjust the value to match the selection
-				const localValue = getIdFromSelection();
+				
+				const localValue = getIdsFromLocalSelection();
 				if (!_.isEqual(localValue, value)) {
 					setValue(localValue);
 				}
 			},
-			conformSelectionToValue = () => {
-				// adjust the selection to match the value
+			conformSelectionToValue = async () => {
 				let newSelection = [];
 				if (Repository) {
 					// Get entity or entities that match value
@@ -222,9 +226,20 @@ export default function withSelection(WrappedComponent) {
 						if (_.isArray(value)) {
 							newSelection = Repository.getBy((entity) => inArray(entity.id, value));
 						} else {
-							const found = Repository.getById(value);
+							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);
+								}
+
 							}
 						}
 					}
@@ -262,7 +277,8 @@ export default function withSelection(WrappedComponent) {
 
 			(async () => {
 
-				if (Repository && usesWithValue && !Repository.isLoaded && Repository.isRemote && !Repository.isAutoLoad && !Repository.isLoading) {
+				if (usesWithValue && Repository?.isRemote 
+					&& !Repository.isAutoLoad && !Repository.isLoaded && !Repository.isLoading) {
 					// on initialization, we can't conformSelectionToValue if the repository is not yet loaded, 
 					// so first load repo, then conform to value
 					await Repository.load();
@@ -270,7 +286,11 @@ export default function withSelection(WrappedComponent) {
 
 				if (usesWithValue && !_.isNil(value)) {
 
-					conformSelectionToValue();
+					await conformSelectionToValue();
+
+				} else if (!_.isEmpty(selection)) {
+
+					conformValueToLocalSelection();
 
 				} else if (autoSelectFirstItem) {
 					let newSelection = [];
@@ -289,7 +309,6 @@ export default function withSelection(WrappedComponent) {
 
 		}, []);
 
-
 		if (usesWithValue) {
 			useEffect(() => {
 				if (!isReady) {
@@ -298,15 +317,16 @@ export default function withSelection(WrappedComponent) {
 	
 				conformSelectionToValue();
 	
-			}, [value, isReady]);
+			}, [value]);
 	
 			useEffect(() => {
 				if (!isReady) {
 					return () => {};
 				}
 	
-				conformValueToSelection();
-			}, [selection, isReady]);
+				conformValueToLocalSelection();
+				
+			}, [selection]);
 		}
 
 		if (!isReady) {
@@ -325,8 +345,8 @@ export default function withSelection(WrappedComponent) {
 					deselectAll={deselectAll}
 					selectRangeTo={selectRangeTo}
 					isInSelection={isInSelection}
-					getIdFromSelection={getIdFromSelection}
-					getDisplayFromSelection={getDisplayFromSelection}
+					getIdsFromSelection={getIdsFromLocalSelection}
+					getDisplayValuesFromSelection={getDisplayValuesFromLocalSelection}
 				/>;
 	};
 }

package/src/Components/Hoc/withValue.js

@@ -1,5 +1,5 @@
 import { useState, useEffect, } from 'react';
-import isJson from '../../Functions/isJson.js';
+import natsort from 'natsort';
 import _ from 'lodash';
 
 // This HOC gives the component value props, primarily for a Form Field.
@@ -19,6 +19,9 @@ export default function withValue(WrappedComponent) {
 				onChangeValue,
 				value,
 				startingValue = null,
+				valueIsAlwaysArray = false,
+				valueAsIdAndText = false,
+				valueAsStringifiedJson = false,
 
 				// withData
 				Repository,
@@ -26,6 +29,39 @@ export default function withValue(WrappedComponent) {
 			} = props,
 			[localValue, setLocalValue] = useState(startingValue || value),
 			setValue = (newValue) => {
+				if (valueIsAlwaysArray && !_.isArray(newValue)) {
+					newValue = _.isNil(newValue) ? [] : [newValue];
+				}
+				if (_.isArray(newValue)) {
+					// TODO: sort by the sortProperty, whatever that is, instead of just value
+					newValue.sort(natsort()); // Only sort if we're using id/text arrangement. Otherwise, keep sort order as specified in Repository.
+				}
+				if (valueAsIdAndText) {
+					if (_.isArray(newValue)) {
+						newValue = _.map(newValue, (id) => {
+							if (_.isNil(id)) {
+								return id;
+							}
+							const record = Repository.getById(id);
+							return {
+								id: record.getId(),
+								text: record.getDisplayValue(),
+							};
+						})
+					} else {
+						if (!_.isNil(id)) {
+							const record = Repository.getById(newValue);
+							newValue = {
+								id: record.getId(),
+								text: record.getDisplayValue(),
+							};
+						}
+					}
+				}
+				if (valueAsStringifiedJson) {
+					newValue = JSON.stringify(newValue);
+				}
+
 				if (newValue === localValue) {
 					return;
 				}
@@ -33,10 +69,6 @@ export default function withValue(WrappedComponent) {
 				setLocalValue(newValue);
 				
 				if (onChangeValue) {
-					if (_.isArray(newValue)) {
-						// convert from inner value to outer value
-						newValue = JSON.stringify(newValue);
-					}
 					onChangeValue(newValue);
 				}
 			},
@@ -71,10 +103,26 @@ export default function withValue(WrappedComponent) {
 		}, [value]);
 
 		
+		// Convert localValue to normal JS primitives for field components
 		let convertedValue = localValue;
-		if (_.isString(localValue) && isJson(localValue) && !_.isNil(localValue)) {
-			// convert from outer value to inner value
-			convertedValue = JSON.parse(localValue);
+		if (_.isString(convertedValue) && valueAsStringifiedJson && !_.isNil(convertedValue)) {
+			convertedValue = JSON.parse(convertedValue);
+		}
+		if (valueIsAlwaysArray) {
+			if (_.isEmpty(convertedValue) || _.isNil(convertedValue)) {
+				convertedValue = null;
+			} else if (convertedValue.length === 1) {
+				convertedValue = convertedValue[0];
+			}
+		}
+		if (valueAsIdAndText && !_.isNil(convertedValue)) {
+			if (_.isArray(convertedValue)) {
+				convertedValue = _.map(convertedValue, (value) => {
+					return value?.id;
+				});
+			} else {
+				convertedValue = convertedValue?.id;
+			}
 		}
 
 		return <WrappedComponent

package/src/Components/Panel/Panel.js

@@ -9,10 +9,12 @@ import {
 	HORIZONTAL,
 	VERTICAL,
 } from '../../Constants/Directions.js';
+import Inflector from 'inflector-js';
 import Header from './Header.js';
 import Mask from './Mask.js';
 import withCollapsible from '../Hoc/withCollapsible.js';
 import emptyFn from '../../Functions/emptyFn.js';
+import UiGlobals from '../../UiGlobals.js';
 import _ from 'lodash';
 
 // Note on collapseDirections:
@@ -33,7 +35,7 @@ function Panel(props) {
 			onLayout = null,
 			
 			// Header
-			title = props.model,
+			title = UiGlobals.customInflect(Inflector.camel2words(Inflector.underscore(props.model))),
 			showHeader = true,
 			header = null,
 			isClosable = false,

package/src/Components/Screens/Manager.js

@@ -60,7 +60,7 @@ export default function ManagerScreen(props) {
 		whichComponent = sideModeComponent;
 	}
 
-	return <Column flex={1} w="100%">
+	return <Column maxHeight="100vh" overflow="hidden" flex={1} w="100%">
 				<Row
 					h="80px"
 					py={2}
@@ -89,6 +89,8 @@ export default function ManagerScreen(props) {
 						tooltip="Side Editor"
 					/>
 				</Row>
+
 				{whichComponent}
+
 			</Column>;
 }

package/src/Constants/Styles.js

@@ -16,6 +16,7 @@ const defaults = {
 	FORM_COMBO_INPUT_FONTSIZE: DEFAULT_FONTSIZE,
 	FORM_COMBO_INPUT_BG: WHITE,
 	FORM_COMBO_INPUT_FOCUS_BG: FOCUS,
+	FORM_COMBO_MENU_HEIGHT: 250,
 	FORM_COMBO_TRIGGER_BG: WHITE,
 	FORM_COMBO_TRIGGER_HOVER_BG: 'trueGray.300',
 	FORM_DATE_ICON_BG: 'primary.200',

package/src/Functions/setCustomInflector.js

@@ -0,0 +1,6 @@
+import UiGlobals from '../UiGlobals.js';
+import _ from 'lodash';
+
+export default function setCustomInflector(customInflector) {
+	UiGlobals.customInflect = customInflector;
+}

package/src/PlatformImports/Web/Attachments.js

@@ -49,7 +49,7 @@ function AttachmentsElement(props) {
 
 		} = props,
 		styles = UiGlobals.styles,
-		model = selectorSelected?.repository.name,
+		model = selectorSelected?.repository?.name,
 		modelid = selectorSelected?.id,
 		[isReady, setIsReady] = useState(false),
 		[isUploading, setIsUploading] = useState(false),

package/src/UiGlobals.js

@@ -4,6 +4,7 @@ import _ from 'lodash';
 
 const Globals = {
 	mode: CURRENT_MODE,
+	customInflect: (str) => str,
 };
 
 export default Globals;

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

@@ -1,11 +0,0 @@
-import {
-	SELECTION_MODE_MULTI,
-} from '../../../Constants/Selection.js';
-import Combo from './Combo/Combo.js';
-
-export default function Tag(props) {
-	return <Combo
-				selectionMode={SELECTION_MODE_MULTI}
-				{...props}
-			/>;
-}