@onehat/ui 0.3.86 → 0.3.88

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@onehat/ui",
-	"version": "0.3.86",
+	"version": "0.3.88",
 	"description": "Base UI for OneHat apps",
 	"main": "src/index.js",
 	"type": "module",
@@ -33,15 +33,15 @@
 		"@reduxjs/toolkit": "^1.9.5",
 		"inflector-js": "^1.0.1",
 		"js-cookie": "^3.0.5",
-		"locutus": "^2.0.16",
 		"native-base": "^3.4.28",
-		"react-hook-form": "^7.45.0",
+		"react-hook-form": "^7.49.2",
 		"react-redux": "^8.1.2",
 		"yup": "^1.2.0"
 	},
 	"peerDependencies": {
 		"@files-ui/react": "^1.0.8",
 		"ckeditor5-custom-build": "file:ckeditor5",
+		"locutus": "^2.0.16",
 		"react": "*",
 		"react-color": "^2.19.3",
 		"react-datetime": "^3.2.0",

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

@@ -24,6 +24,7 @@ function TagComponent(props) {
 			isValueAlwaysArray,
 			isValueAsStringifiedJson,
 			Editor,
+			_combo = {},
 
 			// parent Form
 			onChangeValue,
@@ -144,8 +145,12 @@ function TagComponent(props) {
 						onView={() => onView(val)}
 						onDelete={isEditor ? () => onDelete(val) : null}
 					/>;
-		}),
-		WhichCombo = isEditor ? ComboEditor : Combo;
+		});
+
+	let WhichCombo = ComboEditor;
+	if (!_.isNil(_combo.isEditor) && !_combo.isEditor) {
+		WhichCombo = Combo;
+	}
 
 	const sizeProps = {};
 	if (!props.flex && !props.w) {
@@ -184,6 +189,7 @@ function TagComponent(props) {
 							onChangeValue={onChangeComboValue}
 							parent={self}
 							reference="combo"
+							{..._combo}
 						/>}
 				</Column>
 				{isViewerShown && 

package/src/Components/Messages/ErrorMessage.js

@@ -1,4 +1,5 @@
 import {
+	Box,
 	Button,
 	Icon,
 	Modal,
@@ -6,13 +7,13 @@ import {
 } from 'native-base';
 import TriangleExclamation from '../Icons/TriangleExclamation.js';
 
-export default function ErrorMsg(props) {
+export default function ErrorMessage(props) {
 	const {
 			text = 'Error',
 			color = 'red.500',
 			onOk,
 		} = props;
-console.log('render ErrorMessage text', text);
+
 	return <Modal isOpen={true} {...props} _backdrop={{ bg: "#000" }}>
 				<Modal.Content>
 					<Modal.Header>Alert</Modal.Header>
@@ -25,7 +26,9 @@ console.log('render ErrorMessage text', text);
 						borderRadius={5}
 						flexDirection="row"
 					>
-						<Icon as={TriangleExclamation} color="red.500" size="md" mr={1} />
+						<Box w="50px" mx={2}>
+							<Icon as={TriangleExclamation} color="red.500" size="10" />
+						</Box>
 						<Text color={color} fontSize="18px">{text}</Text>
 					</Modal.Body>
 					<Modal.Footer py={2} pr={4}>

package/src/Components/Tab/TabBar.js

@@ -396,10 +396,9 @@ function TabBar(props) {
 		renderedCurrentTabContent = renderCurrentTabContent(),
 		renderedToggleButton = !disableCollapse ? renderToggleButton() : null;
 
-
+	let tabBar = null;
 	if (direction === VERTICAL) {
-		return <Row flex={1} w="100%" {...propsToPass}>
-					<Column
+		tabBar = <Column
 						alignItems="center"
 						justifyContent="flex-start"
 						py={2}
@@ -411,21 +410,22 @@ function TabBar(props) {
 						<Column flex={1} w="100%" justifyContent="flex-end">
 							{renderedToggleButton}
 						</Column>
-					</Column>
-					{renderedCurrentTabContent && 
+					</Column>;
+		if (renderedCurrentTabContent) {
+			tabBar = <Row flex={1} w="100%" {...propsToPass}>
+						{tabBar}
 						<Column
 							alignItems="center"
 							justifyContent="flex-start"
 							flex={1}
 						>
 							{renderedCurrentTabContent}
-						</Column>}
-				</Row>;
+						</Column>
+					</Row>;
+		}
 	}
-
-	// HORIZONTAL
-	return <Column flex={1} w="100%" {...propsToPass}>
-				<Row
+	if (direction === HORIZONTAL) {
+		tabBar = <Row
 					alignItems="center"
 					justifyContent="flex-start"
 					p={2}
@@ -439,16 +439,21 @@ function TabBar(props) {
 							{renderedToggleButton}
 						</Row>
 					</Row>
-				</Row>
-				{renderedCurrentTabContent && 
-					<Column
-						alignItems="center"
-						justifyContent="flex-start"
-						flex={1}
-					>
-						{renderedCurrentTabContent}
-					</Column>}
-			</Column>;
+				</Row>;
+		if (renderedCurrentTabContent) {
+			tabBar = <Column flex={1} w="100%" {...propsToPass}>
+						{tabBar}
+						<Column
+							alignItems="center"
+							justifyContent="flex-start"
+							flex={1}
+						>
+							{renderedCurrentTabContent}
+						</Column>
+					</Column>;
+		}
+	}
+	return tabBar;
 }
 
 export default withComponent(TabBar);