@onehat/ui 0.4.115 → 0.4.117

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@onehat/ui",
-	"version": "0.4.115",
+	"version": "0.4.117",
 	"description": "Base UI for OneHat apps",
 	"main": "src/index.js",
 	"type": "module",
@@ -54,22 +54,22 @@
 		"@gluestack-ui/textarea": "^0.1.24",
 		"@gluestack-ui/toast": "^1.0.9",
 		"@gluestack-ui/tooltip": "^0.1.44",
-		"@hookform/resolvers": "^5.0.0",
+		"@hookform/resolvers": "^5.4.0",
 		"@k-renwick/colour-mixer": "^1.2.1",
-		"@legendapp/motion": "^2.4.0",
-		"@onehat/data": "^1.22.31",
-		"@reduxjs/toolkit": "^2.11.2",
+		"@legendapp/motion": "^2.5.3",
+		"@onehat/data": "^1.22.41",
+		"@reduxjs/toolkit": "^2.12.0",
 		"clsx": "^2.1.1",
 		"decimal.js": "^10.6.0",
 		"inflector-js": "^2.0.1",
-		"js-cookie": "^3.0.5",
-		"nativewind": "4.1.23",
+		"js-cookie": "^3.0.8",
+		"nativewind": "4.2.5",
 		"normalize-css-color": "^1.0.2",
-		"react-hook-form": "^7.55.0",
+		"react-hook-form": "^7.77.0",
 		"react-native-progress": "^5.0.1",
-		"react-redux": "^9.2.0",
-		"tailwind-scrollbar": "^3.1.0",
-		"tailwindcss": "^3.4.17",
+		"react-redux": "^9.3.0",
+		"tailwind-scrollbar": "^4.0.2",
+		"tailwindcss": "^4.3.0",
 		"yup": "^1.7.1"
 	},
 	"peerDependencies": {
@@ -92,19 +92,15 @@
 		"use-file-picker": "^2.1.1"
 	},
 	"devDependencies": {
-		"@babel/core": "^7.22.1",
-		"@babel/node": "^7.22.1",
-		"@babel/plugin-transform-class-properties": "^7.22.3",
-		"@babel/plugin-transform-runtime": "^7.22.4",
-		"@babel/preset-env": "^7.22.4",
-		"@babel/register": "^7.21.0",
-		"@babel/runtime": "^7.22.3",
-		"@ckeditor/ckeditor5-react": "^5.0.6",
-		"@cypress/webpack-preprocessor": "^5.17.1",
-		"babel-loader": "^9.1.2",
-		"cypress": "12.13.0",
-		"ink-docstrap": "^1.3.2",
-		"jsdoc": "^4.0.2",
-		"webpack": "^5.85.0"
+		"@babel/core": "^7.29.7",
+		"@babel/node": "^7.29.7",
+		"@babel/plugin-transform-class-properties": "^7.29.7",
+		"@babel/plugin-transform-runtime": "^7.29.7",
+		"@babel/preset-env": "^7.29.7",
+		"@babel/register": "^7.29.7",
+		"@babel/runtime": "^7.29.7",
+		"@cypress/webpack-preprocessor": "^7.1.1",
+		"babel-loader": "^10.1.1",
+		"webpack": "^5.107.2"
 	}
 }

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

@@ -262,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
@@ -1162,6 +1163,21 @@ function Form(props) {
 				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);
@@ -1226,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;
@@ -1350,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
@@ -1378,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">
@@ -1414,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>;
@@ -1439,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) {

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;
 }