@onehat/ui 0.4.31 → 0.4.33

package/package.json

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

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

@@ -65,6 +65,7 @@ export function ComboComponent(props) {
 			onGridAdd, // to hook into when menu adds (ComboEditor only)
 			onGridSave, // to hook into when menu saves (ComboEditor only)
 			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,
 			testID,
 
@@ -252,6 +253,9 @@ export function ComboComponent(props) {
 					if (id !== value) {
 						setValue(id);
 					}
+					if (onSubmit) {
+						onSubmit(id);
+					}
 					hideMenu();
 					break;
 				case 'ArrowDown':
@@ -815,6 +819,9 @@ export function ComboComponent(props) {
 							hideMenu();
 							onInputFocus();
 						}
+						if (onSubmit) {
+							onSubmit(id);
+						}
 					}}
 					reference="grid"
 					parent={self}

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

@@ -50,13 +50,6 @@ function TagComponent(props) {
 		} = props,
 		styles = UiGlobals.styles,
 		valueRef = useRef(value),
-		ignoreNextComboValueChangeRef = useRef(false),
-		getIgnoreNextComboValueChange = () => {
-			return ignoreNextComboValueChangeRef.current;
-		},
-		setIgnoreNextComboValueChange = (bool) => {
-			ignoreNextComboValueChangeRef.current = bool;
-		},
 		onView = async (item, e) => {
 			const
 				id = item.id,
@@ -91,14 +84,9 @@ function TagComponent(props) {
 			});
 		},
 		clearComboValue = () => {
-			setIgnoreNextComboValueChange(true); // we're clearing out the value of the underlying Combo, so ignore it when this combo submits the new value change
 			self.children.combo.setValue(null);
 		},
 		onChangeComboValue = (comboValue) => {
-			if (getIgnoreNextComboValueChange()) {
-				setIgnoreNextComboValueChange(false);
-				return;
-			}
 
 			if (_.isNil(comboValue)) {
 				// NOTE: We *shouldn't* get here, but for some unknown reason, we *were* getting here on rare occasions.
@@ -309,21 +297,22 @@ function TagComponent(props) {
 			>
 				<HStack className={valueBoxesClassName}>{valueBoxes}</HStack>
 				
-				{!isViewOnly && <WhichCombo
-									Repository={props.Repository}
-									Editor={props.Editor}
-									onChangeValue={onChangeComboValue}
-									parent={self}
-									reference="combo"
-									isInTag={true}
-									onGridAdd={onGridAdd}
-									onGridSave={onGridSave}
-									onGridDelete={onGridDelete}
-									tooltip={tooltip}
-									usePermissions={props.usePermissions}
-									{..._combo}
-									className={comboClassName}
-								/>}
+				{!isViewOnly && 
+					<WhichCombo
+						Repository={props.Repository}
+						Editor={props.Editor}
+						onSubmit={onChangeComboValue}
+						parent={self}
+						reference="combo"
+						isInTag={true}
+						onGridAdd={onGridAdd}
+						onGridSave={onGridSave}
+						onGridDelete={onGridDelete}
+						tooltip={tooltip}
+						usePermissions={props.usePermissions}
+						{..._combo}
+						className={comboClassName}
+					/>}
 			</VStackNative>;
 	
 }

package/src/Components/Form/FieldSet.js

@@ -81,6 +81,8 @@ export default function FieldSet(props) {
 		mb-4
 		mx-0
 		p-1
+		pb-2
+		gap-2
 		border
 		border-grey-400
 		${styles.FORM_FIELDSET_BG}

package/src/Components/Form/Form.js

@@ -782,7 +782,7 @@ function Form(props) {
 							if (message) {
 								message = <Text className="text-[#f00]">{message}</Text>;
 							}
-							element = <VStack className="Form-VStack4 flex-1 pt-1">
+							element = <VStack className="Form-VStack4 flex-1">
 											{element}
 											{message}
 										</VStack>;
@@ -790,7 +790,7 @@ 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-HStack5 flex-1 flex-wrap">
+									element = <HStack className="Form-HStack5 flex-1 flex-wrap items-center">
 													{element}
 													{buttons}
 												</HStack>;
@@ -883,7 +883,6 @@ function Form(props) {
 											min-h-[50px]
 											w-full
 											flex-none
-											pb-2
 											${error ? 'bg-[#fdd]' : ''}
 										`}
 									>

package/src/Components/Hoc/withValue.js

@@ -20,8 +20,7 @@ export default function withValue(WrappedComponent) {
 			return <WrappedComponent {...props} ref={ref} />;
 		}
 
-		const
-			{
+		const {
 				onChangeValue,
 				value,
 				startingValue = null,

package/src/Constants/Dates.js

@@ -14,3 +14,4 @@ export const ONE_YEAR_AGO = moment().add(-1, 'years');
 export const MOMENT_DATE_FORMAT_1 = 'YYYY-MM-DD HH:mm:ss';
 export const MOMENT_DATE_FORMAT_2 = 'MMMM Do YYYY, h:mm:ss a';
 export const MOMENT_DATE_FORMAT_3 = 'h:mm A';
+export const MOMENT_DATE_FORMAT_4 = 'YYYY-MM-DD';

package/src/Functions/Cypress/form_functions.js

@@ -188,7 +188,9 @@ export function setTagValue(selectors, value) {
 				cy.get(field)
 					.wait(1000) // render
 					.type('{downarrow}')
-					.wait(500); // allow time for selection
+					.wait(500) // allow time for selection
+					.type('{enter}')
+					.wait(250); // allow time to register enter key
 			});
 
 			// press trigger to hide dropdown

package/src/Functions/buildAdditionalButtons.js

@@ -1,6 +1,3 @@
-import {
-	Icon,
-} from '@project-components/Gluestack';
 import Button from '../Components/Buttons/Button.js';
 import testProps from './testProps.js';
 import _ from 'lodash';
@@ -14,32 +11,28 @@ export default function buildAdditionalButtons(configs, self, handlerArgs = {})
 				handler,
 				icon,
 				isDisabled,
+				tooltip,
 				color = '#fff',
 			} = config,
 			buttonProps = {
 				key,
+				parent: self,
 				reference: key,
+				text,
+				icon,
+				isDisabled,
 				className: 'ml-2',
+				tooltip,
+				color,
 			};
 		if (handler) {
 			buttonProps.onPress = () => handler(handlerArgs);
 		}
-		if (icon) {
-			buttonProps.leftIcon = <Icon as={icon} size="sm" className="text-[#fff]" />;
-		}
-		if (isDisabled) {
-			buttonProps.isDisabled = isDisabled;
-		}
 		
-		const button = <Button
-							{...testProps('btn-' + key)}
-							color={color}
-							parent={self}
-							reference={key}
-							text={text}
-							{...buttonProps}
-						/>;
-		additionalButtons.push(button);
+		additionalButtons.push(<Button
+			{...testProps(key)}
+			{...buttonProps}
+		/>);
 	});
 	return additionalButtons;
 }