@onehat/ui 0.3.47 → 0.3.49

package/package.json

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

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

@@ -515,7 +515,6 @@ export function ComboComponent(props) {
 														w: '100%',
 													};
 												}}
-												allowToggleSelection={true}
 												autoAdjustPageSizeToHeight={false}
 												{...props}
 												h={styles.FORM_COMBO_MENU_HEIGHT + 'px'}

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

@@ -37,6 +37,7 @@ export function DateElement(props) {
 			mode = DATE,
 			tooltip = 'Choose a date.',
 			tooltipPlacement = 'bottom',
+			isDisabled = false,
 		} = props,
 		styles = UiGlobals.styles,
 		Datetime = getComponentFromType('Datetime'),
@@ -235,6 +236,7 @@ export function DateElement(props) {
 						onBlur={onTriggerBlur}
 						h={10}
 						w={10}
+						isDisabled={isDisabled}
 						borderTopLeftRadius={6}
 						borderBottomLeftRadius={6}
 						borderTopRightRadius={0}
@@ -266,6 +268,7 @@ export function DateElement(props) {
 						_focus={{
 							bg: styles.FORM_DATE_INPUT_FOCUS_BG,
 						}}
+						isDisabled={isDisabled}
 						numberOfLines={1}
 						ellipsizeMode="head"
 						onLayout={(e) => {

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

@@ -26,6 +26,7 @@ function NumberElement(props) {
 		minValue,
 		maxValue,
 		tooltip = null,
+		isDisabled = false,
 	} = props,
 	styles = UiGlobals.styles,
 	debouncedSetValueRef = useRef(),
@@ -122,9 +123,9 @@ function NumberElement(props) {
 
 	return <Row flex={1} h="100%" p={0} borderWidth={1} borderColor="trueGray.400" borderRadius={6} {...props}>
 				<IconButton
-					icon={<Icon as={Minus} color={isDecrementDisabled ? 'disabled' : 'trueGray.500'} />}
+					icon={<Icon as={Minus} color={(isDecrementDisabled || isDisabled) ? 'disabled' : 'trueGray.500'} />}
 					onPress={onDecrement}
-					isDisabled={isDecrementDisabled}
+					isDisabled={isDecrementDisabled || isDisabled}
 					h="100%"
 					flex={1}
 					maxWidth={10}
@@ -148,12 +149,13 @@ function NumberElement(props) {
 					textAlign="center"
 					borderRadius={0}
 					tooltip={tooltip}
+					isDisabled={isDisabled}
 					{...props._input}
 				/>
 				<IconButton
-					icon={<Icon as={Plus} color={isIncrementDisabled ? 'disabled' : 'trueGray.500'} />}
+					icon={<Icon as={Plus} color={(isIncrementDisabled || isDisabled) ? 'disabled' : 'trueGray.500'} />}
 					onPress={onIncrement}
-					isDisabled={isIncrementDisabled}
+					isDisabled={isIncrementDisabled || isDisabled}
 					h="100%"
 					flex={1}
 					maxWidth={10}

package/src/Components/Form/Form.js

@@ -76,6 +76,7 @@ function Form(props) {
 			onViewMode,
 			submitBtnLabel,
 			onSubmit,
+			formSetup, // this fn will be executed after the form setup is complete
 			additionalEditButtons,
 			useAdditionalEditButtons = true,
 			additionalFooterButtons,
@@ -286,10 +287,14 @@ function Form(props) {
 					items,
 					onChange: onEditorChange,
 					useSelectorId = false,
+					isHidden = false,
 					...propsToPass
 				} = item,
 				editorTypeProps = {};
 
+			if (isHidden) {
+				return null;
+			}
 			const propertyDef = name && Repository?.getSchema().getPropertyDefinition(name);
 			if (!useAdditionalEditButtons) {
 				item = _.omit(item, 'additionalEditButtons');
@@ -449,9 +454,13 @@ function Form(props) {
 											/>;
 							if (error) {
 								if (editorType !== EDITOR_TYPE__INLINE) {
+									let message = error.message;
+									if (label) {
+										message = message.replace(error.ref.name, label);
+									}
 									element = <Column pt={1} flex={1}>
 												{element}
-												<Text color="#f00">{error.message}</Text>
+												<Text color="#f00">{message}</Text>
 											</Column>;
 								} else {
 									debugger;
@@ -554,6 +563,9 @@ function Form(props) {
 			setPreviousRecord(record);
 			reset(defaultValues);
 		}
+		if (formSetup) {
+			formSetup(formSetValue, formGetValues, formState)
+		}
 	}, [record]);
 
 	useEffect(() => {

package/src/Components/Grid/Grid.js

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