@onehat/ui 0.3.24 → 0.3.25

package/package.json

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

package/src/Components/Form/FieldSet.js

@@ -29,7 +29,7 @@ export default function FieldSet(props) {
 				borderWidth={1}
 				borderColor="trueGray.400"
 				bg={styles.FORM_FIELDSET_BG}
-				m={2}
+				mb={4}
 				pb={1}
 				{...propsToPass}
 			>

package/src/Components/Form/Form.js

@@ -552,15 +552,15 @@ function Form(props) {
 		formComponents = buildFromItems();
 		const formAncillaryComponents = buildAncillary();
 		editor = <>
-					<Row>{formComponents}</Row>
+					<Column p={4}>{formComponents}</Column>
 					<Column pt={4}>{formAncillaryComponents}</Column>
 				</>;
 	} else {
 		formComponents = buildFromItems();
 		const formAncillaryComponents = buildAncillary();
 		editor = <ScrollView _web={{ height: 1 }} width="100%" pb={1}>
-					<Row>{formComponents}</Row>
-					<Column pt={4}>{formAncillaryComponents}</Column>
+					<Column p={4}>{formComponents}</Column>
+					<Column m={2} pt={4}>{formAncillaryComponents}</Column>
 				</ScrollView>;
 	}
 
@@ -616,7 +616,7 @@ function Form(props) {
 					</Row>}
 				
 				{editor}
-
+				
 				<Footer justifyContent="flex-end" {...footerProps}  {...savingProps}>
 					{onDelete && editorMode === EDITOR_MODE__EDIT && isSingle &&
 						<Row flex={1} justifyContent="flex-start">

package/src/Components/Grid/Grid.js

@@ -195,7 +195,8 @@ function GridComponent(props) {
 				let newSelection = selection;
 				if (isInSelection(item)) {
 					// Already selected
-					if (allowToggle) {
+					const isSingle = selection.length === 1;
+					if (allowToggle || isSingle) {
 						// Create empty selection
 						newSelection = [];
 					} else {

package/src/Components/Viewer/Viewer.js

@@ -94,7 +94,17 @@ export default function Viewer(props) {
 				label = propertyDef.title;
 			}
 
-			const value = (record?.properties[name]?.displayValue) || null;
+			let value = record?.properties[name]?.displayValue || null;
+			const
+				schema = record?.repository.getSchema(),
+				propertyDefinition = schema?.getPropertyDefinition(name);
+			if (propertyDefinition?.isFk) {
+				// value above is the id, get the actual display value
+				const fkDisplayField = propertyDefinition.fkDisplayField;
+				if (record.properties[fkDisplayField]) {
+					value = record.properties[fkDisplayField].displayValue;
+				}
+			}
 			
 			let element = <Element
 								value={value}
@@ -107,7 +117,7 @@ export default function Viewer(props) {
 				}
 				element = <><Label {...labelProps}>{label}</Label>{element}</>;
 			}
-			return <Row key={ix} px={2} pb={1}>{element}</Row>;
+			return <Row key={ix}>{element}</Row>;
 		},
 		buildAncillary = () => {
 			const components = [];
@@ -154,7 +164,7 @@ export default function Viewer(props) {
 
 	return <Column flex={flex} {...props}>
 				<ScrollView width="100%" _web={{ height: 1 }}>
-					<Column m={2}>
+					<Column p={4}>
 						{onEditMode && <Row mb={4} justifyContent="flex-end">
 											<Button
 												key="editBtn"