@onehat/ui 0.4.114 → 0.4.116

package/package.json

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

package/src/Components/Buttons/Button.js

@@ -1,4 +1,4 @@
-import { cloneElement, forwardRef, isValidElement, useRef } from 'react';
+import { cloneElement, forwardRef, isValidElement, useContext, useRef } from 'react';
 import {
 	Button,
 	ButtonText,
@@ -10,9 +10,12 @@ import addIconProps from '../../Functions/addIconProps.js';
 import clsx from 'clsx';
 import withComponent from '../Hoc/withComponent.js';
 import withTooltip from '../Hoc/withTooltip.js';
+import FormContext from '../Form/FormContext.js';
 import _ from 'lodash';
 
 const ButtonComponent = forwardRef((props, ref) => {
+
+	const formContext = useContext(FormContext);
 	let {
 			self,
 			text, // the text to display on the button
@@ -32,6 +35,16 @@ const ButtonComponent = forwardRef((props, ref) => {
 		propsToPass.onPress = propsToPass.handler; // alias
 	}
 
+	const {
+		disableOnInvalid,
+		...propsToPassWithoutDisableOnInvalid
+	} = propsToPass;
+	propsToPass = propsToPassWithoutDisableOnInvalid;
+
+	if (_.isNil(propsToPass.isDisabled) && disableOnInvalid && formContext && !formContext.isValid) {
+		propsToPass.isDisabled = true;
+	}
+
 	if (icon) {
 		if (isValidElement(icon)) {
 			if (_icon) {
@@ -64,8 +77,10 @@ const ButtonComponent = forwardRef((props, ref) => {
 		'flex',
 		'flex-row',
 		'items-center',
-		'disabled:opacity-40',
-		'disabled:cursor-not-allowed',
+		'data-[disabled=true]:opacity-40',
+		'data-[disabled=true]:cursor-not-allowed',
+		'web:disabled:opacity-40',
+		'web:disabled:cursor-not-allowed',
 	);
 	if (isExpandToFillVertical) {
 		// IMPORTANT! Otherwise the button will cut off the vertical content due to size classes automatically added by Gluestack (e.g. h-10)

package/src/Components/Container/Container.js

@@ -115,6 +115,7 @@ function Container(props) {
 		southRef = useRef(null),
 		eastRef = useRef(null),
 		westRef = useRef(null),
+		centerWidthRef = useRef(null), // used to store the width of the center area, which is used to calculate max widths for east and west
 		northHeightRef = useRef(northInitialHeight),
 		southHeightRef = useRef(southInitialHeight),
 		eastWidthRef = useRef(eastInitialWidth),
@@ -202,6 +203,12 @@ function Container(props) {
 				localEastIsCollapsedRef.current = bool;
 			}
 
+			if (!bool) {
+				setSideWidth('east', getEastWidth() ?? eastInitialWidth, {
+					ignoreCollapsedCheck: true,
+				});
+			}
+
 			if (id) {
 				setSaved(id + '-eastIsCollapsed', bool);
 			}
@@ -220,6 +227,12 @@ function Container(props) {
 				localWestIsCollapsedRef.current = bool;
 			}
 
+			if (!bool) {
+				setSideWidth('west', getWestWidth() ?? westInitialWidth, {
+					ignoreCollapsedCheck: true,
+				});
+			}
+
 			if (id) {
 				setSaved(id + '-westIsCollapsed', bool);
 			}
@@ -253,24 +266,76 @@ function Container(props) {
 		getSouthHeight = () => {
 			return southHeightRef.current;
 		},
-		setEastWidth = (width) => {
-			if (!getEastIsCollapsed()) {
-				eastWidthRef.current = width;
+		setCenterWidth = (width) => {
+			centerWidthRef.current = width;
+		},
+		getCenterWidth = () => {
+			return centerWidthRef.current;
+		},
+		getMaxSideWidth = () => {
+			const width = getCenterWidth();
+			if (!_.isFinite(width) || width <= 0) {
+				return null;
+			}
+
+			return width;
+		},
+		clampSideWidth = (width) => {
+			if (_.isNil(width)) {
+				return width;
+			}
+
+			const maxSideWidth = getMaxSideWidth();
+			if (_.isNil(maxSideWidth)) {
+				return width;
+			}
+
+			return Math.min(width, maxSideWidth);
+		},
+		setSideWidth = (side, width, opts = {}) => {
+			const
+				{
+					ignoreCollapsedCheck = false,
+				} = opts,
+				isCollapsed = side === 'east' ? getEastIsCollapsed() : getWestIsCollapsed();
+
+			if (!ignoreCollapsedCheck && isCollapsed) {
+				return;
+			}
+
+			const clampedWidth = clampSideWidth(width);
+			if (side === 'east') {
+				eastWidthRef.current = clampedWidth;
 				if (id) {
-					setSaved(id + '-eastWidth', width);
+					setSaved(id + '-eastWidth', clampedWidth);
 				}
+			} else {
+				westWidthRef.current = clampedWidth;
+				if (id) {
+					setSaved(id + '-westWidth', clampedWidth);
+				}
+			}
+		},
+		normalizeSideWidthForRender = (width, initialWidth) => {
+			if (_.isNil(width)) {
+				return width;
 			}
+
+			const maxSideWidth = getMaxSideWidth();
+			if (_.isNil(maxSideWidth)) {
+				return _.isFinite(initialWidth) && initialWidth > 0 ? initialWidth : width;
+			}
+
+			return Math.min(width, maxSideWidth);
+		},
+		setEastWidth = (width) => {
+			setSideWidth('east', width);
 		},
 		getEastWidth = () => {
 			return eastWidthRef.current;
 		},
 		setWestWidth = (width) => {
-			if (!getWestIsCollapsed()) {
-				westWidthRef.current = width;
-				if (id) {
-					setSaved(id + '-westWidth', width);
-				}
-			}
+			setSideWidth('west', width);
 		},
 		getWestWidth = () => {
 			return westWidthRef.current;
@@ -409,6 +474,7 @@ function Container(props) {
 	if (!isReady) {
 		return null;
 	}
+
 	
 	let componentProps = { _panel: { ...center?.props?._panel }, },
 		wrapperProps = null,
@@ -533,11 +599,17 @@ function Container(props) {
 				width: 33,
 			};
 		} else {
-			const eastWidth = getEastWidth();
+			const eastWidth = normalizeSideWidthForRender(getEastWidth(), eastInitialWidth);
 			if (_.isNil(eastWidth)) {
-				wrapperProps.style = { flex: eastInitialFlex || 50, };
+				wrapperProps.style = {
+					flex: eastInitialFlex || 50,
+					maxWidth: '100%',
+				};
 			} else {
-				wrapperProps.style = { width: eastWidth, };
+				wrapperProps.style = {
+					width: eastWidth,
+					maxWidth: '100%',
+				};
 			}
 		}
 		componentProps._panel.collapseDirection = HORIZONTAL;
@@ -576,11 +648,17 @@ function Container(props) {
 				width: 33,
 			};
 		} else {
-			const westWidth = getWestWidth();
+			const westWidth = normalizeSideWidthForRender(getWestWidth(), westInitialWidth);
 			if (_.isNil(westWidth)) {
-				wrapperProps.style = { flex: westInitialFlex || 50, };
+				wrapperProps.style = {
+					flex: westInitialFlex || 50,
+					maxWidth: '100%',
+				};
 			} else {
-				wrapperProps.style = { width: westWidth, };
+				wrapperProps.style = {
+					width: westWidth,
+					maxWidth: '100%',
+				};
 			}
 		}
 		componentProps._panel.collapseDirection = HORIZONTAL;
@@ -600,13 +678,31 @@ function Container(props) {
 							{cloneElement(west, componentProps)}
 						</BoxNative>;
 	}
-	return <VStack className="Container-all w-full flex-1">
+	return <VStack className="Container-all flex-1 min-w-0">
 				{northComponent}
 				{!getNorthIsCollapsed() && northSplitter}
-				<HStack className="Container-mid w-full flex-[100]">
+				<HStack
+					className="Container-mid w-full flex-[100] min-w-0"
+					onLayout={(e) => {
+						// Measure available horizontal space for side panels.
+						const width = parseFloat(e.nativeEvent.layout.width);
+						if (width && width !== getCenterWidth()) {
+							// Save latest width and clamp east/west if they exceed it.
+							setCenterWidth(width);
+							if (getEastWidth() > width) {
+								setEastWidth(width);
+							}
+							if (getWestWidth() > width) {
+								setWestWidth(width);
+							}
+							// Trigger a render so updated widths are applied immediately.
+							forceUpdate();
+						}
+					}}
+				>
 					{westComponent}
 					{!getWestIsCollapsed() && westSplitter}
-					<VStack className="Container-center h-full overflow-auto flex-[100]">
+					<VStack className="Container-center h-full overflow-auto flex-[100] min-w-0">
 						{centerComponent}
 					</VStack>
 					{!getEastIsCollapsed() && eastSplitter}

package/src/Components/Form/Form.js

@@ -1,4 +1,4 @@
-import { useEffect, useCallback, useState, useRef, isValidElement, } from 'react';
+import { useEffect, useCallback, useState, useRef, isValidElement, cloneElement, Children, } from 'react';
 import {
 	Box,
 	HStack,
@@ -59,6 +59,7 @@ import Xmark from '../Icons/Xmark.js';
 import Check from '../Icons/Check.js';
 import Footer from '../Layout/Footer.js';
 import Label from '../Form/Label.js';
+import FormContext from '../Form/FormContext.js';
 import _ from 'lodash';
 
 // TODO: memoize field Components
@@ -261,6 +262,7 @@ function Form(props) {
 			context: { isPhantom },
 		}),
 		currentEditorMode = getEditorMode(),
+		resolvedEditorMode = currentEditorMode || props.editorMode || null,
 		buildFromColumnsConfig = () => {
 			// Only used in InlineEditor
 			// Build the fields that match the current columnsConfig in the grid
@@ -1119,12 +1121,63 @@ function Form(props) {
 				alert(errors.message);
 			}
 		},
+		decorateAdditionalFooterItems = (elements) => {
+			const decorateElement = (element) => {
+				if (!isValidElement(element)) {
+					return element;
+				}
+
+				const
+					elementProps = element.props || {},
+					propsToInject = {};
+
+				if (elementProps.disableOnInvalid && !formState.isValid) {
+					propsToInject.isDisabled = true;
+				}
+
+				if (typeof elementProps.onPress === 'function' && (elementProps.disableOnInvalid || elementProps.skipSubmit || elementProps.submitWithForm)) {
+					const originalOnPress = elementProps.onPress;
+					if (elementProps.skipSubmit) {
+						propsToInject.onPress = () => originalOnPress();
+					} else {
+						propsToInject.onPress = (e) => handleSubmit(originalOnPress, onSubmitError)(e);
+					}
+				}
+
+				if (elementProps.children) {
+					propsToInject.children = Children.map(elementProps.children, decorateElement);
+				}
+
+				if (_.isEmpty(propsToInject)) {
+					return element;
+				}
+
+				return cloneElement(element, propsToInject);
+			};
+
+			return Children.map(elements, decorateElement);
+		},
 		doReset = (values) => {
 			reset(values);
 			if (onReset) {
 				onReset(values, formSetValue, formGetValues, trigger);
 			}
 		},
+		resetFromRecord = () => {
+			if (!record || _.isArray(record) || record.isDestroyed) {
+				return;
+			}
+
+			const
+				currentValues = formGetValues(),
+				recordValues = record.submitValues || record,
+				nextValues = {
+					...currentValues,
+					..._.pick(recordValues, Object.keys(currentValues)),
+				};
+
+			doReset(nextValues);
+		},
 		onSaveDecorated = async (data, e) => {
 			// reset the form after a save
 			const result = await onSave(data, e);
@@ -1189,6 +1242,21 @@ function Form(props) {
 		}
 	}, [record]);
 
+	useEffect(() => {
+		// If this form is bound to a single record, reset the form whenever that record emits a 'reload' event.
+		// This ensures the form stays in sync with the latest data for that record.
+		
+		if (skipAll || !isSingle || !record?.on || !record?.off) {
+			return;
+		}
+
+		record.on('reload', resetFromRecord);
+
+		return () => {
+			record.off('reload', resetFromRecord);
+		};
+	}, [record, skipAll, isSingle]);
+
 	useEffect(() => {
 		if (skipAll) {
 			return;
@@ -1313,10 +1381,18 @@ function Form(props) {
 		showCancelBtn = false,
 		showSaveBtn = false,
 		showSubmitBtn = false,
-		isAddMode = getEditorMode() === EDITOR_MODE__ADD,
-		isEditableMode =
-			getEditorMode() === EDITOR_MODE__ADD ||
-			getEditorMode() === EDITOR_MODE__EDIT;
+		isAddMode = resolvedEditorMode === EDITOR_MODE__ADD,
+		isEditableMode = (() => {
+			// Keep explicit editor modes authoritative, but preserve legacy modal behavior:
+			// if no mode is supplied, treat forms with onSave as editable so Save can render.
+			if (resolvedEditorMode === EDITOR_MODE__ADD || resolvedEditorMode === EDITOR_MODE__EDIT) {
+				return true;
+			}
+			if (resolvedEditorMode === EDITOR_MODE__VIEW) {
+				return false;
+			}
+			return !!onSave;
+		})();
 	if (containerWidth) { // we need to render this component twice in order to get the container width. Skip this on first render
 
 		// create editor
@@ -1341,7 +1417,7 @@ function Form(props) {
 			additionalButtons = buildAdditionalButtons(additionalEditButtons);
 
 			if (inArray(editorType, [EDITOR_TYPE__SIDE, EDITOR_TYPE__SMART, EDITOR_TYPE__WINDOWED]) && 
-				isSingle && getEditorMode() === EDITOR_MODE__EDIT && 
+				isSingle && resolvedEditorMode === EDITOR_MODE__EDIT && 
 				(onBack || onViewMode || isEditorModeControlledByParent)) {
 				modeHeader = <Toolbar>
 								<HStack className="flex-1 items-center">
@@ -1377,7 +1453,7 @@ function Form(props) {
 									/>}
 							</Toolbar>;
 			}
-			if (getEditorMode() === EDITOR_MODE__EDIT && !_.isEmpty(additionalButtons)) {
+			if (resolvedEditorMode === EDITOR_MODE__EDIT && !_.isEmpty(additionalButtons)) {
 				formButtons = <Toolbar className="justify-end flex-wrap gap-2">
 									{additionalButtons}
 								</Toolbar>;
@@ -1402,7 +1478,7 @@ function Form(props) {
 		if (_.isEmpty(formState.dirtyFields) && !isPhantom && !isAddMode) {
 			isSaveDisabled = true;
 		}
-		if (onDelete && getEditorMode() === EDITOR_MODE__EDIT && isSingle) {
+		if (onDelete && resolvedEditorMode === EDITOR_MODE__EDIT && isSingle) {
 			showDeleteBtn = true;
 		}
 		if (!isEditorViewOnly && isEditableMode && !hideResetButton) {
@@ -1444,7 +1520,7 @@ function Form(props) {
 		}
 		footerItems =
 			<>
-				{additionalFooterItems}
+				{decorateAdditionalFooterItems(additionalFooterItems)}
 				{!additionalFooterItems && additionalFooterButtons && _.map(additionalFooterButtons, (props, ix) => {
 					let isDisabled = false;
 					if (props.disableOnInvalid) {
@@ -1597,7 +1673,8 @@ function Form(props) {
 		className += ' ' + props.className;
 	}
 	const scrollToTopAnchor = <Box ref={(el) => (ancillaryItemsRef.current[0] = el)} className="h-0" />;
-	return <VStackNative
+	return <FormContext.Provider value={{ isValid: formState.isValid }}>
+			<VStackNative
 				ref={formRef}
 				{...testProps(self)}
 				style={style}
@@ -1639,7 +1716,8 @@ function Form(props) {
 					{isFabVisible && fab}
 
 				</>}
-			</VStackNative>;
+			</VStackNative>
+		</FormContext.Provider>;
 }
 
 // helper fns

package/src/Components/Form/FormContext.js

@@ -0,0 +1,7 @@
+import { createContext } from 'react';
+
+const FormContext = createContext({
+	isValid: true,
+});
+
+export default FormContext;

package/src/PlatformImports/Web/Attachments.js

@@ -93,7 +93,7 @@ function FileCardCustom(props) {
 			onPress={() => {
 				downloadInBackground(downloadUrl);
 			}}
-			className="Pressable px-3 py-1 items-center flex-row rounded-[5px] border border-primary.700"
+			className="Pressable max-w-full px-3 py-1 items-center flex-row rounded-[5px] border border-primary.700"
 		>
 			{isDownloading &&
 				<Spinner className="mr-2" />}
@@ -103,7 +103,7 @@ function FileCardCustom(props) {
 					icon={Eye}
 					onPress={() => onSee(id)}
 				/>}
-			<Text>{filename}</Text>
+			<Text className="max-w-[220px] truncate">{filename}</Text>
 			{onDelete &&
 				<IconButton
 					className="ml-1"
@@ -868,7 +868,9 @@ function AttachmentsElement(props) {
 								className={clsx(
 									'AttachmentsElement-HStack',
 									'flex-1',
+									'w-full',
 									'min-h-0',
+									'min-w-0',
 									'overflow-y-auto',
 									'gap-2',
 									'flex-wrap',
@@ -908,7 +910,7 @@ function AttachmentsElement(props) {
 
 									return <Box
 												key={file.id}
-												className="mr-2"
+												className="mr-2 min-w-0 max-w-full"
 											>
 												{useFileMosaic &&
 													<DraggableFileMosaic
@@ -1142,7 +1144,7 @@ function AttachmentsElement(props) {
 							className: '!hidden',
 							deleteFiles: false,
 						}}
-						className="attachments-dropzone flex-1 h-full" // Add flex classes to ensure full height
+						className="attachments-dropzone flex-1 h-full min-w-0 overflow-x-hidden" // Keep horizontal containment while allowing vertical scrolling
 						onUploadStart={onUploadStart}
 						onUploadFinish={onUploadFinish}
 						background={styles.ATTACHMENTS_BG}
@@ -1285,6 +1287,8 @@ function AttachmentsElement(props) {
 		'AttachmentsElement',
 		'testx',
 		'w-full',
+		'min-w-0',
+		'overflow-x-hidden',
 		'h-[400px]',
 		'border-2',
 		'rounded-[5px]',

package/src/Styles/Global.css

@@ -1,14 +1,19 @@
-html, body {
-	/* -webkit-user-select: none;
-	user-select: none; */
-}
-
 /* to fix the inline editor */
 [data-testid="gridContainer"] > [data-testid="ScrollView"] > div {
 	height: 100%;
 }
 
 /* Custom styles for attachments dropzone */
+.attachments-dropzone {
+	width: 100%;
+	min-width: 0;
+	overflow-x: hidden;
+}
+
 .attachments-dropzone .files-ui-dropzone-children-container {
 	padding: 0 !important;
+	width: 100%;
+	min-width: 0;
+	min-height: 0;
+	overflow-x: hidden;
 }