@onehat/ui 0.4.39 → 0.4.41

package/package.json

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

package/src/Components/Buttons/Button.js

@@ -5,7 +5,6 @@ import {
 	ButtonSpinner,
 	ButtonIcon,
 	ButtonGroup,
-	Tooltip,
 } from '@project-components/Gluestack';
 import withComponent from '../Hoc/withComponent.js';
 import withTooltip from '../Hoc/withTooltip.js';
@@ -22,7 +21,6 @@ const ButtonComponent = forwardRef((props, ref) => {
 			_icon, // props for icon
 			_rightIcon, // props for rightIcon
 			_text = {}, // props for ButtonText
-			tooltip,
 			...propsToPass
 		} = props;
 	
@@ -61,17 +59,12 @@ const ButtonComponent = forwardRef((props, ref) => {
 		className += ' ' + propsToPass.className;
 	}
 	
-	let button = <Button {...propsToPass} className={className} ref={ref}>
-					{isLoading && <ButtonSpinner className="ButtonSpinner" {..._spinner} />}
-					{icon}
-					{text && <ButtonText className="ButtonText" {..._text}>{text}</ButtonText>}
-					{rightIcon}
-				</Button>;
-	if (tooltip) {
-		button = <Tooltip text={tooltip}>{button}</Tooltip>;
-	}
-	return button;
-
+	return <Button {...propsToPass} className={className} ref={ref}>
+				{isLoading && <ButtonSpinner className="ButtonSpinner" {..._spinner} />}
+				{icon}
+				{text && <ButtonText className="ButtonText" {..._text}>{text}</ButtonText>}
+				{rightIcon}
+			</Button>;
 });
 
 export default withComponent(withTooltip(ButtonComponent));

package/src/Components/Filter/DateRange.js

@@ -6,7 +6,6 @@ import {
 } from '@project-components/Gluestack';
 import Date from '../Form/Field/Date.js';
 import testProps from '../../Functions/testProps.js';
-import withTooltip from '../Hoc/withTooltip.js';
 import withValue from '../Hoc/withValue.js';
 import _ from 'lodash';
 
@@ -22,6 +21,7 @@ const
 				minValue,
 				maxValue,
 				tooltip,
+				tooltipPlacement,
 
 				// withComponent
 				self,
@@ -100,6 +100,7 @@ const
 						minValue={minValue}
 						maxValue={maxValue}
 						tooltip={(tooltip ? tooltip + ' ' : '') + 'Low'}
+						tooltipPlacement={tooltipPlacement}
 						limitWidth={true}
 						parent={self}
 						reference="low"
@@ -113,6 +114,7 @@ const
 						minValue={minValue}
 						maxValue={maxValue}
 						tooltip={(tooltip ? tooltip + ' ' : '') + 'High'}
+						tooltipPlacement={tooltipPlacement}
 						limitWidth={true}
 						parent={self}
 						reference="high"

package/src/Components/Filter/NumberRange.js

@@ -17,7 +17,8 @@ const
 					high: null,
 				},
 				setValue,
-				tooltip = '',
+				tooltip,
+				tooltipPlacement,
 
 				minValue = 0,
 				maxValue,
@@ -82,6 +83,7 @@ const
 						minValue={minValue}
 						maxValue={maxValue}
 						tooltip={(tooltip ? tooltip + ' ' : '') + 'Low'}
+						tooltipPlacement={tooltipPlacement}
 						className="max-w-[150px]"
 					/>
 					<Text className="px-2 select-none">to</Text>
@@ -93,6 +95,7 @@ const
 						minValue={minValue}
 						maxValue={maxValue}
 						tooltip={(tooltip ? tooltip + ' ' : '') + 'High'}
+						tooltipPlacement={tooltipPlacement}
 						className="max-w-[150px]"
 					/>
 				</HStack>;

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

@@ -1,4 +1,4 @@
-import React, { useState, useEffect, useRef, } from 'react';
+import { forwardRef, useState, useEffect, useRef, } from 'react';
 import {
 	Box,
 	HStack,
@@ -9,7 +9,6 @@ import {
 	Pressable,
 	Text,
 	TextNative,
-	Tooltip,
 	VStackNative,
 } from '@project-components/Gluestack';
 import {
@@ -37,13 +36,11 @@ import _ from 'lodash';
 
 const FILTER_NAME = 'q';
 
-export function ComboComponent(props) {
+export const ComboComponent = forwardRef((props, ref) => {
 
 	const {
 			additionalButtons,
 			autoFocus = false,
-			tooltipRef = null,
-			tooltip = null,
 			menuMinWidth,
 			disableDirectEntry = false,
 			hideMenuOnSelection = true,
@@ -58,7 +55,6 @@ export function ComboComponent(props) {
 			minimizeForRow = false,
 			reloadOnTrigger = false,
 			menuHeight,
-			tooltipPlacement = 'bottom',
 			placeholder,
 			onRowPress,
 			icon,
@@ -68,6 +64,8 @@ export function ComboComponent(props) {
 			onGridDelete, // to hook into when menu deletes (ComboEditor only)
 			onSubmit, // when Combo is used in a Tag, call this when the user submits the Combo value (i.e. presses Enter or clicks a row)
 			newEntityDisplayProperty,
+			tooltip = null,
+			tooltipPlacement = 'bottom',
 			testID,
 
 			// withComponent
@@ -630,6 +628,14 @@ export function ComboComponent(props) {
 						InputLeftElement={inputIconElement}
 						autoSubmitDelay={500}
 						placeholder={placeholder}
+						tooltip={tooltip}
+						tooltipPlacement={tooltipPlacement}
+						tooltipClassName={`
+							grow
+							h-auto
+							self-stretch
+							flex-1
+						`}
 						className={`
 							Combo-Input
 							grow
@@ -858,6 +864,13 @@ export function ComboComponent(props) {
 									InputLeftElement={inputIconElement}
 									autoSubmitDelay={500}
 									placeholder={placeholder}
+									tooltip={tooltip}
+									tooltipPlacement={tooltipPlacement}
+									tooltipClassName={`
+										grow
+										h-full
+										flex-1
+									`}
 									className={`
 										Combo-inputClone-Input
 										grow
@@ -964,6 +977,12 @@ export function ComboComponent(props) {
 							InputLeftElement={inputIconElement}
 							autoSubmitDelay={500}
 							placeholder={placeholder}
+							tooltip={tooltip}
+							tooltipPlacement={tooltipPlacement}
+							tooltipClassName={`
+								h-full
+								flex-1
+							`}
 							className={`
 								h-full
 								flex-1
@@ -1014,10 +1033,6 @@ export function ComboComponent(props) {
 							</Modal>;
 		}
 	}
-	const refProps = {};
-	if (tooltipRef) {
-		refProps.ref = tooltipRef;
-	}
 
 	let className = `
 		Combo-HStack
@@ -1043,7 +1058,6 @@ export function ComboComponent(props) {
 				className="Combo-VStack"
 			>
 				<HStack
-					{...refProps}
 					className={className}
 				>
 					{xButton}
@@ -1059,7 +1073,6 @@ export function ComboComponent(props) {
 	} else {
 		assembledComponents = 
 			<HStackNative
-				{...refProps}
 				testID={testID}
 				onLayout={onLayout}
 				className={className}
@@ -1115,15 +1128,9 @@ export function ComboComponent(props) {
 				</>;
 	}
 	
-	if (tooltip) {
-		// TODO: implement withTooltip for Combo
-		// assembledComponents = <Tooltip label={tooltip} placement={tooltipPlacement} className="h-full">
-		// 						{assembledComponents}
-		// 					</Tooltip>;
-	}
-	
 	return assembledComponents;
-}
+	
+});
 
 export const Combo = withComponent(
 						withAlert(

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

@@ -12,8 +12,8 @@ import {
 } from '../../../../Constants/MeterTypes.js';
 
 const data = [
-	[METER_TYPES__HOURS, 'Hours'],
-	[METER_TYPES__MILES, 'Miles'],
+	[METER_TYPES__HOURS, 'Time (hrs)'],
+	[METER_TYPES__MILES, 'Distance (mi/km)'],
 ];
 function MeterTypesCombo(props) {
 	return <ArrayCombo

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

@@ -24,6 +24,7 @@ export default function PageSizeCombo(props) {
 						value={pageSize}
 						onChangeValue={(value) => Repository.setPageSize(value)}
 						tooltip="Page Size"
+						tooltipClassName="w-[100px]"
 						allowNull={false}
 						disableDirectEntry={true}
 					/>

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

@@ -24,7 +24,6 @@ import Input from '../Field/Input.js';
 import IconButton from '../../Buttons/IconButton.js';
 import Xmark from '../../Icons/Xmark.js';
 import withComponent from '../../Hoc/withComponent.js';
-import withTooltip from '../../Hoc/withTooltip.js';
 import withValue from '../../Hoc/withValue.js';
 import emptyFn from '../../../Functions/emptyFn.js';
 import testProps from '../../../Functions/testProps.js';
@@ -51,6 +50,8 @@ export const DateElement = forwardRef((props, ref) => {
 			minimizeForRow = false,
 			minValue,
 			maxValue,
+			tooltip = null,
+			tooltipPlacement = 'bottom',
 			testID,
 
 			// withComponent
@@ -359,6 +360,12 @@ export const DateElement = forwardRef((props, ref) => {
 				onFocus={onInputFocus}
 				autoSubmit={true}
 				isDisabled={isDisabled}
+				tooltip={tooltip}
+				tooltipPlacement={tooltipPlacement}
+				tooltipClassName={`
+					flex-1
+					h-full
+				`}
 				// onLayout={(e) => {
 				// 	const {
 				// 			height,
@@ -510,6 +517,12 @@ export const DateElement = forwardRef((props, ref) => {
 							onBlur={onInputBlur}
 							autoSubmitDelay={1000}
 							placeholder={placeholder}
+							tooltip={tooltip}
+							tooltipPlacement={tooltipPlacement}
+							tooltipClassName={`
+								flex-1
+								h-full
+							`}
 							className={`
 								flex-1
 								h-full
@@ -602,4 +615,4 @@ export const DateElement = forwardRef((props, ref) => {
 
 });
 
-export default withComponent(withValue(withTooltip(DateElement)));
+export default withComponent(withValue(DateElement));

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

@@ -9,14 +9,11 @@ import IconButton from '../../Buttons/IconButton.js';
 import Input from './Input.js';
 import testProps from '../../../Functions/testProps.js';
 import withComponent from '../../Hoc/withComponent.js';
-import withTooltip from '../../Hoc/withTooltip.js';
 import withValue from '../../Hoc/withValue.js';
 import Plus from '../../Icons/Plus.js';
 import Minus from '../../Icons/Minus.js';
 import _ from 'lodash';
 
-const InputWithTooltip = withTooltip(Input);
-
 function NumberElement(props) {
 	let {
 			value,
@@ -24,7 +21,8 @@ function NumberElement(props) {
 			minValue,
 			maxValue,
 			autoSubmitDelay = UiGlobals.autoSubmitDelay,
-			tooltip = null,
+			tooltip,
+			tooltipPlacement,
 			isDisabled = false,
 			testID,
 		} = props,
@@ -158,15 +156,15 @@ function NumberElement(props) {
 						width: 40,
 					}}
 				/>
-				<InputWithTooltip
+				<Input
 					testID={testID}
 					value={inputValue}
 					onChangeText={onChangeText}
 					onKeyPress={onInputKeyPress}
 					isDisabled={isDisabled}
 					tooltip={tooltip}
+					tooltipPlacement={tooltipPlacement}
 					className={`
-						InputWithTooltip
 						h-full
 						text-center
 						rounded-none

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

@@ -24,6 +24,7 @@ export default function PageSizeSelect(props) {
 						value={pageSize}
 						onChangeValue={(value) => Repository.setPageSize(value)}
 						tooltip="Page Size"
+						tooltipClassName="w-[70px]"
 					/>
 				</HStack>;
 	}, [

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

@@ -1,4 +1,4 @@
-import React, { useState, useEffect, useRef, } from 'react';
+import { useState, useEffect, useRef, } from 'react';
 import {
 	HStack,
 	Text,
@@ -13,211 +13,206 @@ import Slider from '@react-native-community/slider'; // https://www.npmjs.com/pa
 import UiGlobals from '../../../UiGlobals.js';
 import testProps from '../../../Functions/testProps.js';
 import withComponent from '../../Hoc/withComponent.js';
-import withTooltip from '../../Hoc/withTooltip.js';
 import withValue from '../../Hoc/withValue.js';
 import _ from 'lodash';
 
 const FAKE_ZERO = 0.0000000001; // Slider doesn't like zero
 
-const InputWithTooltip = withTooltip(Input);
-
-const
-	SliderElement = (props) => {
-		let {
-				value = 0,
-				setValue,
-				minValue = 0,
-				maxValue = 100,
-				step = 10,
-				autoSubmitDelay = UiGlobals.autoSubmitDelay,
-				minimizeForRow = false,
-				tooltip = null,
-				isDisabled = false,
-				testID,
-			} = props,
-			styles = UiGlobals.styles,
-			debouncedSetValueRef = useRef(),
-			[localValue, setLocalValue] = useState(value),
-			onInputKeyPress = (e) => {
-				const key = e.nativeEvent.key; // e.key works on web, but not mobile; so use e.nativeEvent.key which works on both
-				switch(key) {
-					case 'ArrowDown':
-						onDecrement();
-						break;
-					case 'ArrowUp':
-						onIncrement();
-						break;
-					case 'Enter':
-						debouncedSetValueRef.current?.cancel();
-						setValue(value);
-						break;
-					case 'ArrowLeft':
-					case 'ArrowRight':
-					case 'Tab':
-					case 'Backspace':
-						return;
-					default:
-				}
-				if (!key.match(/^[\-\d\.]*$/)) {
-					e.preventDefault(); // kill anything that's not a number
-				}
-			},
-			onChangeText = (value) => {
-				if (!value || value === '') {
-					value = 0; // empty string makes value null
-				} else if (value.match(/\.$/)) { // value ends with a decimal point
-					// don't parseFloat, otherwise we'll lose the decimal point
-				} else if (value.match(/0$/)) { // value ends with a zero
-					// don't parseFloat, otherwise we'll lose the ability to do things like 1.03
-				} else {
-					value = parseFloat(value, 10);
-				}
-				if (value < minValue) {
-					value = minValue;
-				} else if (value > maxValue) {
-					value = maxValue;
-				}
-				setLocalValue(value);
-				debouncedSetValueRef.current(value);
-			},
-			onDecrement = () => {
-				let localValue = value;
-				if (minValue && localValue === minValue) {
-					return;
-				}
-				if (!localValue) {
-					localValue = 0;
-				}
-				localValue = new Decimal(localValue).minus(step).toNumber();
-				if (minValue > localValue) {
-					localValue = minValue;
-				}
-				setValue(localValue);
-			},
-			onIncrement = () => {
-				let localValue = value;
-				if (maxValue && localValue === maxValue) {
+function SliderElement(props) {
+	let {
+			value = 0,
+			setValue,
+			minValue = 0,
+			maxValue = 100,
+			step = 10,
+			autoSubmitDelay = UiGlobals.autoSubmitDelay,
+			minimizeForRow = false,
+			tooltip,
+			tooltipPlacement,
+			isDisabled = false,
+			testID,
+		} = props,
+		styles = UiGlobals.styles,
+		debouncedSetValueRef = useRef(),
+		[localValue, setLocalValue] = useState(value),
+		onInputKeyPress = (e) => {
+			const key = e.nativeEvent.key; // e.key works on web, but not mobile; so use e.nativeEvent.key which works on both
+			switch(key) {
+				case 'ArrowDown':
+					onDecrement();
+					break;
+				case 'ArrowUp':
+					onIncrement();
+					break;
+				case 'Enter':
+					debouncedSetValueRef.current?.cancel();
+					setValue(value);
+					break;
+				case 'ArrowLeft':
+				case 'ArrowRight':
+				case 'Tab':
+				case 'Backspace':
 					return;
-				}
-				if (!localValue) {
-					localValue = 0;
-				}
-				localValue = new Decimal(localValue).plus(step).toNumber();
-				if (maxValue < localValue) {
-					localValue = maxValue;
-				}
-				setValue(localValue);
-			};
-		
-		useEffect(() => {
-			// Set up debounce fn
-			// Have to do this because otherwise, lodash tries to create a debounced version of the fn from only this render
-			debouncedSetValueRef.current?.cancel(); // Cancel any previous debounced fn
-			debouncedSetValueRef.current = _.debounce(setValue, autoSubmitDelay);
-		}, [setValue]);
-
-		useEffect(() => {
-
-			// Make local value conform to externally changed value
-			if (value !== localValue) {
-				setLocalValue(value);
+				default:
+			}
+			if (!key.match(/^[\-\d\.]*$/)) {
+				e.preventDefault(); // kill anything that's not a number
+			}
+		},
+		onChangeText = (value) => {
+			if (!value || value === '') {
+				value = 0; // empty string makes value null
+			} else if (value.match(/\.$/)) { // value ends with a decimal point
+				// don't parseFloat, otherwise we'll lose the decimal point
+			} else if (value.match(/0$/)) { // value ends with a zero
+				// don't parseFloat, otherwise we'll lose the ability to do things like 1.03
+			} else {
+				value = parseFloat(value, 10);
+			}
+			if (value < minValue) {
+				value = minValue;
+			} else if (value > maxValue) {
+				value = maxValue;
+			}
+			setLocalValue(value);
+			debouncedSetValueRef.current(value);
+		},
+		onDecrement = () => {
+			let localValue = value;
+			if (minValue && localValue === minValue) {
+				return;
+			}
+			if (!localValue) {
+				localValue = 0;
+			}
+			localValue = new Decimal(localValue).minus(step).toNumber();
+			if (minValue > localValue) {
+				localValue = minValue;
+			}
+			setValue(localValue);
+		},
+		onIncrement = () => {
+			let localValue = value;
+			if (maxValue && localValue === maxValue) {
+				return;
+			}
+			if (!localValue) {
+				localValue = 0;
 			}
+			localValue = new Decimal(localValue).plus(step).toNumber();
+			if (maxValue < localValue) {
+				localValue = maxValue;
+			}
+			setValue(localValue);
+		};
 	
-		}, [value]);
+	useEffect(() => {
+		// Set up debounce fn
+		// Have to do this because otherwise, lodash tries to create a debounced version of the fn from only this render
+		debouncedSetValueRef.current?.cancel(); // Cancel any previous debounced fn
+		debouncedSetValueRef.current = _.debounce(setValue, autoSubmitDelay);
+	}, [setValue]);
 
-		let sliderValue = value;
+	useEffect(() => {
 
-		if (localValue === null || typeof localValue === 'undefined') {
-			localValue = ''; // If the value is null or undefined, don't let this be an uncontrolled input
+		// Make local value conform to externally changed value
+		if (value !== localValue) {
+			setLocalValue(value);
 		}
 
-		if (sliderValue === null || typeof sliderValue === 'undefined') {
-			sliderValue = 0; // If the value is null or undefined, force slider to use zero
-		}
+	}, [value]);
 
-		// convert localValue to string if necessary, because numbers work on web but not mobile; while strings work in both places
-		let inputValue = localValue;
-		if (_.isNumber(inputValue)) {
-			inputValue = '' + inputValue;
-		}
+	let sliderValue = value;
 
-		const style = props.style || {};
-		if (!hasWidth(props) && !hasFlex(props)) {
-			style.flex = 1;
-		}
+	if (localValue === null || typeof localValue === 'undefined') {
+		localValue = ''; // If the value is null or undefined, don't let this be an uncontrolled input
+	}
 
-		if (sliderValue === 0) {
-			sliderValue = FAKE_ZERO; // Slider doesn't like zero
-		}
+	if (sliderValue === null || typeof sliderValue === 'undefined') {
+		sliderValue = 0; // If the value is null or undefined, force slider to use zero
+	}
 
-		let className = `
-				w-full
-				items-center
-			`,
-			inputClassName = `
-				InputWithTooltip
-				h-full
-				w-[60px]
-				mr-4
-				text-center
-				rounded-md
-				${styles.SLIDER_READOUT_FONTSIZE}
-			`;
-		if (props.className) {
-			className += ' ' + props.className;
-		}
-		if (minimizeForRow) {
-			inputClassName += ' h-auto min-h-0 max-h-[50px] mr-1';
-		}
-		
-		return <HStack
-					className={className}
-					style={props.style}
-				>
-					<InputWithTooltip
-						{...testProps('readout')}
-						value={inputValue}
-						onChangeText={onChangeText}
-						onKeyPress={onInputKeyPress}
-						isDisabled={isDisabled}
-						disableAutoFlex={true}
-						className={inputClassName}
-						textAlignIsCenter={true}
-						{...props._input}
+	// convert localValue to string if necessary, because numbers work on web but not mobile; while strings work in both places
+	let inputValue = localValue;
+	if (_.isNumber(inputValue)) {
+		inputValue = '' + inputValue;
+	}
+
+	const style = props.style || {};
+	if (!hasWidth(props) && !hasFlex(props)) {
+		style.flex = 1;
+	}
+
+	if (sliderValue === 0) {
+		sliderValue = FAKE_ZERO; // Slider doesn't like zero
+	}
+
+	let className = `
+			w-full
+			items-center
+		`,
+		inputClassName = `
+			Input
+			h-full
+			w-[60px]
+			mr-4
+			text-center
+			rounded-md
+			${styles.SLIDER_READOUT_FONTSIZE}
+		`;
+	if (props.className) {
+		className += ' ' + props.className;
+	}
+	if (minimizeForRow) {
+		inputClassName += ' h-auto min-h-0 max-h-[50px] mr-1';
+	}
+	
+	return <HStack
+				className={className}
+				style={props.style}
+			>
+				<Input
+					{...testProps('readout')}
+					value={inputValue}
+					onChangeText={onChangeText}
+					onKeyPress={onInputKeyPress}
+					isDisabled={isDisabled}
+					disableAutoFlex={true}
+					className={inputClassName}
+					textAlignIsCenter={true}
+					tooltip={tooltip}
+					tooltipPlacement={tooltipPlacement}
+					{...props._input}
+				/>
+				<HStack className="flex-1">
+					<Slider
+						{...testProps('slider')}
+						ref={props.outerRef}
+						style={{
+							width: '100%', 
+							height: 40,
+						}}
+						minimumTrackTintColor={styles.SLIDER_MIN_TRACK_COLOR}
+						maximumTrackTintColor={styles.SLIDER_MAX_TRACK_COLOR}
+						thumbTintColor={styles.SLIDER_THUMB_COLOR}
+						minimumValue={minValue}
+						maximumValue={maxValue}
+						step={step}
+						value={sliderValue}
+						onValueChange={(value) => {
+							// This sets the localValue, only for display purposes
+							setLocalValue(value);
+						}}
+						onSlidingComplete={(value) => {
+							// This sets the actual value
+							if (value === FAKE_ZERO) {
+								value = 0;
+							}
+							setValue(value);
+						}}
 					/>
-					<HStack className="flex-1">
-						<Slider
-							{...testProps('slider')}
-							ref={props.outerRef}
-							style={{
-								width: '100%', 
-								height: 40,
-							}}
-							minimumTrackTintColor={styles.SLIDER_MIN_TRACK_COLOR}
-							maximumTrackTintColor={styles.SLIDER_MAX_TRACK_COLOR}
-							thumbTintColor={styles.SLIDER_THUMB_COLOR}
-							minimumValue={minValue}
-							maximumValue={maxValue}
-							step={step}
-							value={sliderValue}
-							onValueChange={(value) => {
-								// This sets the localValue, only for display purposes
-								setLocalValue(value);
-							}}
-							onSlidingComplete={(value) => {
-								// This sets the actual value
-								if (value === FAKE_ZERO) {
-									value = 0;
-								}
-								setValue(value);
-							}}
-						/>
-					</HStack>
-				</HStack>;
-	},
-	SliderField = withComponent(withValue(SliderElement));
+				</HStack>
+			</HStack>;
+};
 
-// Tooltip needs us to forwardRef
-export default withTooltip(React.forwardRef((props, ref) => {
-	return <SliderField {...props} outerRef={ref} />;
-}));
+export default withComponent(withValue(SliderElement));

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

@@ -1,4 +1,4 @@
-import React, { useState, useEffect, useRef, } from 'react';
+import { forwardRef, useState, useEffect, useRef, } from 'react';
 import {
 	Textarea, TextareaInput,
 } from '@project-components/Gluestack';
@@ -8,106 +8,104 @@ import withTooltip from '../../Hoc/withTooltip.js';
 import withValue from '../../Hoc/withValue.js';
 import _ from 'lodash';
 
-const
-	TextAreaElement = (props) => {
-		let { // so localValue can be changed, if needed
-				setValue,
-				autoSubmit = true, // automatically setValue after user stops typing for autoSubmitDelay
-				autoSubmitDelay = UiGlobals.autoSubmitDelay,
-				onChangeText,
-				placeholder,
-				minimizeForRow = false,
-				testID,
-			} = props,
-			value = _.isNil(props.value) ? '' : props.value, // null value may not actually reset this TextArea, so set it explicitly to empty string
-			styles = UiGlobals.styles,
-			debouncedSetValueRef = useRef(),
-			[localValue, setLocalValue] = useState(value),
-			isTypingRef = useRef(),
-			isTypingTimeoutRef = useRef(),
-			isTyping = () => {
-				return isTypingRef.current;
-			},
-			setIsTyping = (isTyping) => {
-				isTypingRef.current = isTyping;
-				if (isTyping) {
-					startIsTypingTimeout();
-				}
-			},
-			startIsTypingTimeout = () => {
-				clearIsTypingTimeout();
-				isTypingTimeoutRef.current = setTimeout(() => {
-					setIsTyping(false);
-				}, autoSubmitDelay + 1000);
-			},
-			clearIsTypingTimeout = () => {
-				if (isTypingTimeoutRef.current) {
-					clearTimeout(isTypingTimeoutRef.current);
-				}
-			},
-			onChangeTextLocal = (value) => {
-				setIsTyping(true);
-				if (value === '') {
-					value = null; // empty string makes value null
-				}
-				setLocalValue(value);
-				if (autoSubmit) {
-					debouncedSetValueRef.current(value);
-				}
-				if (onChangeText) {
-					onChangeText(value);
-				}
-			};
-		
-		useEffect(() => {
-			// Set up debounce fn
-			// Have to do this because otherwise, lodash tries to create a debounced version of the fn from only this render
-			debouncedSetValueRef.current?.cancel(); // Cancel any previous debounced fn
-			debouncedSetValueRef.current = _.debounce(setValue, autoSubmitDelay);
-		}, [setValue]);
-
-		useEffect(() => {
-
-			if (!isTyping() && value !== localValue) {
-				// Make local value conform to externally changed value
-				setLocalValue(value);
+const TextAreaElement = forwardRef((props, ref) => {
+	let { // so localValue can be changed, if needed
+			setValue,
+			autoSubmit = true, // automatically setValue after user stops typing for autoSubmitDelay
+			autoSubmitDelay = UiGlobals.autoSubmitDelay,
+			onChangeText,
+			placeholder,
+			minimizeForRow = false,
+			testID,
+			className,
+			...propsToPass
+		} = props,
+		value = _.isNil(props.value) ? '' : props.value, // null value may not actually reset this TextArea, so set it explicitly to empty string
+		styles = UiGlobals.styles,
+		debouncedSetValueRef = useRef(),
+		[localValue, setLocalValue] = useState(value),
+		isTypingRef = useRef(),
+		isTypingTimeoutRef = useRef(),
+		isTyping = () => {
+			return isTypingRef.current;
+		},
+		setIsTyping = (isTyping) => {
+			isTypingRef.current = isTyping;
+			if (isTyping) {
+				startIsTypingTimeout();
+			}
+		},
+		startIsTypingTimeout = () => {
+			clearIsTypingTimeout();
+			isTypingTimeoutRef.current = setTimeout(() => {
+				setIsTyping(false);
+			}, autoSubmitDelay + 1000);
+		},
+		clearIsTypingTimeout = () => {
+			if (isTypingTimeoutRef.current) {
+				clearTimeout(isTypingTimeoutRef.current);
+			}
+		},
+		onChangeTextLocal = (value) => {
+			setIsTyping(true);
+			if (value === '') {
+				value = null; // empty string makes value null
+			}
+			setLocalValue(value);
+			if (autoSubmit) {
+				debouncedSetValueRef.current(value);
+			}
+			if (onChangeText) {
+				onChangeText(value);
 			}
+		};
 	
-		}, [value]);
+	useEffect(() => {
+		// Set up debounce fn
+		// Have to do this because otherwise, lodash tries to create a debounced version of the fn from only this render
+		debouncedSetValueRef.current?.cancel(); // Cancel any previous debounced fn
+		debouncedSetValueRef.current = _.debounce(setValue, autoSubmitDelay);
+	}, [setValue]);
 
-		if (localValue === null || typeof localValue === 'undefined') {
-			localValue = ''; // If the value is null or undefined, don't let this be an uncontrolled input
-		}
-		let textareaClassName = `
-				Textarea
-			`,
-			inputClassName = `
-				TextAreaInput
-				flex-1
-				${styles.FORM_TEXTAREA_CLASSNAME}
-			`;
-		if (props.className) {
-			inputClassName += ' ' + props.className;
-		}
-		if (minimizeForRow) {
-			textareaClassName += ' h-auto min-h-0 max-h-[40px] overflow-auto';
-			inputClassName += ' py-0';
+	useEffect(() => {
+
+		if (!isTyping() && value !== localValue) {
+			// Make local value conform to externally changed value
+			setLocalValue(value);
 		}
 
-		return <Textarea className={textareaClassName}>
-					<TextareaInput
-						testID={testID}
-						ref={props.outerRef}
-						onChangeText={onChangeTextLocal}
-						value={localValue}
-						className={inputClassName}
-						placeholder={placeholder}
-					/>
-				</Textarea>;
-	},
-	TextAreaField = withComponent(withValue(TextAreaElement));
+	}, [value]);
+
+	if (localValue === null || typeof localValue === 'undefined') {
+		localValue = ''; // If the value is null or undefined, don't let this be an uncontrolled input
+	}
+	let textareaClassName = `
+			Textarea
+		`,
+		inputClassName = `
+			TextAreaInput
+			flex-1
+			${styles.FORM_TEXTAREA_CLASSNAME}
+		`;
+	if (className) {
+		inputClassName += ' ' + className;
+	}
+	if (minimizeForRow) {
+		textareaClassName += ' h-auto min-h-0 max-h-[40px] overflow-auto';
+		inputClassName += ' py-0';
+	}
+
+	return <Textarea className={textareaClassName}>
+				<TextareaInput
+					{...propsToPass}
+					testID={testID}
+					ref={ref}
+					onChangeText={onChangeTextLocal}
+					value={localValue}
+					className={inputClassName}
+					placeholder={placeholder}
+				/>
+			</Textarea>;
+});
 
-// withTooltip needs us to forwardRef
-export default withTooltip(React.forwardRef((props, ref) => {
-	return <TextAreaField {...props} outerRef={ref} />;
-}));
+export default withComponent(withValue(withTooltip(TextAreaElement)));

package/src/Components/Form/Form.js

@@ -608,12 +608,15 @@ function Form(props) {
 			}
 
 			if (isEditorViewOnly || !isEditable) {
-				let value = record?.properties[name]?.displayValue || null;
-				if (_.isNil(value) && record && record[name]) {
-					value = record[name];
-				}
-				if (_.isNil(value) && startingValues && startingValues[name]) {
-					value = startingValues[name];
+				let value = null;
+				if (isSingle) {
+					value = record?.properties[name]?.displayValue || null;
+					if (_.isNil(value) && record && record[name]) {
+						value = record[name];
+					}
+					if (_.isNil(value) && startingValues && startingValues[name]) {
+						value = startingValues[name];
+					}
 				}
 
 				let elementClassName = 'field-' + name;

package/src/Components/Grid/Grid.js

@@ -455,17 +455,20 @@ function GridComponent(props) {
 						if (isHeaderRow || isReorderMode) {
 							return
 						}
+						if (selection && selection[0] && selection[0].isRemotePhantom) {
+							return; // block context menu or changing selection when a remote phantom is already selected
+						}
 						
 						// context menu
-						const selection = [item];
+						const newSelection = [item];
 						if (!disableWithSelection) {
-							setSelection(selection);
+							setSelection(newSelection);
 						}
 						if (onEditorRowClick) { // e.g. inline editor
 							onEditorRowClick(item, index, e);
 						}
 						if (onContextMenu) {
-							onContextMenu(item, e, selection);
+							onContextMenu(item, e, newSelection);
 						}
 					}}
 					className="Pressable Row flex-row grow">

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

@@ -50,6 +50,7 @@ export default function withSelection(WrappedComponent) {
 			initialSelection = secondarySelection || secondaryDefaultSelection || [],
 			forceUpdate = useForceUpdate(),
 			secondarySelectionRef = useRef(initialSelection),
+			SecondaryRepositoryRef = useRef(SecondaryRepository),
 			[isReady, setIsReady] = useState(secondarySelection || false), // if secondarySelection is already defined, or secondaryValue is not null and we don't need to load repository, it's ready
 			secondarySetSelection = (secondarySelection) => {
 				if (_.isEqual(secondarySelection, secondaryGetSelection())) {
@@ -68,6 +69,9 @@ export default function withSelection(WrappedComponent) {
 			secondaryGetSelection = () => {
 				return secondarySelectionRef.current;
 			},
+			secondaryGetRepository = () => {
+				return SecondaryRepositoryRef.current;
+			},
 			secondarySelectPrev = () => {
 				secondarySelectDirection(SELECT_UP);
 			},
@@ -112,6 +116,7 @@ export default function withSelection(WrappedComponent) {
 				secondarySetSelection(newSelection);
 			},
 			secondaryRemoveFromSelection = (item) => {
+				const SecondaryRepository = secondaryGetRepository();
 				let newSelection = [];
 				if (SecondaryRepository) {
 					newSelection = _.remove(secondaryGetSelection(), (sel) => sel !== item);
@@ -132,7 +137,8 @@ export default function withSelection(WrappedComponent) {
 				// That way, after a load event, we'll keep the same selection, if possible.
 				const
 					newSelection = [],
-					ids = _.map(secondaryGetSelection(), (item) => item.id);
+					ids = _.map(secondaryGetSelection(), (item) => item.id),
+					SecondaryRepository = secondaryGetRepository();
 				_.each(ids, (id) => {
 					const found = SecondaryRepository.getById(id);
 					if (found) {
@@ -144,6 +150,7 @@ export default function withSelection(WrappedComponent) {
 			getMaxMinSelectionIndices = () => {
 				let items,
 					currentlySelectedRowIndices = [];
+				const SecondaryRepository = secondaryGetRepository();
 				if (SecondaryRepository) {
 					items = SecondaryRepository.getEntitiesOnPage();
 				} else {
@@ -194,6 +201,7 @@ export default function withSelection(WrappedComponent) {
 				secondarySetSelection(newSelection);
 			},
 			secondaryIsInSelection = (item) => {
+				const SecondaryRepository = secondaryGetRepository();
 				if (SecondaryRepository) {
 					return inArray(item, secondaryGetSelection());
 				}
@@ -204,6 +212,8 @@ export default function withSelection(WrappedComponent) {
 				return !!found;
 			},
 			getIndexOfSelectedItem = (item) => {
+				const SecondaryRepository = secondaryGetRepository();
+
 				// Gets ix of entity on page, or element in secondaryData array
 				if (SecondaryRepository) {
 					const entities = SecondaryRepository.getEntitiesOnPage();
@@ -223,12 +233,14 @@ export default function withSelection(WrappedComponent) {
 				if (!secondaryGetSelection()[0]) {
 					return null;
 				}
-				const secondaryValues = _.map(secondaryGetSelection(), (item) => {
-					if (SecondaryRepository) {
-						return item.id;
-					}
-					return item[secondaryIdIx];
-				});
+				const
+					SecondaryRepository = secondaryGetRepository(),
+					secondaryValues = _.map(secondaryGetSelection(), (item) => {
+						if (SecondaryRepository) {
+							return item.id;
+						}
+						return item[secondaryIdIx];
+					});
 				if (secondaryValues.length === 1) {
 					return secondaryValues[0];
 				}
@@ -239,6 +251,7 @@ export default function withSelection(WrappedComponent) {
 					return '';
 				}
 
+				const SecondaryRepository = secondaryGetRepository();
 				return _.map(secondarySelection, (item) => {
 							if (SecondaryRepository) {
 								return item.displayValue;
@@ -258,6 +271,7 @@ export default function withSelection(WrappedComponent) {
 				}
 			},
 			conformSelectionToValue = async () => {
+				const SecondaryRepository = secondaryGetRepository();
 				let newSelection = [];
 				if (SecondaryRepository) {
 					if (SecondaryRepository.isLoading) {
@@ -325,6 +339,7 @@ export default function withSelection(WrappedComponent) {
 
 			(async () => {
 
+				const SecondaryRepository = secondaryGetRepository();
 				if (usesWithValue && SecondaryRepository?.isRemote 
 					&& !SecondaryRepository.isAutoLoad && !SecondaryRepository.isLoaded && !SecondaryRepository.isLoading && (!_.isNil(secondaryValue) || !_.isEmpty(secondarySelection)) || secondaryAutoSelectFirstItem) {
 					// on initialization, we can't conformSelectionToValue if the repository is not yet loaded, 

package/src/Components/Hoc/withMultiSelection.js

@@ -5,8 +5,7 @@ import {
 
 export default function withMultiSelection(WrappedComponent) {
 	return forwardRef((props, ref) => {
-		const
-			{
+		const {
 				selectionMode = SELECTION_MODE_MULTI,
 			} = props;
 		return <WrappedComponent

package/src/Components/Hoc/withSelection.js

@@ -48,6 +48,7 @@ export default function withSelection(WrappedComponent) {
 			initialSelection = selection || defaultSelection || [],
 			forceUpdate = useForceUpdate(),
 			selectionRef = useRef(initialSelection),
+			RepositoryRef = useRef(Repository),
 			[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, getSelection())) {
@@ -65,7 +66,10 @@ export default function withSelection(WrappedComponent) {
 			},
 			getSelection = () => {
 				return selectionRef.current;
-			}
+			},
+			getRepository = () => {
+				return RepositoryRef.current;
+			},
 			selectPrev = () => {
 				selectDirection(SELECT_UP);
 			},
@@ -110,6 +114,7 @@ export default function withSelection(WrappedComponent) {
 				setSelection(newSelection);
 			},
 			removeFromSelection = (item) => {
+				const Repository = getRepository();
 				let newSelection = [];
 				if (Repository) {
 					newSelection = _.remove(getSelection(), (sel) => sel !== item);
@@ -130,7 +135,8 @@ export default function withSelection(WrappedComponent) {
 				// That way, after a load event, we'll keep the same selection, if possible.
 				const
 					newSelection = [],
-					ids = _.map(getSelection(), (item) => item.id);
+					ids = _.map(getSelection(), (item) => item.id),
+					Repository = getRepository();
 				_.each(ids, (id) => {
 					const found = Repository.getById(id);
 					if (found) {
@@ -142,6 +148,7 @@ export default function withSelection(WrappedComponent) {
 			getMaxMinSelectionIndices = () => {
 				let items,
 					currentlySelectedRowIndices = [];
+				const Repository = getRepository();
 				if (Repository) {
 					items = Repository.getEntitiesOnPage();
 				} else {
@@ -192,6 +199,7 @@ export default function withSelection(WrappedComponent) {
 				setSelection(newSelection);
 			},
 			isInSelection = (item) => {
+				const Repository = getRepository();
 				if (Repository) {
 					return inArray(item, getSelection());
 				}
@@ -202,6 +210,8 @@ export default function withSelection(WrappedComponent) {
 				return !!found;
 			},
 			getIndexOfSelectedItem = (item) => {
+				const Repository = getRepository();
+
 				// Gets ix of entity on page, or element in data array
 				if (Repository) {
 					const entities = Repository.getEntitiesOnPage();
@@ -221,12 +231,14 @@ export default function withSelection(WrappedComponent) {
 				if (!getSelection()[0]) {
 					return null;
 				}
-				const values = _.map(getSelection(), (item) => {
-					if (Repository) {
-						return item.id;
-					}
-					return item[idIx];
-				});
+				const
+					Repository = getRepository(),
+					values = _.map(getSelection(), (item) => {
+						if (Repository) {
+							return item.id;
+						}
+						return item[idIx];
+					});
 				if (values.length === 1) {
 					return values[0];
 				}
@@ -237,6 +249,7 @@ export default function withSelection(WrappedComponent) {
 					return '';
 				}
 
+				const Repository = getRepository();
 				return _.map(selection, (item) => {
 							if (Repository) {
 								return item.displayValue;
@@ -256,6 +269,7 @@ export default function withSelection(WrappedComponent) {
 				}
 			},
 			conformSelectionToValue = async () => {
+				const Repository = getRepository();
 				let newSelection = [];
 				if (Repository) {
 					if (Repository.isLoading) {
@@ -323,6 +337,7 @@ export default function withSelection(WrappedComponent) {
 
 			(async () => {
 
+				const Repository = getRepository();
 				if (usesWithValue && Repository?.isRemote 
 					&& !Repository.isAutoLoad && !Repository.isLoaded && !Repository.isLoading && (!_.isNil(value) || !_.isEmpty(selection)) || autoSelectFirstItem) {
 					// on initialization, we can't conformSelectionToValue if the repository is not yet loaded, 

package/src/Components/Hoc/withTooltip.js

@@ -10,6 +10,7 @@ export default function withTooltip(WrappedComponent) {
 		const {
 				tooltip,
 				tooltipPlacement = 'bottom',
+				tooltipClassName,
 				_tooltip = {},
 				...propsToPass
 			} = props;
@@ -17,7 +18,12 @@ export default function withTooltip(WrappedComponent) {
 		let component = <WrappedComponent {...propsToPass} ref={ref} />;
 
 		if (tooltip || !_.isEmpty(_tooltip)) {
-			component = <Tooltip label={tooltip} placement={tooltipPlacement} {..._tooltip}>
+			component = <Tooltip
+							label={tooltip}
+							placement={tooltipPlacement}
+							className={tooltipClassName}
+							{..._tooltip}
+						>
 							{component}
 						</Tooltip>;
 		}

package/src/Components/Toolbar/Pagination.js

@@ -128,6 +128,7 @@ export default function Pagination(props) {
 						`}
 						textAlignIsCenter={true}
 						tooltip="Set Page"
+						tooltipClassName="w-[40px]"
 					/>);
 					items.push(<Text
 						key="totalPages"

package/src/Components/Tooltip/Tooltip.js

@@ -1,5 +1,8 @@
-import { forwardRef, cloneElement } from 'react';
-import { Tooltip, TooltipContent, TooltipText } from '@project-components/Gluestack';
+import { forwardRef } from 'react';
+import {
+	BoxNative as Box,
+	Tooltip, TooltipContent, TooltipText,
+} from '@project-components/Gluestack';
 
 const TooltipElement = forwardRef((props, ref) => {
 	const {
@@ -12,18 +15,18 @@ const TooltipElement = forwardRef((props, ref) => {
 	if (props.className) {
 		className += ' ' + props.className;
 	}
+
+	let triggerClassName = 'Tooltip-trigger';
+	if (props.className) {
+		triggerClassName += ' ' + props.className;
+	}
 	
 	return <Tooltip
 				placement={placement}
 				trigger={(triggerProps) => {
-					const propsToPass = {
-						...triggerProps,
-						...children.props,
-					};
-					if (ref) {
-						propsToPass.ref = ref;
-					}
-					return cloneElement(children, propsToPass);
+					return <Box className={triggerClassName} {...triggerProps}>
+								{children}
+							</Box>;
 				}}
 			>
 				<TooltipContent className={className}>

package/src/Components/Viewer/MeterTypeText.js

@@ -1,5 +1,5 @@
 import {
-	Text,
+	TextNative,
 } from '@project-components/Gluestack';
 import UiGlobals from '../../UiGlobals';
 
@@ -16,8 +16,8 @@ export default function MeterTypeText(props) {
 	if (props.className) {
 		className += ' ' + props.className;
 	}
-	return <Text
+	return <TextNative
 				{...props}
 				className={className}
-			>{props.value ? 'Hours' : 'Miles'}</Text>;
+			>{props.value ? 'Time (hrs)' : 'Distance (mi/km)'}</TextNative>;
 };