@onehat/ui 0.4.40 → 0.4.42

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@onehat/ui",
-	"version": "0.4.40",
+	"version": "0.4.42",
 	"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/Buttons/ReloadButton.js

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

package/src/Components/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/Checkbox/CheckboxGroup.js

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

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

@@ -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,26 @@ import _ from 'lodash';
 
 const FILTER_NAME = 'q';
 
-export function ComboComponent(props) {
+/**
+ * isEmptyValue
+ * _.isEmpty returns true for all integers, so we need this instead
+ * @param {*} value 
+ * @returns boolean
+ */
+function isEmptyValue(value) {
+	// 
+	return value === null ||
+			value === undefined ||
+			value === '' ||
+			value === 0 ||
+			(_.isObject(value) && _.isEmpty(value));
+};
+
+export const ComboComponent = forwardRef((props, ref) => {
 
 	const {
 			additionalButtons,
 			autoFocus = false,
-			tooltipRef = null,
-			tooltip = null,
 			menuMinWidth,
 			disableDirectEntry = false,
 			hideMenuOnSelection = true,
@@ -58,7 +70,6 @@ export function ComboComponent(props) {
 			minimizeForRow = false,
 			reloadOnTrigger = false,
 			menuHeight,
-			tooltipPlacement = 'bottom',
 			placeholder,
 			onRowPress,
 			icon,
@@ -68,6 +79,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
@@ -172,19 +185,20 @@ export function ComboComponent(props) {
 			} else if (_.isArray(value)) {
 				displayValue = [];
 				if (Repository) {
-					if (!Repository.isLoaded) {
-						debugger;
-						throw Error('Not yet implemented'); // Would a Combo ever have multiple remote selections? Shouldn't that be a Tag field??
-					}
-					if (Repository.isLoading) {
-						await Repository.waitUntilDoneLoading();
-					}
-					displayValue = _.each(value, (id) => {
-						const entity = Repository.getById(id);
-						if (entity) {
-							displayValue.push(entity.displayValue);
+					if (!Repository.isDestroyed) {
+						if (!Repository.isLoaded) {
+							throw Error('Not yet implemented'); // Would a Combo ever have multiple remote selections? Shouldn't that be a Tag field??
 						}
-					});
+						if (Repository.isLoading) {
+							await Repository.waitUntilDoneLoading();
+						}
+						displayValue = _.each(value, (id) => {
+							const entity = Repository.getById(id);
+							if (entity) {
+								displayValue.push(entity.displayValue);
+							}
+						});
+					}
 				} else {
 					displayValue = _.each(value, (id) => {
 						const item = _.find(data, (datum) => datum[idIx] === id);
@@ -196,25 +210,33 @@ export function ComboComponent(props) {
 				displayValue = displayValue.join(', ');
 			} else {
 				if (Repository) {
-					let entity;
-					if (!Repository.isLoaded) {
-						entity = await Repository.getSingleEntityFromServer(value);
-					} else {
-						if (Repository.isLoading) {
-							await Repository.waitUntilDoneLoading();
-						}
-						entity = Repository.getById(value);
-						if (!entity) {
-							entity = await Repository.getSingleEntityFromServer(value);
+					if (!Repository.isDestroyed) {
+						let entity;
+						if (!isEmptyValue(value)) {
+							if (!Repository.isLoaded) {
+								entity = await Repository.getSingleEntityFromServer(value);
+							} else {
+								if (Repository.isLoading) {
+									await Repository.waitUntilDoneLoading();
+								}
+								entity = Repository.getById(value);
+								if (!entity) {
+									entity = await Repository.getSingleEntityFromServer(value);
+								}
+							}
 						}
+						displayValue = entity?.displayValue || '';
 					}
-					displayValue = entity?.displayValue || '';
 				} else {
 					const item = _.find(data, (datum) => datum[idIx] === value);
 					displayValue = (item && item[displayIx]) || '';
 				}
 			}
 
+			if (isInTag) {
+				displayValue = '';
+			}
+
 			displayValueRef.current = displayValue;
 			resetTextInputValue();
 		},
@@ -401,14 +423,16 @@ export function ComboComponent(props) {
 		},
 		clearGridFilters = async () => {
 			if (Repository) {
-				if (Repository.isLoading) {
-					await Repository.waitUntilDoneLoading();
-				}
-				const filterName = getFilterName();
-				if (Repository.hasFilter(filterName)) {
-					Repository.clearFilters(filterName);
-					if (Repository.isRemote && !Repository.isAutoLoad) {
-						await Repository.reload();
+				if (!Repository.isDestroyed) {
+					if (Repository.isLoading) {
+						await Repository.waitUntilDoneLoading();
+					}
+					const filterName = getFilterName();
+					if (Repository.hasFilter(filterName)) {
+						Repository.clearFilters(filterName);
+						if (Repository.isRemote && !Repository.isAutoLoad) {
+							await Repository.reload();
+						}
 					}
 				}
 			} else {
@@ -423,42 +447,44 @@ export function ComboComponent(props) {
 		searchForMatches = async (value) => {
 			let found;
 			if (Repository) {
-				if (Repository.isLoading) {
-					await Repository.waitUntilDoneLoading();
-				}
+				if (!Repository.isDestroyed) {
+					if (Repository.isLoading) {
+						await Repository.waitUntilDoneLoading();
+					}
 
-				if (_.isEmpty(value)) {
-					clearGridFilters();
-					return;
-				}
+					if (_.isEmpty(value)) {
+						clearGridFilters();
+						return;
+					}
 
-				// Set filter
-				const
-					idRegex = /^id:(.*)$/,
-					isId = _.isString(value) && !!value.match(idRegex),
-					filterName = getFilterName(isId);
-				if (Repository.isRemote) {
-					// remote
-					const filterValue = _.isEmpty(value) ? null : (isId ? value.match(idRegex)[1] : value + '%');
-					await Repository.filter(filterName, filterValue);
-					if (!Repository.isAutoLoad) {
-						await Repository.reload();
+					// Set filter
+					const
+						idRegex = /^id:(.*)$/,
+						isId = _.isString(value) && !!value.match(idRegex),
+						filterName = getFilterName(isId);
+					if (Repository.isRemote) {
+						// remote
+						const filterValue = _.isEmpty(value) ? null : (isId ? value.match(idRegex)[1] : value + '%');
+						await Repository.filter(filterName, filterValue);
+						if (!Repository.isAutoLoad) {
+							await Repository.reload();
+						}
+					} else {
+						// local
+						Repository.filter({
+							name: filterName,
+							fn: (entity) => {
+								const
+									displayValue = entity.displayValue,
+									regex = new RegExp('^' + value, 'i'); // case-insensitive
+								return displayValue.match(regex);
+							},
+						});
 					}
-				} else {
-					// local
-					Repository.filter({
-						name: filterName,
-						fn: (entity) => {
-							const
-								displayValue = entity.displayValue,
-								regex = new RegExp('^' + value, 'i'); // case-insensitive
-							return displayValue.match(regex);
-						},
-					});
-				}
 
-				if (!isId) {
-					setNewEntityDisplayValue(value); // capture the search query so we can tell Grid what to use for a new entity's displayValue
+					if (!isId) {
+						setNewEntityDisplayValue(value); // capture the search query so we can tell Grid what to use for a new entity's displayValue
+					}
 				}
 			} else {
 				// Search through data
@@ -630,6 +656,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 +892,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 +1005,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 +1061,6 @@ export function ComboComponent(props) {
 							</Modal>;
 		}
 	}
-	const refProps = {};
-	if (tooltipRef) {
-		refProps.ref = tooltipRef;
-	}
 
 	let className = `
 		Combo-HStack
@@ -1043,7 +1086,6 @@ export function ComboComponent(props) {
 				className="Combo-VStack"
 			>
 				<HStack
-					{...refProps}
 					className={className}
 				>
 					{xButton}
@@ -1059,7 +1101,6 @@ export function ComboComponent(props) {
 	} else {
 		assembledComponents = 
 			<HStackNative
-				{...refProps}
 				testID={testID}
 				onLayout={onLayout}
 				className={className}
@@ -1115,15 +1156,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/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,16 @@ function NumberElement(props) {
 						width: 40,
 					}}
 				/>
-				<InputWithTooltip
+				<Input
 					testID={testID}
 					value={inputValue}
 					onChangeText={onChangeText}
 					onKeyPress={onInputKeyPress}
 					isDisabled={isDisabled}
 					tooltip={tooltip}
+					tooltipPlacement={tooltipPlacement}
+					tooltipClassName="flex-1"
 					className={`
-						InputWithTooltip
 						h-full
 						text-center
 						rounded-none

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

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

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

@@ -11,7 +11,7 @@ export default function PageSizeSelect(props) {
 		} = props;
 
 	return useMemo(() => {
-		return <HStack className="PageSizeSelect-HStack w-[70px] ml-3">
+		return <HStack className="PageSizeSelect-HStack w-[70px]">
 					<Select
 						data={[
 							// [ 1, '1', ],
@@ -24,6 +24,7 @@ export default function PageSizeSelect(props) {
 						value={pageSize}
 						onChangeValue={(value) => Repository.setPageSize(value)}
 						tooltip="Page Size"
+						tooltipClassName="w-[70px]"
 					/>
 				</HStack>;
 	}, [