@onehat/ui 0.4.88 → 0.4.91

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@onehat/ui",
-	"version": "0.4.88",
+	"version": "0.4.91",
 	"description": "Base UI for OneHat apps",
 	"main": "src/index.js",
 	"type": "module",
@@ -57,12 +57,12 @@
 		"@hookform/resolvers": "^5.0.0",
 		"@k-renwick/colour-mixer": "^1.2.1",
 		"@legendapp/motion": "^2.4.0",
-		"@onehat/data": "^1.22.0",
-		"@react-native-community/slider": "^4.5.2",
-		"@reduxjs/toolkit": "^2.6.1",
+		"@onehat/data": "^1.22.31",
+		"@react-native-community/slider": "^5.1.1",
+		"@reduxjs/toolkit": "^2.11.2",
 		"clsx": "^2.1.1",
-		"decimal.js": "^10.5.0",
-		"inflector-js": "^1.0.1",
+		"decimal.js": "^10.6.0",
+		"inflector-js": "^2.0.1",
 		"js-cookie": "^3.0.5",
 		"nativewind": "4.1.23",
 		"normalize-css-color": "^1.0.2",
@@ -71,7 +71,7 @@
 		"react-redux": "^9.2.0",
 		"tailwind-scrollbar": "^3.1.0",
 		"tailwindcss": "^3.4.17",
-		"yup": "^1.6.1"
+		"yup": "^1.7.1"
 	},
 	"peerDependencies": {
 		"@ckeditor/ckeditor5-react": "^6.3.0",

package/src/Components/Form/Form.js

@@ -339,13 +339,13 @@ function Form(props) {
 					if (renderer) {
 						value = renderer(record);
 					} else {
-						if (record?.properties && record.properties[fieldName]) {
+						if (record?.properties?.hasOwnProperty(fieldName)) {
 							value = record.properties[fieldName].displayValue;
 						}
-						if (_.isNil(value) && record && record[fieldName]) {
+						if (_.isNil(value) && record?.hasOwnProperty(fieldName)) {
 							value = record[fieldName];
 						}
-						if (_.isNil(value) && startingValues && startingValues[fieldName]) {
+						if (_.isNil(value) && startingValues?.hasOwnProperty(fieldName)) {
 							value = startingValues[fieldName];
 						}
 					}

package/src/Components/Grid/Grid.js

@@ -1569,9 +1569,6 @@ function GridComponent(props) {
 							console.log(`${getMeasurementPhase()}, placeholder onLayout, call setIsInited(true)`);
 						}
 						setIsInited(true);
-						if (onLayout) {
-							onLayout(e);
-						}
 					}}
 					className="w-full flex-1"
 				/>;
@@ -1716,6 +1713,10 @@ function GridComponent(props) {
 						onLayout={(e) => {
 							const containerHeight = e.nativeEvent.layout.height;
 							debouncedAdjustPageSizeToHeight(containerHeight);
+							
+							if (onLayout) {
+								onLayout(e);
+							}
 						}}
 						className={className}
 						style={style}

package/src/Components/Hoc/withModal.js

@@ -1,4 +1,4 @@
-import { forwardRef, useState, useRef } from 'react';
+import { forwardRef, useState } from 'react';
 import {
 	Icon,
 	Modal, ModalBackdrop, ModalHeader, ModalContent, ModalCloseButton, ModalBody, ModalFooter,
@@ -44,8 +44,6 @@ export default function withModal(WrappedComponent) {
 			[body, setBody] = useState(),
 			[whichModal, setWhichModal] = useState(),
 			[testID, setTestID] = useState('Modal'),
-			autoFocusRef = useRef(null),
-			cancelRef = useRef(null),
 			[windowWidth, windowHeight] = useAdjustedWindowSize(w, h),
 			hideModal = () => {
 				setIsModalShown(false);
@@ -113,7 +111,6 @@ export default function withModal(WrappedComponent) {
 									key="cancelBtn"
 									onPress={onCancel || hideModal}
 									colorScheme="coolGray"
-									ref={cancelRef}
 									className="mr-2"
 									text="Cancel"
 									variant="outline" // or unstyled
@@ -133,7 +130,6 @@ export default function withModal(WrappedComponent) {
 				buttons.push(<Button
 								{...testProps('okBtn')}
 								key="okBtn"
-								ref={autoFocusRef}
 								onPress={onOk}
 								text={okBtnLabel}
 								className="text-white"
@@ -143,7 +139,6 @@ export default function withModal(WrappedComponent) {
 				buttons.push(<Button
 								{...testProps('yesBtn')}
 								key="yesBtn"
-								ref={autoFocusRef}
 								onPress={onYes}
 								text="Yes"
 								className="text-white"

package/src/Components/Hoc/withPdfButtons.js

@@ -319,14 +319,58 @@ export default function withPdfButtons(WrappedComponent) {
 							/>,
 				});
 			},
-			getPdf = (data) => {
+			getPdf = async (data) => {
+				// NOTE: we previously used a simple window.open() with the URL to view the PDF,
+				// but this doesn't work when authentication headers are required.
+				// So now we fetch the PDF ourselves, then open it in a new window.
+
 				data.id = selection[0].id;
 
 				const
-					url = UiGlobals.baseURL + model + '/viewModelPdf?',
-					queryString = qs.stringify(data);
+					url = UiGlobals.baseURL + model + '/viewModelPdf',
+					queryString = qs.stringify(data),
+					fullUrl = url + '?' + queryString;
+
+				try {
+					// Show loading indicator
+					const
+						dispatch = UiGlobals.redux.dispatch,
+						setIsWaitModalShownAction = UiGlobals.systemReducer.setIsWaitModalShownAction;
+					dispatch(setIsWaitModalShownAction(true));
+
+					// Fetch with auth headers
+					const response = await fetch(fullUrl, {
+						method: 'GET',
+						headers: {
+							...Repository.headers,
+						},
+					});
 
-				window.open(url + queryString, '_blank');
+					dispatch(setIsWaitModalShownAction(false));
+
+					if (!response.ok) {
+						throw new Error(`HTTP error! status: ${response.status}`);
+					}
+
+					// Get the PDF blob
+					const blob = await response.blob();
+					
+					// Create a blob URL
+					const blobUrl = URL.createObjectURL(blob);
+					
+					// Open in new window
+					window.open(blobUrl, '_blank');
+
+					// Clean up the blob URL after a delay
+					// (give it time to load in the new window)
+					setTimeout(() => {
+						URL.revokeObjectURL(blobUrl);
+					}, 1000);
+
+				} catch (error) {
+					console.error('Failed to fetch PDF:', error);
+					alert('Failed to load PDF. Please try again.');
+				}
 			},
 			sendEmail = async (data) => {
 

package/src/Components/Messages/WaitMessage.js

@@ -27,18 +27,52 @@ export default function WaitMessage(props) {
 	if (CURRENT_MODE === UI_MODE_NATIVE) {
 		// Gluestack's ModalBackdrop was not working on Native,
 		// so workaround is to do it manually for now
-		modalBackdrop = <Box
+		return <Modal
+					{...testProps('WaitMessage')}
+					isOpen={true}
+					className="Modal"
+					aria-disabled={true}
+				>
+					<Box
+						className={clsx(
+							'WaitMessage-ModalBackdrop-replacment',
+							'h-full',
+							'w-full',
+							'absolute',
+							'top-0',
+							'left-0',
+							'bg-[#000]',
+							'opacity-50',
+						)}
+					/>
+					{/* <ModalContent
+						className={clsx(
+							'ModalContent',
+							'w-[200px]',
+							CURRENT_MODE === UI_MODE_WEB ? 'h-[50px]' : '',
+							'shadow-lg',
+						)}
+					> */}
+						<HStack
 							className={clsx(
-								'WaitMessage-ModalBackdrop-replacment',
-								'h-full',
-								'w-full',
-								'absolute',
-								'top-0',
-								'left-0',
-								'bg-[#000]',
-								'opacity-50',
+								'HStack',
+								'items-center',
+								'justify-center',
+								'bg-white',
+								'p-4',
+								'rounded-md',
 							)}
-						/>;
+						>
+							<Spinner
+								className={clsx(
+									'mr-2',
+									'focus:outline-none',
+								)}
+							/>
+							<Text className="text-black">{text}</Text>
+						</HStack>
+					{/* </ModalContent> */}
+				</Modal>;
 	}
 
 	return <Modal
@@ -47,7 +81,7 @@ export default function WaitMessage(props) {
 				className="Modal"
 				aria-disabled={true}
 			>
-				{modalBackdrop}
+				<ModalBackdrop className="WaitMessage-ModalBackdrop" />
 				<ModalContent
 					className={clsx(
 						'ModalContent',

package/src/Components/Viewer/Viewer.js

@@ -257,7 +257,13 @@ function Viewer(props) {
 				label = propertyDef.title;
 			}
 
-			let value = record?.properties?.[name]?.displayValue || record?.[name] || null;
+			let value = null;
+			if (record?.properties?.hasOwnProperty(name)) {
+				value = record.properties[name].displayValue;
+			}
+			if (_.isNil(value) && record?.hasOwnProperty(name)) {
+				value = record[name];
+			}
 			const
 				schema = record?.repository?.getSchema(),
 				propertyDefinition = schema?.getPropertyDefinition(name);

package/src/PlatformImports/Web/Attachments.js

@@ -385,7 +385,7 @@ function AttachmentsElement(props) {
 				
 				alert('Files cannot be downloaded and viewed within an iOS PWA. Please use the Safari browser instead.');
 			} else {
-				downloadInBackground(url);
+				downloadInBackground(url, {}, Attachments.headers);
 			}
 		},