@onehat/ui 0.4.6 → 0.4.7

package/package.json

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

package/src/Components/Container/Container.js

@@ -325,13 +325,13 @@ function Container(props) {
 		componentProps = {};
 	}
 	
-	return <VStack className="w-full flex-1">
+	return <VStack className="Container-all w-full flex-1">
 				{northComponent}
 				{(!isNorthCollapsed && !localIsNorthCollapsed) && northSplitter}
-				<HStack className="w-full" style={{ flex: 100 }}>
+				<HStack className="Container-mid w-full" style={{ flex: 100 }}>
 					{westComponent}
 					{(!isWestCollapsed && !localIsWestCollapsed) && westSplitter}
-					<VStack className="h-full overflow-auto" style={{ flex: 100 }}>
+					<VStack className="Container-center h-full overflow-auto" style={{ flex: 100 }}>
 						{centerComponent}
 					</VStack>
 					{(!isEastCollapsed && !localIsEastCollapsed) && eastSplitter}

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

@@ -249,6 +249,7 @@ function TagComponent(props) {
 
 	let className = `
 		Tag
+		w-full
 		p-0
 	`;
 	if (props.className) {

package/src/Components/Form/Form.js

@@ -376,7 +376,7 @@ function Form(props) {
 											dynamicProps = getDynamicProps({ fieldState, formSetValue, formGetValues, formState });
 										}
 
-										let elementClassName = 'flex-1';
+										let elementClassName = 'Form-Element flex-1';
 										if (type.match(/Tag/)) {
 											elementClassName += ' overflow-auto';
 										}
@@ -433,6 +433,7 @@ function Form(props) {
 										return <HStack
 													key={ix}
 													className={`
+														Form-HStack1
 														flex-${flex}
 														${error ? "bg-[#fdd]" : "bg-white"}
 														${columnClassName}
@@ -564,7 +565,7 @@ function Form(props) {
 					return buildFromItem(item, ix, {...defaults, ...itemDefaults});
 				});
 
-				let elementClassName = '';
+				let elementClassName = 'Form-Element';
 				const defaultsClassName = defaults.className;
 				if (defaultsClassName) {
 					elementClassName += ' ' + defaultsClassName;
@@ -644,18 +645,18 @@ function Form(props) {
 						style.width = '50px';
 					}
 					if (containerWidth > styles.FORM_STACK_ROW_THRESHOLD) {
-						element = <HStack className="HStackA py-1">
+						element = <HStack className="Form-HStack2 w-full py-1">
 										<Label style={style}>{label}</Label>
 										{element}
 									</HStack>;
 					} else {
-						element = <VStack className="HStackA w-full py-1 mt-3">
+						element = <VStack className="Form-VStack1 w-full py-1 mt-3">
 										<Label style={style}>{label}</Label>
 										{element}
 									</VStack>;
 					}
 				}
-				return <HStack key={ix} className="HStackB px-2 pb-1">{element}</HStack>;
+				return <HStack key={ix} className="Form-HStack3 w-full px-2 pb-1">{element}</HStack>;
 			}
 
 		
@@ -720,7 +721,7 @@ function Form(props) {
 								dynamicProps = getDynamicProps({ fieldState, formSetValue, formGetValues, formState });
 							}
 
-							let elementClassName = 'field-' + name + ' flex-1 Form-Element';
+							let elementClassName = 'Form-Element field-' + name + ' flex-1';
 							const defaultsClassName = defaults.className;
 							if (defaultsClassName) {
 								elementClassName += ' ' + defaultsClassName;
@@ -770,7 +771,7 @@ function Form(props) {
 							if (message) {
 								message = <Text className="text-[#f00]">{message}</Text>;
 							}
-							element = <VStack className="Form-messageContainer pt-1 flex-1">
+							element = <VStack className="Form-VStack4 pt-1 flex-1">
 											{element}
 											{message}
 										</VStack>;

package/src/Components/Hoc/withSideEditor.js

@@ -35,6 +35,7 @@ export default function withSideEditor(WrappedComponent, isTree = false) {
 				// pull these out, as we don't want them going to the Editor
 				selectorId,
 				selectorSelected,
+				style,
 				
 				...propsToPass
 			} = props;