@onehat/ui 0.3.130 → 0.3.132

package/package.json

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

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

@@ -51,6 +51,7 @@ export function ComboComponent(props) {
 			onRowPress,
 			icon,
 			Editor, // only used for the eyeButton
+			onSave, // to hook into when menu saves (ComboEditor only)
 
 			// withComponent
 			self,
@@ -81,6 +82,7 @@ export function ComboComponent(props) {
 		[isRendered, setIsRendered] = useState(false),
 		[isReady, setIsReady] = useState(false),
 		[isSearchMode, setIsSearchMode] = useState(false),
+		[containerWidth, setContainerWidth] = useState(),
 		[gridSelection, setGridSelection] = useState(null),
 		[textInputValue, setTextInputValue] = useState(''),
 		[newEntityDisplayValue, setNewEntityDisplayValue] = useState(null),
@@ -88,6 +90,10 @@ export function ComboComponent(props) {
 		[width, setWidth] = useState(0),
 		[top, setTop] = useState(0),
 		[left, setLeft] = useState(0),
+		onLayout = (e) => {
+			setIsRendered(true);
+			setContainerWidth(e.nativeEvent.layout.width);
+		},
 		showMenu = async () => {
 			if (isMenuShown) {
 				return;
@@ -738,6 +744,9 @@ export function ComboComponent(props) {
 							const id = entity.id;
 							setValue(id);
 						}
+						if (onSave) {
+							onSave(selection);
+						}
 					}}
 					onRowPress={(item, e) => {
 						if (onRowPress) {
@@ -896,13 +905,31 @@ export function ComboComponent(props) {
 	if (tooltipRef) {
 		refProps.ref = tooltipRef;
 	}
-	assembledComponents = <Row {...refProps} justifyContent="center" alignItems="center" h={styles.FORM_COMBO_HEIGHT} flex={1} onLayout={() => setIsRendered(true)}>
-							{xButton}
-							{eyeButton}
-							{inputAndTrigger}
-							{additionalButtons}
-							{dropdownMenu}
-						</Row>;
+
+	if (isRendered && additionalButtons?.length && containerWidth < 500) {
+		// be responsive for small screen sizes and bump additionalButtons to the next line
+		assembledComponents = 
+			<Column>
+				<Row {...refProps} justifyContent="center" alignItems="center" h={styles.FORM_COMBO_HEIGHT} flex={1}>
+					{xButton}
+					{eyeButton}
+					{inputAndTrigger}
+					{dropdownMenu}
+				</Row>
+				<Row mt={2}>
+					{additionalButtons}
+				</Row>
+			</Column>;
+	} else {
+		assembledComponents = 
+			<Row {...refProps} justifyContent="center" alignItems="center" h={styles.FORM_COMBO_HEIGHT} flex={1} onLayout={onLayout}>
+				{xButton}
+				{eyeButton}
+				{inputAndTrigger}
+				{additionalButtons}
+				{dropdownMenu}
+			</Row>;
+	}
 	
 	if (isViewerShown && Editor) {
 		const propsForViewer = _.pick(props, [

package/src/Components/Form/Form.js

@@ -521,10 +521,20 @@ function Form(props) {
 							}
 
 							if (item.additionalEditButtons) {
-								element = <Row flex={1} flexWrap="wrap">
+								const buttons = buildAdditionalButtons(item.additionalEditButtons, self, { fieldState, formSetValue, formGetValues, formState });
+								if (containerWidth > 400) {
+									element = <Row flex={1} flexWrap="wrap">
+													{element}
+													{buttons}
+												</Row>;
+								} else {
+									element = <Column flex={1} w="100%">
 												{element}
-												{buildAdditionalButtons(item.additionalEditButtons, self, { fieldState, formSetValue, formGetValues, formState })}
-											</Row>;
+												<Row flex={1} w="100%" mt={2} flexWrap="wrap">
+													{buttons}
+												</Row>
+											</Column>;
+								}
 							}
 								
 							let isRequired = false,