@onehat/ui 0.4.85 → 0.4.86

package/package.json

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

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

@@ -1138,6 +1138,24 @@ export const ComboComponent = forwardRef((props, ref) => {
 					/>
 					{checkButton}
 				</HStack>;
+			let modalBackdrop = <ModalBackdrop />
+			if (CURRENT_MODE === UI_MODE_NATIVE) {
+				// Gluestack's ModalBackdrop was not working on Native,
+				// so workaround is to do it manually for now
+				modalBackdrop = <Pressable
+									onPress={() => setIsMenuShown(false)}
+									className={clsx(
+										'ModalBackdrop-replacment',
+										'h-full',
+										'w-full',
+										'absolute',
+										'top-0',
+										'left-0',
+										'bg-[#000]',
+										'opacity-50',
+									)}
+								/>;
+			}
 			dropdownMenu = <Modal
 								isOpen={true}
 								safeAreaTop={true}
@@ -1147,7 +1165,7 @@ export const ComboComponent = forwardRef((props, ref) => {
 									'w-full',
 								)}
 							>
-								<ModalBackdrop />
+								{modalBackdrop}
 								<VStackNative
 									className={clsx(
 										'h-[400px]',

package/src/Components/Grid/Grid.js

@@ -1118,13 +1118,10 @@ function GridComponent(props) {
 				// Keep the current estimated pageSize, just hide the loading overlay
 			}
 		},
-		adjustPageSizeToHeight = (e) => {
+		adjustPageSizeToHeight = (containerHeight) => {
 			if (!Repository || Repository.isDestroyed) { // This method gets delayed, so it's possible for Repository to have been destroyed. Check for this
 				return;
 			}
-			if (onLayout) {
-				onLayout(e);
-			}
 			if (DEBUG) {
 				console.log(`${getMeasurementPhase()}, adjustPageSizeToHeight A`);
 			}
@@ -1135,11 +1132,7 @@ function GridComponent(props) {
 				doAdjustment = false;
 			}
 			if (DEBUG) {
-				console.log(`${getMeasurementPhase()}, adjustPageSizeToHeight A2 doAdjustment=${doAdjustment}, autoAdjustPageSizeToHeight=${autoAdjustPageSizeToHeight}, UiGlobals.autoAdjustPageSizeToHeight=${UiGlobals.autoAdjustPageSizeToHeight}`);
-			}
-			const containerHeight = e.nativeEvent.layout.height;
-			if (DEBUG) {
-				console.log(`${getMeasurementPhase()}, adjustPageSizeToHeight A3 containerHeight=${containerHeight}`);
+				console.log(`${getMeasurementPhase()}, adjustPageSizeToHeight A2 doAdjustment=${doAdjustment}, autoAdjustPageSizeToHeight=${autoAdjustPageSizeToHeight}, UiGlobals.autoAdjustPageSizeToHeight=${UiGlobals.autoAdjustPageSizeToHeight}, containerHeight=${containerHeight}`);
 			}
 			
 			// Only proceed if height changed significantly
@@ -1570,11 +1563,15 @@ function GridComponent(props) {
 						if (DEBUG) {
 							console.log(`${getMeasurementPhase()}, placeholder onLayout, call adjustPageSizeToHeight()`);
 						}
-						adjustPageSizeToHeight(e);
+						const containerHeight = e.nativeEvent.layout.height;
+						adjustPageSizeToHeight(containerHeight);
 						if (DEBUG) {
 							console.log(`${getMeasurementPhase()}, placeholder onLayout, call setIsInited(true)`);
 						}
 						setIsInited(true);
+						if (onLayout) {
+							onLayout(e);
+						}
 					}}
 					className="w-full flex-1"
 				/>;
@@ -1716,7 +1713,10 @@ function GridComponent(props) {
 						ref={containerRef}
 						tabIndex={0}
 						onKeyDown={onGridKeyDown}
-						onLayout={(e) => debouncedAdjustPageSizeToHeight(e)}
+						onLayout={(e) => {
+							const containerHeight = e.nativeEvent.layout.height;
+							debouncedAdjustPageSizeToHeight(containerHeight);
+						}}
 						className={className}
 						style={style}
 					>
@@ -1748,7 +1748,7 @@ function GridComponent(props) {
 							(getMeasurementPhase() === PHASES__INITIAL || getMeasurementPhase() === PHASES__MEASURING) && 
 							entities?.length > 0 && (
 								<VStack className="absolute inset-0 z-10 bg-white">
-									<Loading isScreen={true} />
+									<Loading />
 								</VStack>
 							)}
 						</VStack>

package/src/Components/Hoc/withModal.js

@@ -1,10 +1,15 @@
 import { forwardRef, useState, useRef } from 'react';
 import {
-	Box,
 	Icon,
 	Modal, ModalBackdrop, ModalHeader, ModalContent, ModalCloseButton, ModalBody, ModalFooter,
+	Pressable,
 	Text,
 } from '@project-components/Gluestack';
+import {
+	CURRENT_MODE,
+	UI_MODE_WEB,
+	UI_MODE_NATIVE,
+} from '../../Constants/UiModes.js';
 import clsx from 'clsx';
 import Button from '../Buttons/Button.js';
 import Panel from '../Panel/Panel.js';
@@ -179,6 +184,25 @@ export default function withModal(WrappedComponent) {
 					>{modalBody}</Panel>
 			}
 		}
+
+		let modalBackdrop = <ModalBackdrop className="withModal-ModalBackdrop" />
+		if (CURRENT_MODE === UI_MODE_NATIVE) {
+			// Gluestack's ModalBackdrop was not working on Native,
+			// so workaround is to do it manually for now
+			modalBackdrop = <Pressable
+								onPress={() => hideModal()}
+								className={clsx(
+									'withModal-ModalBackdrop-replacment',
+									'h-full',
+									'w-full',
+									'absolute',
+									'top-0',
+									'left-0',
+									'bg-[#000]',
+									'opacity-50',
+								)}
+							/>;
+		}
 		
 		return <>
 					<WrappedComponent
@@ -199,7 +223,7 @@ export default function withModal(WrappedComponent) {
 							className="withModal-Modal"
 							{...testProps(testID)}
 						>
-							<ModalBackdrop className="withModal-ModalBackdrop" />
+							{modalBackdrop}
 							{modalBody}
 						</Modal>}
 					

package/src/Components/Hoc/withWindowedEditor.js

@@ -1,8 +1,14 @@
 import { forwardRef } from 'react';
 import {
 	Modal, ModalBackdrop, ModalHeader, ModalContent, ModalCloseButton, ModalBody, ModalFooter,
+	Pressable,
 } from '@project-components/Gluestack';
 import clsx from 'clsx';
+import {
+	CURRENT_MODE,
+	UI_MODE_WEB,
+	UI_MODE_NATIVE,
+} from '../../Constants/UiModes.js';
 import {
 	EDITOR_TYPE__WINDOWED,
 } from '../../Constants/Editor.js';
@@ -69,6 +75,25 @@ export default function withWindowedEditor(WrappedComponent, isTree = false) {
 			throw Error('Editor is not defined');
 		}
 
+		let modalBackdrop = <ModalBackdrop className="withEditor-ModalBackdrop" />
+		if (CURRENT_MODE === UI_MODE_NATIVE) {
+			// Gluestack's ModalBackdrop was not working on Native,
+			// so workaround is to do it manually for now
+			modalBackdrop = <Pressable
+								onPress={() => onEditorCancel()}
+								className={clsx(
+									'withEditor-ModalBackdrop-replacment',
+									'h-full',
+									'w-full',
+									'absolute',
+									'top-0',
+									'left-0',
+									'bg-[#000]',
+									'opacity-50',
+								)}
+							/>;
+		}
+
 		return <>
 					<WrappedComponent {...props} ref={ref} />
 					{isEditorShown && 
@@ -77,7 +102,7 @@ export default function withWindowedEditor(WrappedComponent, isTree = false) {
 							onClose={onEditorCancel}
 							className="withEditor-Modal"
 						>
-							<ModalBackdrop className="withEditor-ModalBackdrop" />
+							{modalBackdrop}
 							<Editor
 								editorType={EDITOR_TYPE__WINDOWED}
 								{...propsToPass}

package/src/Components/Messages/ConfirmationMessage.js

@@ -1,8 +1,15 @@
 import {
+	Box,
 	Modal, ModalBackdrop, ModalHeader, ModalContent, ModalCloseButton, ModalBody, ModalFooter,
+	Pressable,
 	Text,
 } from '@project-components/Gluestack';
 import clsx from 'clsx';
+import {
+	CURRENT_MODE,
+	UI_MODE_WEB,
+	UI_MODE_NATIVE,
+} from '../../Constants/UiModes.js';
 import Button from '../Buttons/Button';
 import emptyFn from '../../Functions/emptyFn.js';
 
@@ -13,8 +20,26 @@ export default function ConfirmationMessage(props) {
 			onOk = emptyFn,
 		} = props;
 
+	let modalBackdrop = <ModalBackdrop className="ConfirmationMessage-ModalBackdrop" />
+	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
+							className={clsx(
+								'ConfirmationMessage-ModalBackdrop-replacment',
+								'h-full',
+								'w-full',
+								'absolute',
+								'top-0',
+								'left-0',
+								'bg-[#000]',
+								'opacity-50',
+							)}
+						/>;
+	}
+
 	return <Modal isOpen={true} {...props} _backdrop={{ bg: "#000" }}>
-				<ModalBackdrop />
+				{modalBackdrop}
 				<ModalContent maxWidth="400px">
 					<ModalHeader>Confirm</ModalHeader>
 					<ModalBody

package/src/Components/Messages/ErrorMessage.js

@@ -6,6 +6,11 @@ import {
 	Text,
 } from '@project-components/Gluestack';
 import clsx from 'clsx';
+import {
+	CURRENT_MODE,
+	UI_MODE_WEB,
+	UI_MODE_NATIVE,
+} from '../../Constants/UiModes.js';
 import useAdjustedWindowSize from '../../Hooks/useAdjustedWindowSize.js';
 import Button from '../Buttons/Button.js';
 import Panel from '../Panel/Panel.js';
@@ -21,8 +26,26 @@ export default function ErrorMessage(props) {
 		} = props,
 		[width, height] = useAdjustedWindowSize(500, 250);
 
+	let modalBackdrop = <ModalBackdrop className="ErrorMessage-ModalBackdrop" />
+	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
+							className={clsx(
+								'ErrorMessage-ModalBackdrop-replacment',
+								'h-full',
+								'w-full',
+								'absolute',
+								'top-0',
+								'left-0',
+								'bg-[#000]',
+								'opacity-50',
+							)}
+						/>;
+	}
+
 	return <Modal isOpen={true} {...props} {...testProps('ErrorMessage')}>
-				<ModalBackdrop />
+				{modalBackdrop}
 
 				<Panel
 					title="Alert"

package/src/Components/Messages/OkMessage.js

@@ -1,8 +1,14 @@
 import {
+	Box,
 	Modal, ModalBackdrop, ModalHeader, ModalContent, ModalCloseButton, ModalBody, ModalFooter,
 	Text,
 } from '@project-components/Gluestack';
 import clsx from 'clsx';
+import {
+	CURRENT_MODE,
+	UI_MODE_WEB,
+	UI_MODE_NATIVE,
+} from '../../Constants/UiModes.js';
 import Button from '../Buttons/Button';
 
 export default function OkMessage(props) {
@@ -11,8 +17,26 @@ export default function OkMessage(props) {
 			onClose,
 		} = props;
 
+	let modalBackdrop = <ModalBackdrop className="OkMessage-ModalBackdrop" />
+	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
+							className={clsx(
+								'OkMessage-ModalBackdrop-replacment',
+								'h-full',
+								'w-full',
+								'absolute',
+								'top-0',
+								'left-0',
+								'bg-[#000]',
+								'opacity-50',
+							)}
+						/>;
+	}
+
 	return <Modal {...props} _backdrop={{ bg: "#000" }}>
-				<ModalBackdrop />
+				{modalBackdrop}
 				<ModalContent maxWidth="400px">
 					<ModalBody
 						className={clsx(

package/src/Components/Messages/ProgressModal.js

@@ -1,4 +1,6 @@
-import { useState, useEffect, } from 'react';import {
+import { useState, useEffect, } from 'react';
+import {
+	Box,
 	HStack,
 	Modal, ModalBackdrop, ModalHeader, ModalContent, ModalCloseButton, ModalBody, ModalFooter,
 	Spinner,
@@ -6,6 +8,11 @@ import { useState, useEffect, } from 'react';import {
 	VStack,
 } from '@project-components/Gluestack';
 import clsx from 'clsx';
+import {
+	CURRENT_MODE,
+	UI_MODE_WEB,
+	UI_MODE_NATIVE,
+} from '../../Constants/UiModes.js';
 import { useSelector } from 'react-redux';
 import * as Progress from 'react-native-progress';
 import testProps from '../../Functions/testProps';
@@ -21,13 +28,31 @@ export default function ProgressModal(props) {
 		[progressBarWidth, setProgressBarWidth] = useState(175),
 		[isInited, setIsInited] = useState(false);
 
+	let modalBackdrop = <ModalBackdrop className="ProgressModal-ModalBackdrop" />
+	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
+							className={clsx(
+								'ProgressModal-ModalBackdrop-replacment',
+								'h-full',
+								'w-full',
+								'absolute',
+								'top-0',
+								'left-0',
+								'bg-[#000]',
+								'opacity-50',
+							)}
+						/>;
+	}
+
 	return <Modal
 				{...testProps('ProgressModal')}
 				isOpen={true}
 				className="Modal"
 				aria-disabled={true}
 			>
-				<ModalBackdrop />
+				{modalBackdrop}
 				<ModalContent
 					className={clsx(
 						'ModalContent',

package/src/Components/Messages/WaitMessage.js

@@ -1,6 +1,8 @@
 import {
+	Box,
 	HStack,
 	Modal, ModalBackdrop, ModalHeader, ModalContent, ModalCloseButton, ModalBody, ModalFooter,
+	Pressable,
 	Spinner,
 	Text,
 } from '@project-components/Gluestack';
@@ -20,13 +22,32 @@ export default function WaitMessage(props) {
 	if (!text) { // do this here instead of setting default value in deconstructor, so we can use the default for text, even if text is defined and passed as null or empty string
 		text = 'Please wait...';
 	}
+	
+	let modalBackdrop = <ModalBackdrop className="WaitMessage-ModalBackdrop" />
+	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
+							className={clsx(
+								'WaitMessage-ModalBackdrop-replacment',
+								'h-full',
+								'w-full',
+								'absolute',
+								'top-0',
+								'left-0',
+								'bg-[#000]',
+								'opacity-50',
+							)}
+						/>;
+	}
+
 	return <Modal
 				{...testProps('WaitMessage')}
 				isOpen={true}
 				className="Modal"
 				aria-disabled={true}
 			>
-				<ModalBackdrop />
+				{modalBackdrop}
 				<ModalContent
 					className={clsx(
 						'ModalContent',

package/src/Components/Tree/Tree.js

@@ -1145,7 +1145,7 @@ function TreeComponent(props) {
 							pressed,
 						}) => {
 							const nodeDragProps = {};
-							let WhichNode = TreeNode;
+							let WhichNode = TreeNode,
 								nodeCanSelect = true,
 								nodeCanDrag = false;
 							if (CURRENT_MODE === UI_MODE_WEB) { // DND is currently web-only  TODO: implement for RN