@onehat/ui 0.4.7 → 0.4.9

package/package.json

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

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

@@ -681,6 +681,7 @@ export function ComboComponent(props) {
 			'disablePrint',
 			'selectorId',
 			'selectorSelected',
+			'selectorSelectedField',
 			'usePermissions',
 		]);
 		if (!Repository) {
@@ -1012,6 +1013,7 @@ export function ComboComponent(props) {
 		Combo-HStack
 		flex-1
 		h-[40px]
+		min-h-[40px]
 		justify-center
 		items-center
 	`;

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

@@ -245,6 +245,7 @@ function TagComponent(props) {
 	if (propsToPass.selectorId) {
 		_combo.selectorId = propsToPass.selectorId;
 		_combo.selectorSelected = propsToPass.selectorSelected;
+		_combo.selectorSelectedField = propsToPass.selectorSelectedField;
 	}
 
 	let className = `
@@ -272,8 +273,9 @@ function TagComponent(props) {
 	let valueBoxesClassName = `
 		Tag-valueBoxes-container
 		w-full
-		flex-wrap
+		min-h-[40px]
 		max-h-[200px]
+		flex-wrap
 		overflow-auto
 		border
 		border-grey-300

package/src/Components/Form/Form.js

@@ -125,6 +125,7 @@ function Form(props) {
 			// parent container
 			selectorId,
 			selectorSelected,
+			selectorSelectedField,
 
 			// withAlert
 			alert,
@@ -297,7 +298,7 @@ function Form(props) {
 						}
 					}
 
-					let elementClassName = '';
+					let elementClassName = 'Form-ElementFromColumnsConfig';
 					const
 						boxFlex = configPropsToPass.flex,
 						boxW = configPropsToPass.w;
@@ -365,6 +366,7 @@ function Form(props) {
 
 										if (useSelectorId) { // This causes the whole form to use selectorId
 											editorTypeProps.selectorId = selectorId;
+											editorTypeProps.selectorSelectedField = selectorSelectedField;
 										}
 										if (configPropsToPass.selectorId || editorTypeProps.selectorId) { // editorTypeProps.selectorId causes just this one field to use selectorId
 											if (_.isNil(configPropsToPass.selectorSelected)) {
@@ -376,7 +378,7 @@ function Form(props) {
 											dynamicProps = getDynamicProps({ fieldState, formSetValue, formGetValues, formState });
 										}
 
-										let elementClassName = 'Form-Element flex-1';
+										let elementClassName = 'Form-Element';
 										if (type.match(/Tag/)) {
 											elementClassName += ' overflow-auto';
 										}
@@ -552,9 +554,9 @@ function Form(props) {
 						}
 						delete itemPropsToPass.w;
 					}
-					if (!style.flex && !style.width) {
-						style.flex = 1;
-					}
+					// if (!style.flex && !style.width) {
+					// 	style.flex = 1;
+					// }
 					itemPropsToPass.className += ' Column';
 				}
 				if (type === 'Row') {
@@ -565,7 +567,7 @@ function Form(props) {
 					return buildFromItem(item, ix, {...defaults, ...itemDefaults});
 				});
 
-				let elementClassName = 'Form-Element';
+				let elementClassName = 'Form-ElementFromItem';
 				const defaultsClassName = defaults.className;
 				if (defaultsClassName) {
 					elementClassName += ' ' + defaultsClassName;
@@ -641,16 +643,16 @@ function Form(props) {
 					if (defaults?.labelWidth) {
 						style.width = defaults.labelWidth;
 					}
-					if (!style.width) {
-						style.width = '50px';
-					}
 					if (containerWidth > styles.FORM_STACK_ROW_THRESHOLD) {
-						element = <HStack className="Form-HStack2 w-full py-1">
+						if (!style.width) {
+							style.width = '100px';
+						}
+						element = <HStack className="Form-HStack1 w-full py-1">
 										<Label style={style}>{label}</Label>
 										{element}
 									</HStack>;
 					} else {
-						element = <VStack className="Form-VStack1 w-full py-1 mt-3">
+						element = <VStack className="Form-VStack2 w-full py-1 mt-3">
 										<Label style={style}>{label}</Label>
 										{element}
 									</VStack>;
@@ -710,6 +712,7 @@ function Form(props) {
 
 							if (useSelectorId) { // This causes the whole form to use selectorId
 								editorTypeProps.selectorId = selectorId;
+								editorTypeProps.selectorSelectedField = selectorSelectedField;
 							}
 							if (itemPropsToPass.selectorId || editorTypeProps.selectorId) { // editorTypeProps.selectorId causes just this one field to use selectorId
 								if (_.isNil(itemPropsToPass.selectorSelected)) {
@@ -721,7 +724,7 @@ function Form(props) {
 								dynamicProps = getDynamicProps({ fieldState, formSetValue, formGetValues, formState });
 							}
 
-							let elementClassName = 'Form-Element field-' + name + ' flex-1';
+							let elementClassName = 'Form-Element field-' + name + ' w-full';
 							const defaultsClassName = defaults.className;
 							if (defaultsClassName) {
 								elementClassName += ' ' + defaultsClassName;
@@ -771,7 +774,7 @@ function Form(props) {
 							if (message) {
 								message = <Text className="text-[#f00]">{message}</Text>;
 							}
-							element = <VStack className="Form-VStack4 pt-1 flex-1">
+							element = <VStack className="Form-VStack4 w-full pt-1">
 											{element}
 											{message}
 										</VStack>;
@@ -779,14 +782,14 @@ function Form(props) {
 							if (item.additionalEditButtons) {
 								const buttons = buildAdditionalButtons(item.additionalEditButtons, self, { fieldState, formSetValue, formGetValues, formState });
 								if (containerWidth > styles.FORM_STACK_ROW_THRESHOLD) {
-									element = <HStack className="Form-additionalEditButtons flex-1 flex-wrap">
+									element = <HStack className="Form-HStack5 w-full flex-wrap">
 													{element}
 													{buttons}
 												</HStack>;
 								} else {
-									element = <VStack className="Form-additionalEditButtons flex-1 w-full">
+									element = <VStack className="Form-VStack6 w-full">
 												{element}
-												<HStack className="Form-additionalEditButtons-VStack flex-1 w-full mt-1 flex-wrap">
+												<HStack className="Form-HStack7-VStack w-full mt-1 flex-wrap">
 													{buttons}
 												</HStack>
 											</VStack>;
@@ -816,22 +819,22 @@ function Form(props) {
 								if (defaults?.labelWidth) {
 									style.width = defaults.labelWidth;
 								}
-								if (!style.width) {
-									style.width = '50px';
-								}
 								if (containerWidth > styles.FORM_STACK_ROW_THRESHOLD) {
-									element = <HStack className="HStack3 flex-1">
+									if (!style.width) {
+										style.width = '100px';
+									}
+									element = <HStack className="Form-HStack8 w-full">
 								 					<Label style={style}>{requiredIndicator}{label}</Label>
 													{element}
 								 				</HStack>;
 								} else {
-									element = <VStack className="VStack3 flex-1 mt-3">
+									element = <VStack className="Form-VStack9 w-full mt-3">
 													<Label style={style}>{requiredIndicator}{label}</Label>
 													{element}
 												</VStack>;
 								}
 							} else if (disableLabels && requiredIndicator) {
-								element = <HStack className="HStack3 flex-1">
+								element = <HStack className="Form-HStack10 w-full">
 												{requiredIndicator}
 												{element}
 											</HStack>;
@@ -851,10 +854,11 @@ function Form(props) {
 							return <HStack
 										key={ix}
 										className={`
-											HStack4
+											Form-HStack11
+											min-h-[50px]
+											w-full
 											flex-none
 											pb-2
-											h-[50px]
 											${error ? 'bg-[#fdd]' : ''}
 										`}
 									>
@@ -873,6 +877,7 @@ function Form(props) {
 						title = null,
 						description = null,
 						selectorId,
+						selectorSelectedField,
 						...itemPropsToPass
 					} = item;
 					if (isMultiple && type !== 'Attachments') {
@@ -887,6 +892,7 @@ function Form(props) {
 						element = <Element
 										{...testProps('ancillary-' + type)}
 										selectorId={selectorId}
+										selectorSelectedField={selectorSelectedField}
 										selectorSelected={selectorSelected || record}
 										uniqueRepository={true}
 										parent={self}
@@ -898,6 +904,7 @@ function Form(props) {
 						}
 						title = <Text
 									className={`
+										Form-Ancillary-Title
 										font-bold
 										${styles.FORM_ANCILLARY_TITLE_FONTSIZE}
 									`}
@@ -906,6 +913,7 @@ function Form(props) {
 					if (description) {
 						description = <Text
 										className={`
+											Form-Ancillary-Description
 											italic
 											${styles.FORM_ANCILLARY_DESCRIPTION_FONTSIZE}
 										`}
@@ -914,6 +922,7 @@ function Form(props) {
 					components.push(<VStack
 										key={'ancillary-' + ix}
 										className={`
+											Form-VStack12
 											mx-1
 											my-3
 										`}

package/src/Components/Grid/Grid.js

@@ -107,7 +107,6 @@ const
 
 function GridComponent(props) {
 	const {
-
 			columnsConfig = [], // json configurations for each column
 			columnProps = {},
 			defaultHiddenColumns = [],
@@ -128,7 +127,6 @@ function GridComponent(props) {
 			hideNavColumn = true,
 			noneFoundText,
 			autoAdjustPageSizeToHeight = true,
-			disableSelectorSelected = false,
 			showRowExpander = false,
 			getExpandedRowContent,
 			showHeaders = true,
@@ -154,6 +152,22 @@ function GridComponent(props) {
 			alternateRowBackgrounds = true,
 			alternatingInterval = 2,
 			defaultRowHeight = 48,
+			
+			// The selectorSelected mechanism allows us to filter results of the primary model, (e.g. WorkOrders)
+			//   by the selection on the secondary model (e.g. Equipment). It's used on Grids, Trees, Forms, etc.
+			// The 'selectorId' is the name of the primary model's filter (e.g. 'WorkOrders.equipment_id').
+			//   which gets submitted to the server as a condition (e.g. 'conditions[WorkOrders.equipment_id]').
+			// The 'selectorSelected' is the Entity on the secondary model which is selected (e.g. Equipment).
+			// The 'selectorSelectedField' is the field on the secondary model to use as the value for the filter
+			//   (e.g. 'fleet_id'). If not given, it defaults to 'id'.
+			// It can be disabled altogether for a specific grid ('disableSelectorSelected'), and configured
+			//   so that no selection means no results ('noSelectorMeansNoResults').
+
+			selectorId,
+			selectorSelected,
+			selectorSelectedField = 'id',
+			noSelectorMeansNoResults = false,
+			disableSelectorSelected = false,
 
 			// withComponent
 			self,
@@ -201,16 +215,11 @@ function GridComponent(props) {
 			deselectAll,
 			selectRangeTo,
 			isInSelection,
-			noSelectorMeansNoResults = false,
 			selectNext,
 			selectPrev,
 			addNextToSelection,
 			addPrevToSelection,
 
-			// DataMgt
-			selectorId,
-			selectorSelected,
-
 			// withInlineEditor
 			inlineEditor = null,
 			isInlineEditorShown = false,
@@ -231,6 +240,7 @@ function GridComponent(props) {
 		expandedRowsRef = useRef({}),
 		cachedDragElements = useRef(),
 		dragSelectionRef = useRef([]),
+		previousSelectorId = useRef(),
 		[isInited, setIsInited] = useState(false),
 		[isReady, setIsReady] = useState(false),
 		[isLoading, setIsLoading] = useState(false),
@@ -354,7 +364,7 @@ function GridComponent(props) {
 					onPress={() => setIsReorderMode(!isReorderMode)}
 					icon={isReorderMode ? NoReorderRows : ReorderRows}
 					_icon={{
-						className: styles.GRID_TOOLBAR_ITEMS_COLOR,
+						className: styles.TOOLBAR_ITEMS_COLOR,
 					}}
 					tooltip="Reorder Rows"
 				/>);
@@ -455,28 +465,36 @@ function GridComponent(props) {
 							onContextMenu(item, e, selection);
 						}
 					}}
-					className="flex-row grow-1">
+					className="flex-row grow">
 					{({
 						hovered,
 						focused,
 						pressed,
 					}) => {
 						if (isHeaderRow) {
-							return <GridHeaderRow
-										Repository={Repository}
-										columnsConfig={localColumnsConfig}
-										setColumnsConfig={setLocalColumnsConfig}
-										hideNavColumn={hideNavColumn}
-										canColumnsSort={canColumnsSort}
-										canColumnsReorder={canColumnsReorder}
-										canColumnsResize={canColumnsResize}
-										setSelection={setSelection}
-										gridRef={gridRef}
-										isHovered={hovered}
-										isInlineEditorShown={isInlineEditorShown}
-										areRowsDragSource={areRowsDragSource}
-										showColumnsSelector={showColumnsSelector}
-									/>;
+							let headerRow = <GridHeaderRow
+												Repository={Repository}
+												columnsConfig={localColumnsConfig}
+												setColumnsConfig={setLocalColumnsConfig}
+												hideNavColumn={hideNavColumn}
+												canColumnsSort={canColumnsSort}
+												canColumnsReorder={canColumnsReorder}
+												canColumnsResize={canColumnsResize}
+												setSelection={setSelection}
+												gridRef={gridRef}
+												isHovered={hovered}
+												isInlineEditorShown={isInlineEditorShown}
+												areRowsDragSource={areRowsDragSource}
+												showColumnsSelector={showColumnsSelector}
+											/>;
+							if (showRowExpander) {
+								// align the header row to content rows
+								headerRow = <HStack className="">
+												<Box className="w-[40px]"></Box>
+												{headerRow}
+											</HStack>;
+							}
+							return headerRow;
 						}
 
 						const
@@ -561,15 +579,29 @@ function GridComponent(props) {
 
 			if (showRowExpander && !isHeaderRow) {
 				const isExpanded = getIsExpanded(index);
-				rowComponent = <VStack>
-									<HStack>
+				let className = `
+					Grid-rowExpander
+					w-full
+					flex-none
+				`;
+				if (rowProps?.className) {
+					className += ' ' + rowProps.className;
+				}
+				rowComponent = <VStack className={className}>
+									<HStack
+										className={`
+											Grid-rowExpander-HStack
+											w-full
+											grow
+										`}
+									>
 										<ExpandButton
 											isExpanded={isExpanded}
 											onToggle={() => setIsExpanded(index, !isExpanded)}
 											_icon={{
 												size: 'sm',
 											}}
-											className="py-0"
+											className="Grid-rowExpander-expandBtn py-0"
 											tooltip="Expand/Contract Row"
 										/>
 										{rowComponent}
@@ -760,11 +792,23 @@ function GridComponent(props) {
 			if (disableSelectorSelected || !selectorId) {
 				return
 			}
-			let id = selectorSelected?.id;
-			if (_.isEmpty(selectorSelected)) {
-				id = noSelectorMeansNoResults ? 'NO_MATCHES' : null;
+
+			if (previousSelectorId.current && selectorId !== previousSelectorId.current) {
+				Repository.pauseEvents();
+				Repository.clearFilters(previousSelectorId.current);
+				Repository.resumeEvents();
+			}
+			previousSelectorId.current = selectorId;
+
+			let value = null;
+			if (selectorSelected) {
+				value = selectorSelected[selectorSelectedField];
 			}
-			Repository.filter(selectorId, id, false); // so it doesn't clear existing filters
+			if (noSelectorMeansNoResults && _.isEmpty(selectorSelected)) {
+				value = 'NO_MATCHES';
+			}
+
+			Repository.filter(selectorId, value, false); // false so it doesn't clear existing filters
 		},
 		onGridKeyDown = (e) => {
 			if (isInlineEditorShown) {
@@ -1035,7 +1079,7 @@ function GridComponent(props) {
 
 		applySelectorSelected();
 
-	}, [selectorSelected]);
+	}, [selectorId, selectorSelected]);
 
 	if (canUser && !canUser('view')) {
 		return <Unauthorized />;
@@ -1205,6 +1249,7 @@ function GridComponent(props) {
 					className={`
 						gridContainer
 						w-full
+						h-full
 						flex-1
 						min-h-[40px]
 						${gridContainerBorderClassName}
@@ -1221,7 +1266,8 @@ function GridComponent(props) {
 		grid = <Box
 					ref={dropTargetRef}
 					className={`
-						dropTarget
+						Grid-dropTarget
+						h-full
 						w-full
 						border-[#0ff]
 						${canDrop && isOver ? "border-[4px]" : "border-[0px]"}

package/src/Components/Grid/GridRow.js

@@ -315,6 +315,9 @@ function GridRow(props) {
 		} else {
 			rowClassName += ' border-b border-b-grey-100';
 		}
+		if (rowProps?.className) {
+			rowClassName += ' ' + rowProps.className;
+		}
 		return <HStackNative
 					{...testProps('row' + (isSelected ? '-selected' : ''))}
 					{...rowProps}
@@ -337,6 +340,7 @@ function GridRow(props) {
 		isInlineEditorShown,
 		isSelected,
 		isHovered,
+		isOver,
 		index,
 		dragSourceRef,
 		dropTargetRef,

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

@@ -59,6 +59,7 @@ export default function withSecondaryEditor(WrappedComponent, isTree = false) {
 				// parent container
 				secondarySelectorId,
 				secondarySelectorSelected,
+				secondarySelectorSelectedField = 'id',
 
 				// withSecondaryData
 				SecondaryRepository,
@@ -149,7 +150,7 @@ export default function withSecondaryEditor(WrappedComponent, isTree = false) {
 				}
 
 				if (secondarySelectorId && !_.isEmpty(secondarySelectorSelected)) {
-					addValues[secondarySelectorId] = secondarySelectorSelected.id;
+					addValues[secondarySelectorId] = secondarySelectorSelected[secondarySelectorSelectedField];
 				}
 
 				if (getNewEntityDisplayValue()) {

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

@@ -35,6 +35,7 @@ export default function withSecondarySideEditor(WrappedComponent, isTree = false
 				// pull these out, as we don't want them going to the Editor
 				secondarySelectorId,
 				secondarySelectorSelected,
+				secondarySelectorSelectedField,
 				
 				...propsToPass
 			} = props;

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

@@ -39,6 +39,7 @@ export default function withSecondaryWindowedEditor(WrappedComponent, isTree = f
 				// pull these out, as we don't want them going to the SecondaryEditor
 				secondarySelectorId,
 				secondarySelectorSelected,
+				secondarySelectorSelectedField,
 				h,
 
 				...propsToPass

package/src/Components/Hoc/withEditor.js

@@ -58,6 +58,7 @@ export default function withEditor(WrappedComponent, isTree = false) {
 				// parent container
 				selectorId,
 				selectorSelected,
+				selectorSelectedField = 'id',
 
 				// withData
 				Repository,
@@ -147,7 +148,7 @@ export default function withEditor(WrappedComponent, isTree = false) {
 				}
 
 				if (selectorId && !_.isEmpty(selectorSelected)) {
-					addValues[selectorId] = selectorSelected.id;
+					addValues[selectorId] = selectorSelected[selectorSelectedField];
 				}
 
 				if (getNewEntityDisplayValue()) {

package/src/Components/Hoc/withInlineEditor.js

@@ -35,6 +35,7 @@ export default function withInlineEditor(WrappedComponent, skipWrappers = false)
 				// pull these out, as we don't want them going to the Editor
 				selectorId,
 				selectorSelected,
+				selectorSelectedField,
 				h,
 
 				...propsToPass

package/src/Components/Hoc/withSideEditor.js

@@ -35,6 +35,7 @@ export default function withSideEditor(WrappedComponent, isTree = false) {
 				// pull these out, as we don't want them going to the Editor
 				selectorId,
 				selectorSelected,
+				selectorSelectedField,
 				style,
 				
 				...propsToPass

package/src/Components/Hoc/withWindowedEditor.js

@@ -56,6 +56,7 @@ export default function withWindowedEditor(WrappedComponent, isTree = false) {
 				// pull these out, as we don't want them going to the Editor
 				selectorId,
 				selectorSelected,
+				selectorSelectedField,
 				h,
 
 				...propsToPass

package/src/Components/Icons/Gauge.js

@@ -4,8 +4,8 @@ import { Path, Svg } from 'react-native-svg';
 
 const SvgComponent = createIcon({
 	Root: Svg,
-	viewBox: '0 0 10.46 10.46',
-	path: <Path d="M0 5.23C0 2.34 2.34 0 5.23 0s5.23 2.34 5.23 5.23-2.34 5.23-5.23 5.23S0 8.12 0 5.23zm5.89-3.27c0-.36-.29-.65-.65-.65s-.65.29-.65.65.29.65.65.65.65-.29.65-.65zM5.24 8.5c.72 0 1.31-.59 1.31-1.31 0-.36-.14-.68-.37-.91L7.49 3.3c.11-.25 0-.54-.25-.65s-.54 0-.65.25L5.28 5.88h-.04c-.72 0-1.31.59-1.31 1.31S4.52 8.5 5.24 8.5zM3.6 2.94c0-.36-.29-.65-.65-.65s-.65.29-.65.65.29.65.65.65.65-.29.65-.65zM1.96 5.88c.36 0 .65-.29.65-.65s-.29-.65-.65-.65-.65.29-.65.65.29.65.65.65zm7.19-.65c0-.36-.29-.65-.65-.65s-.65.29-.65.65.29.65.65.65.65-.29.65-.65z" />
+	viewBox: '0 0 512 512',
+	path: <Path d="M0 256a256 256 0 11512 0 256 256 0 11-512 0zm320 96c0-26.9-16.5-49.9-40-59.3V88c0-13.3-10.7-24-24-24s-24 10.7-24 24v204.7c-23.5 9.5-40 32.5-40 59.3 0 35.3 28.7 64 64 64s64-28.7 64-64zM144 176a32 32 0 100-64 32 32 0 100 64zm-16 80a32 32 0 10-64 0 32 32 0 1064 0zm288 32a32 32 0 100-64 32 32 0 100 64zm-16-144a32 32 0 10-64 0 32 32 0 1064 0z" />,
 });
 
 export default SvgComponent

package/src/Components/Toolbar/Pagination.js

@@ -61,6 +61,7 @@ export default function Pagination(props) {
 								{...testProps('showMoreBtn')}
 								key="showMoreBtn"
 								reference="showMoreBtn"
+								className="Pagination-showMoreBtn"
 								parent={self}
 								onPress={() => Repository.showMore()}
 								isDisabled={isDisabled}
@@ -70,6 +71,7 @@ export default function Pagination(props) {
 			if (!Repository.isLocal) {
 				items.push(<ReloadButton
 					key="reloadPageBtn"
+					className="Pagination-reloadPageBtn"
 					_icon={iconProps}
 					Repository={Repository}
 					self={self}
@@ -82,6 +84,7 @@ export default function Pagination(props) {
 								{...testProps('firstPageBtn')}
 								key="firstPageBtn"
 								reference="firstPageBtn"
+								className="Pagination-firstPageBtn"
 								parent={self}
 								isDisabled={isDisabled}
 								icon={AnglesLeft}
@@ -93,6 +96,7 @@ export default function Pagination(props) {
 								{...testProps('prevPageBtn')}
 								key="prevPageBtn"
 								reference="prevPageBtn"
+								className="Pagination-prevPageBtn"
 								parent={self}
 								isDisabled={isDisabled}
 								icon={AngleLeft}
@@ -101,31 +105,38 @@ export default function Pagination(props) {
 								tooltip="Previous Page"
 							/>);
 				if (!minimize) {
-					items.push(<HStack
-									key="pageSelector"
-									className={`
-										pageSelector
-										w-[100px]
-										mx-2
-										justify-center
-										items-center
-										bg-[#f00]
-									`}>
-									{/* <Text className="page mr-1">Page</Text>
-									<Input
-										{...testProps('pageInput')}
-										reference="pageInput"
-										parent={self}
-										keyboardType="numeric"
-										value={page?.toString()}
-										onChangeValue={(value) => Repository.setPage(value)}
-										maxValue={totalPages}
-										isDisabled={totalPages === 1}
-										className="pageInput w-[30px] text-center bg-grey-100"
-										tooltip="Set Page"
-									/>
-									<Text className="of ml-1">of {totalPages}</Text> */}
-								</HStack>);
+					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
+						`}
+						tooltip="Set Page"
+					/>);
+					items.push(<Text
+						key="totalPages"
+						className={`
+							Pagination-totalPages
+							whitespace-nowrap
+							inline-flex
+							mx-1
+						`}
+					>{`of ${totalPages}`}</Text>);
 				}
 
 				isDisabled = page === totalPages || totalPages <= 1;
@@ -133,6 +144,7 @@ export default function Pagination(props) {
 								{...testProps('nextPageBtn')}
 								key="nextPageBtn"
 								reference="nextPageBtn"
+								className="Pagination-nextPageBtn"
 								parent={self}
 								isDisabled={isDisabled}
 								icon={AngleRight}
@@ -144,6 +156,7 @@ export default function Pagination(props) {
 								{...testProps('lastPageBtn')}
 								key="lastPageBtn"
 								reference="lastPageBtn"
+								className="Pagination-lastPageBtn"
 								parent={self}
 								isDisabled={isDisabled}
 								icon={AnglesRight}
@@ -156,6 +169,7 @@ export default function Pagination(props) {
 			if (!Repository.isLocal) {
 				items.push(<ReloadButton
 					key="reloadPageBtn"
+					className="Pagination-reloadPageBtn"
 					_icon={iconProps}
 					Repository={Repository}
 					self={self}
@@ -178,13 +192,26 @@ export default function Pagination(props) {
 				}
 				items.push(<Text
 								key="pageDisplay"
-								className="pageDisplay ml-3 min-w-[200px]"
-							>Displaying {pageSpan} of {total}</Text>);
+								className={`
+									Pagination-pageDisplay
+									whitespace-nowrap
+									inline-flex
+									mx-1
+								`}
+							>{`Displaying ${pageSpan} of ${total}`}</Text>);
 			}
 		}
 		return <HStack
 					style={{ userSelect: 'none', }}
-					className="Pagination justify-start items-center px-2 "
+					className={`
+						Pagination
+						flex-none
+						gap-1
+						justify-start
+						items-center
+						px-2
+						mr-3
+					`}
 				>
 					{items}
 				</HStack>;

package/src/Components/Tree/Tree.js

@@ -114,6 +114,10 @@ function TreeComponent(props) {
 			initialSelection,
 			canRecordBeEdited,
 			onTreeLoad,
+			
+			selectorId,
+			selectorSelected,
+			selectorSelectedField = 'id',
 
 			// withComponent
 			self,
@@ -160,10 +164,6 @@ function TreeComponent(props) {
 			isInSelection,
 			noSelectorMeansNoResults = false,
 
-			// DataMgt
-			selectorId,
-			selectorSelected,
-
 		} = props,
 		styles = UiGlobals.styles,
 		forceUpdate = useForceUpdate(),
@@ -1275,7 +1275,7 @@ function TreeComponent(props) {
 			return () => {};
 		}
 		if (!disableSelectorSelected && selectorId) {
-			let id = selectorSelected?.id;
+			let id = selectorSelected?.[selectorSelectedField] ?? null;
 			if (_.isEmpty(selectorSelected)) {
 				id = noSelectorMeansNoResults ? 'NO_MATCHES' : null;
 			}

package/src/Components/Viewer/Viewer.js

@@ -62,6 +62,7 @@ function Viewer(props) {
 			// parent container
 			selectorId,
 			selectorSelected,
+			selectorSelectedField,
 
 		} = props,
 		scrollViewRef = useRef(),
@@ -150,9 +151,9 @@ function Viewer(props) {
 						}
 						delete itemPropsToPass.w;
 					}
-					if (!style.flex && !style.width) {
-						style.flex = 1;
-					}
+					// if (!style.flex && !style.width) {
+					// 	style.flex = 1;
+					// }
 					itemPropsToPass.className += ' Column';
 					// if (containerWidth < styles.FORM_ONE_COLUMN_THRESHOLD) {
 					// 	// everything is in one column
@@ -310,6 +311,7 @@ function Viewer(props) {
 										{...testProps('ancillary-' + type)}
 										selectorId={selectorId}
 										selectorSelected={selectorSelected || record}
+										selectorSelectedField={selectorSelectedField}
 										canEditorViewOnly={true}
 										canCrud={false}
 										uniqueRepository={true}

package/src/PlatformImports/Web/Attachments.js

@@ -89,6 +89,7 @@ function AttachmentsElement(props) {
 
 			// parentContainer
 			selectorSelected,
+			selectorSelectedField = 'id',
 
 			// withData
 			Repository,
@@ -100,7 +101,7 @@ function AttachmentsElement(props) {
 		} = props,
 		styles = UiGlobals.styles,
 		model = _.isArray(selectorSelected) && selectorSelected[0] ? selectorSelected[0].repository?.name : selectorSelected?.repository?.name,
-		modelidCalc = _.isArray(selectorSelected) ? _.map(selectorSelected, (entity) => entity.id) : selectorSelected?.id,
+		modelidCalc = _.isArray(selectorSelected) ? _.map(selectorSelected, (entity) => entity[selectorSelectedField]) : selectorSelected?.[selectorSelectedField],
 		modelid = useRef(modelidCalc),
 		[isReady, setIsReady] = useState(false),
 		[isUploading, setIsUploading] = useState(false),