@onehat/ui 0.3.59 → 0.3.60

package/package.json

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

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

@@ -1,6 +1,6 @@
 import React, { useState, useEffect, useRef, } from 'react';
 import {
-	Box,
+	Modal,
 	Popover,
 	Pressable,
 	Row,
@@ -8,6 +8,7 @@ import {
 	Tooltip,
 } from 'native-base';
 import {
+	UI_MODE_REACT_NATIVE,
 	UI_MODE_WEB,
 } from '../../../../Constants/UiModes.js';
 import UiGlobals from '../../../../UiGlobals.js';
@@ -60,7 +61,6 @@ export function ComboComponent(props) {
 		triggerRef = useRef(),
 		menuRef = useRef(),
 		displayValueRef = useRef(null),
-		savedSearch = useRef(null),
 		typingTimeout = useRef(),
 		[isMenuShown, setIsMenuShown] = useState(false),
 		[isRendered, setIsRendered] = useState(false),
@@ -117,12 +117,6 @@ export function ComboComponent(props) {
 		toggleMenu = () => {
 			setIsMenuShown(!isMenuShown);
 		},
-		getSavedSearch = () => {
-			return savedSearch.current;
-		},
-		setSavedSearch = (val) => {
-			savedSearch.current = val;
-		},
 		resetInputTextValue = () => {
 			setTextInputValue(getDisplayValue());
 		},
@@ -186,9 +180,7 @@ export function ComboComponent(props) {
 			}
 
 			if (_.isEmpty(value)) {
-				// text input is cleared
-				hideMenu();
-				return;
+				setValue(null);
 			}
 
 			setTextInputValue(value);
@@ -200,7 +192,9 @@ export function ComboComponent(props) {
 			}, 300);
 		},
 		onInputFocus = (e) => {
-			inputRef.current.select();
+			if (inputRef.current.select) {
+				inputRef.current.select();
+			}
 		},
 		onInputBlur = (e) => {
 			if (isEventStillInComponent(e)) {
@@ -278,8 +272,6 @@ export function ComboComponent(props) {
 				} else {
 					throw Error('Not yet implemented');
 				}
-
-				setSavedSearch(null);
 			
 			} else {
 				// throw Error('Not yet implemented');
@@ -331,7 +323,6 @@ export function ComboComponent(props) {
 					Repository.filter(filter);
 				}
 
-				setSavedSearch(value);
 				setNewEntityDisplayValue(value); // capture the search query so we can tell Grid what to use for a new entity's displayValue
 			
 			} else {
@@ -435,105 +426,47 @@ export function ComboComponent(props) {
 		self.clear = onClearBtn;
 	}
 
-	const refProps = {};
-	if (tooltipRef) {
-		refProps.ref = tooltipRef;
+	let xButton = null,
+		inputAndTrigger = null,
+		grid = null,
+		dropdownMenu = null,
+		assembledComponents = null;
+	
+	if (showXButton && !_.isNil(value)) {
+		xButton = <IconButton
+						_icon={{
+							as: Xmark,
+							color: 'trueGray.600',
+							size: 'sm',
+						}}
+						isDisabled={isDisabled}
+						onPress={onClearBtn}
+						h="100%"
+						bg={styles.FORM_COMBO_TRIGGER_BG}
+						_hover={{
+							bg: styles.FORM_COMBO_TRIGGER_HOVER_BG,
+						}}
+					/>;
 	}
 
-	const gridProps = _.pick(props, [
-		'Editor',
-		'model',
-		'Repository',
-		'data',
-		'idIx',
-		'displayIx',
-		'value',
-		'disableView',
-		'disableCopy',
-		'disableDuplicate',
-		'disablePrint',
-	]);
-
-	const WhichGrid = isEditor ? WindowedGridEditor : Grid;
-	
-	let comboComponent = <Row {...refProps} justifyContent="center" alignItems="center" h={styles.FORM_COMBO_HEIGHT} flex={1} onLayout={() => setIsRendered(true)}>
-								{showXButton && !_.isNil(value) && 
-									<IconButton
-										_icon={{
-											as: Xmark,
-											color: 'trueGray.600',
-											size: 'sm',
-										}}
-										isDisabled={isDisabled}
-										onPress={onClearBtn}
-										h="100%"
-										bg={styles.FORM_COMBO_TRIGGER_BG}
-										_hover={{
-											bg: styles.FORM_COMBO_TRIGGER_HOVER_BG,
-										}}
-									/>}
-								{disableDirectEntry ?
-									<Pressable
-										onPress={toggleMenu}
-										flex={1}
-										h="100%"
-									>
-										<Text
-											ref={inputRef}
-											onLayout={(e) => {
-												// On web, this is not needed, but on RN it might be, so leave it in for now
-												const {
-														height,
-														width,
-														top,
-														left,
-													} = e.nativeEvent.layout;
-												setWidth(width);
-												setTop(top + height);
-												setLeft(left);
-											}}
-											flex={1}
-											h="100%"
-											numberOfLines={1}
-											ellipsizeMode="head"
-											m={0}
-											p={2}
-											borderWidth={1}
-											borderColor="trueGray.400"
-											borderTopRightRadius={0}
-											borderBottomRightRadius={0}
-											fontSize={styles.FORM_COMBO_INPUT_FONTSIZE}
-											bg={styles.FORM_COMBO_INPUT_BG}
-											_focus={{
-												bg: styles.FORM_COMBO_INPUT_FOCUS_BG,
-											}}
-										>{textInputValue}</Text>
-									</Pressable> :
-									<Input
+	if (UiGlobals.mode === UI_MODE_WEB) {
+		inputAndTrigger = <>
+							{disableDirectEntry ?
+								<Pressable
+									onPress={toggleMenu}
+									flex={1}
+									h="100%"
+								>
+									<Text
 										ref={inputRef}
-										value={textInputValue}
-										autoSubmit={true}
-										isDisabled={isDisabled}
-										onChangeValue={onInputChangeText}
-										onKeyPress={onInputKeyPress}
-										onFocus={onInputFocus}
-										onBlur={onInputBlur}
-										onLayout={(e) => {
-											// On web, this is not needed, but on RN it might be, so leave it in for now
-											const {
-													height,
-													width,
-													top,
-													left,
-												} = e.nativeEvent.layout;
-											setWidth(width);
-											setTop(top + height);
-											setLeft(left);
-										}}
 										flex={1}
 										h="100%"
+										numberOfLines={1}
+										ellipsizeMode="head"
 										m={0}
-										autoSubmitDelay={0}
+										p={2}
+										borderWidth={1}
+										borderColor="trueGray.400"
 										borderTopRightRadius={0}
 										borderBottomRightRadius={0}
 										fontSize={styles.FORM_COMBO_INPUT_FONTSIZE}
@@ -541,171 +474,360 @@ export function ComboComponent(props) {
 										_focus={{
 											bg: styles.FORM_COMBO_INPUT_FOCUS_BG,
 										}}
-										{..._input}
-									/>}
-								<IconButton
-									ref={triggerRef}
-									_icon={{
-										as: CaretDown,
-										color: 'primary.800',
-										size: 'sm',
-									}}
+									>{textInputValue}</Text>
+								</Pressable> :
+								<Input
+									ref={inputRef}
+									value={textInputValue}
+									autoSubmit={true}
 									isDisabled={isDisabled}
-									onPress={onTriggerPress}
-									onBlur={onTriggerBlur}
+									onChangeValue={onInputChangeText}
+									onKeyPress={onInputKeyPress}
+									onFocus={onInputFocus}
+									onBlur={onInputBlur}
+									onLayout={(e) => {
+										const {
+												height,
+												width,
+											} = e.nativeEvent.layout;
+										setWidth(Math.round(width));
+										setTop(Math.round(height));
+									}}
+									flex={1}
 									h="100%"
-									borderWidth={1}
-									borderColor="#bbb"
-									borderLeftWidth={0}
-									borderLeftRadius={0}
-									borderRightRadius="md"
-									bg={styles.FORM_COMBO_TRIGGER_BG}
-									_hover={{
-										bg: styles.FORM_COMBO_TRIGGER_HOVER_BG,
+									m={0}
+									autoSubmitDelay={0}
+									borderTopRightRadius={0}
+									borderBottomRightRadius={0}
+									fontSize={styles.FORM_COMBO_INPUT_FONTSIZE}
+									bg={styles.FORM_COMBO_INPUT_BG}
+									_focus={{
+										bg: styles.FORM_COMBO_INPUT_FOCUS_BG,
 									}}
-								/>
-								{additionalButtons}
-								<Popover
-									isOpen={isMenuShown}
-									onClose={() => {
-										hideMenu();
+									{..._input}
+								/>}
+							<IconButton
+								ref={triggerRef}
+								_icon={{
+									as: CaretDown,
+									color: 'primary.800',
+									size: 'sm',
+								}}
+								isDisabled={isDisabled}
+								onPress={onTriggerPress}
+								onBlur={onTriggerBlur}
+								h="100%"
+								borderWidth={1}
+								borderColor="#bbb"
+								borderLeftWidth={0}
+								borderLeftRadius={0}
+								borderRightRadius="md"
+								bg={styles.FORM_COMBO_TRIGGER_BG}
+								_hover={{
+									bg: styles.FORM_COMBO_TRIGGER_HOVER_BG,
+								}}
+							/>
+						</>;
+	}
+
+	if (UiGlobals.mode === UI_MODE_REACT_NATIVE) {
+		// This input and trigger are for show
+		// The just show the current value and open the menu
+		inputAndTrigger = <>
+							<Pressable
+								onPress={showMenu}
+								flex={1}
+							>
+								<Text
+									flex={1}
+									h="100%"
+									numberOfLines={1}
+									ellipsizeMode="head"
+									m={0}
+									p={2}
+									borderWidth={1}
+									borderColor="trueGray.400"
+									borderTopRightRadius={0}
+									borderBottomRightRadius={0}
+									fontSize={styles.FORM_COMBO_INPUT_FONTSIZE}
+									bg={styles.FORM_COMBO_INPUT_BG}
+									_focus={{
+										bg: styles.FORM_COMBO_INPUT_FOCUS_BG,
 									}}
-									trigger={emptyFn}
-									trapFocus={false}
-									placement={'auto'}
-									// _fade={{
-									// 	entryDuration: 0, // Doesn't work, as Popover doesn't have animation controls like Modal does. See node_modules/native-base/src/components/composites/Popover/Popover.tsx line 99 (vs .../composites/Modal/Modal.tsx line 113 which has ..._fade) I added a feature request to NativeBase https://github.com/GeekyAnts/NativeBase/issues/5651
-									// }}
-									{...props}
+								>{textInputValue}</Text>
+							</Pressable>
+							<IconButton
+								ref={triggerRef}
+								_icon={{
+									as: CaretDown,
+									color: 'primary.800',
+									size: 'sm',
+								}}
+								isDisabled={isDisabled}
+								onPress={onTriggerPress}
+								h="100%"
+								borderWidth={1}
+								borderColor="#bbb"
+								borderLeftWidth={0}
+								borderLeftRadius={0}
+								borderRightRadius="md"
+								bg={styles.FORM_COMBO_TRIGGER_BG}
+								_hover={{
+									bg: styles.FORM_COMBO_TRIGGER_HOVER_BG,
+								}}
+							/>
+						</>;
+	}
+
+	if (isMenuShown) {
+		const gridProps = _.pick(props, [
+			'Editor',
+			'model',
+			'Repository',
+			'data',
+			'idIx',
+			'displayIx',
+			'value',
+			'disableView',
+			'disableCopy',
+			'disableDuplicate',
+			'disablePrint',
+		]);
+		const WhichGrid = isEditor ? WindowedGridEditor : Grid;
+		grid = <WhichGrid
+					showHeaders={false}
+					showHovers={true}
+					shadow={1}
+					getRowProps={() => {
+						return {
+							borderBottomWidth: 1,
+							borderBottomColor: 'trueGray.300',
+							py: 1,
+							pl: 4,
+							pr: 2,
+							w: '100%',
+						};
+					}}
+					autoAdjustPageSizeToHeight={false}
+					{...gridProps}
+					reference="dropdownGrid"
+					parent={self}
+					h={UiGlobals.mode === UI_MODE_WEB ? styles.FORM_COMBO_MENU_HEIGHT + 'px' : null}
+					newEntityDisplayValue={newEntityDisplayValue}
+					disablePresetButtons={!isEditor}
+					onChangeSelection={(selection) => {
+
+						if (Repository && selection[0]?.isPhantom) {
+							// do nothing
+							return;
+						}
+
+						setGridSelection(selection);
+
+						if (Repository) {
+
+							// When we first open the menu, we try to match the selection to the value, ignore this
+							if (selection[0]?.displayValue === getDisplayValue()) {
+								return;
+							}
+
+							// when user selected the record matching the current value, kill search mode
+							if (selection[0]?.id === value) {
+								setIsSearchMode(false);
+								resetInputTextValue();
+								if (hideMenuOnSelection) {
+									hideMenu();
+								}
+								return;
+							}
+
+							setValue(selection[0] ? selection[0].id : null);
+
+						} else {
+
+							// When we first open the menu, we try to match the selection to the value, ignore this
+							if (selection[0] && selection[0][displayIx] === getDisplayValue()) {
+								return;
+							}
+
+							// when user selected the record matching the current value, kill search mode
+							if (selection[0] && selection[0][idIx] === value) {
+								setIsSearchMode(false);
+								resetInputTextValue();
+								if (hideMenuOnSelection) {
+									hideMenu();
+								}
+								return;
+							}
+
+							setValue(selection[0] ? selection[0][idIx] : null);
+
+						}
+
+						if (_.isEmpty(selection)) {
+							return;
+						}
+
+						if (hideMenuOnSelection && !isEditor) {
+							hideMenu();
+						}
+
+					}}
+					onSave={(selection) => {
+						const entity = selection[0];
+						if (entity?.id !== value) {
+							// Either a phantom record was just solidified into a real record, or a new (non-phantom) record was added.
+							// Select it and set the value of the combo.
+							setGridSelection([entity]);
+							const id = entity.id;
+							setValue(id);
+						}
+					}}
+					onRowPress={(item, e) => {
+						if (onRowPress) {
+							onRowPress(item, e);
+							return;
+						}
+						const id = Repository ? item.id : item[idIx];
+						if (id === value) {
+							hideMenu();
+							onInputFocus();
+						}
+					}}
+				/>;
+		if (UiGlobals.mode === UI_MODE_WEB) {
+			dropdownMenu = <Popover
+								isOpen={isMenuShown}
+								onClose={() => {
+									hideMenu();
+								}}
+								trigger={emptyFn}
+								trapFocus={false}
+								placement={'auto'}
+								// _fade={{
+								// 	entryDuration: 0, // Doesn't work, as Popover doesn't have animation controls like Modal does. See node_modules/native-base/src/components/composites/Popover/Popover.tsx line 99 (vs .../composites/Modal/Modal.tsx line 113 which has ..._fade) I added a feature request to NativeBase https://github.com/GeekyAnts/NativeBase/issues/5651
+								// }}
+								{...props}
+							>
+								<Popover.Content
+									position="absolute"
+									top={top + 'px'}
+									left={left + 'px'}
+									w={width + 'px'}
+									minWidth={menuMinWidth}
+									overflow="auto"
+									bg="#fff"
+
+									h={200}
 								>
-									<Popover.Content
-										position="absolute"
-										top={top + 'px'}
-										left={left + 'px'}
-										w={width + 'px'}
-										minWidth={menuMinWidth}
-										overflow="auto"
-										bg="#fff"
+									<Popover.Body
+										ref={menuRef}
+										borderWidth={1}
+										borderColor='trueGray.400'
+										borderTopWidth={0}
+										p={0}
 									>
-										<Popover.Body
-											ref={menuRef}
-											borderWidth={1}
-											borderColor='trueGray.400'
-											borderTopWidth={0}
-											p={0}
-										>
-											<WhichGrid
-												showHeaders={false}
-												showHovers={true}
-												shadow={1}
-												getRowProps={() => {
-													return {
-														borderBottomWidth: 1,
-														borderBottomColor: 'trueGray.300',
-														py: 1,
-														pl: 4,
-														pr: 2,
-														w: '100%',
-													};
-												}}
-												autoAdjustPageSizeToHeight={false}
-												{...gridProps}
-												reference="dropdownGrid"
-												parent={self}
-												h={styles.FORM_COMBO_MENU_HEIGHT + 'px'}
-												newEntityDisplayValue={newEntityDisplayValue}
-												disablePresetButtons={!isEditor}
-												onChangeSelection={(selection) => {
-
-													if (Repository && selection[0]?.isPhantom) {
-														// do nothing
-														return;
-													}
-
-													setGridSelection(selection);
-
-													if (Repository) {
-
-														// When we first open the menu, we try to match the selection to the value, ignore this
-														if (selection[0]?.displayValue === getDisplayValue()) {
-															return;
-														}
-
-														// when user selected the record matching the current value, kill search mode
-														if (selection[0]?.id === value) {
-															setIsSearchMode(false);
-															resetInputTextValue();
-															if (hideMenuOnSelection) {
-																hideMenu();
-															}
-															return;
-														}
-
-														setValue(selection[0] ? selection[0].id : null);
-
-													} else {
-
-														// When we first open the menu, we try to match the selection to the value, ignore this
-														if (selection[0] && selection[0][displayIx] === getDisplayValue()) {
-															return;
-														}
-
-														// when user selected the record matching the current value, kill search mode
-														if (selection[0] && selection[0][idIx] === value) {
-															setIsSearchMode(false);
-															resetInputTextValue();
-															if (hideMenuOnSelection) {
-																hideMenu();
-															}
-															return;
-														}
-
-														setValue(selection[0] ? selection[0][idIx] : null);
-
-													}
-
-													if (_.isEmpty(selection)) {
-														return;
-													}
-
-													if (hideMenuOnSelection && !isEditor) {
-														hideMenu();
-													}
-
-												}}
-												onSave={(selection) => {
-													const entity = selection[0];
-													if (entity?.id !== value) {
-														// Either a phantom record was just solidified into a real record, or a new (non-phantom) record was added.
-														// Select it and set the value of the combo.
-														setGridSelection([entity]);
-														const id = entity.id;
-														setValue(id);
-													}
-												}}
-												onRowPress={(item, e) => {
-													if (onRowPress) {
-														onRowPress(item, e);
-														return;
-													}
-													const id = Repository ? item.id : item[idIx];
-													if (id === value) {
-														hideMenu();
-														onInputFocus();
-													}
-												}}
-											/>
-										</Popover.Body>
-									</Popover.Content>
-								</Popover>
-							</Row>;
+										{grid}
+									</Popover.Body>
+								</Popover.Content>
+							</Popover>;
+		}
+		if (UiGlobals.mode === UI_MODE_REACT_NATIVE) {
+			const inputAndTriggerClone = // for RN, this is the actual input and trigger, as we need them to appear up above in the modal
+				<Row h={10}>
+					{disableDirectEntry ?
+						<Text
+							ref={inputRef}
+							flex={1}
+							h="100%"
+							numberOfLines={1}
+							ellipsizeMode="head"
+							m={0}
+							p={2}
+							borderWidth={1}
+							borderColor="trueGray.400"
+							borderTopRightRadius={0}
+							borderBottomRightRadius={0}
+							fontSize={styles.FORM_COMBO_INPUT_FONTSIZE}
+							bg={styles.FORM_COMBO_INPUT_BG}
+							_focus={{
+								bg: styles.FORM_COMBO_INPUT_FOCUS_BG,
+							}}
+						>{textInputValue}</Text> :
+						<Input
+							ref={inputRef}
+							value={textInputValue}
+							autoSubmit={true}
+							isDisabled={isDisabled}
+							onChangeValue={onInputChangeText}
+							onKeyPress={onInputKeyPress}
+							onFocus={onInputFocus}
+							onBlur={onInputBlur}
+							flex={1}
+							h="100%"
+							m={0}
+							autoSubmitDelay={0}
+							borderTopRightRadius={0}
+							borderBottomRightRadius={0}
+							fontSize={styles.FORM_COMBO_INPUT_FONTSIZE}
+							bg={styles.FORM_COMBO_INPUT_BG}
+							_focus={{
+								bg: styles.FORM_COMBO_INPUT_FOCUS_BG,
+							}}
+							{..._input}
+						/>}
+					<IconButton
+						_icon={{
+							as: CaretDown,
+							color: 'primary.800',
+							size: 'sm',
+						}}
+						isDisabled={isDisabled}
+						onPress={() => hideMenu()}
+						h="100%"
+						borderWidth={1}
+						borderColor="#bbb"
+						borderLeftWidth={0}
+						borderLeftRadius={0}
+						borderRightRadius="md"
+						bg={styles.FORM_COMBO_TRIGGER_BG}
+						_hover={{
+							bg: styles.FORM_COMBO_TRIGGER_HOVER_BG,
+						}}
+					/>
+				</Row>;
+			dropdownMenu = <Modal
+								isOpen={true}
+								onClose={() => setIsMenuShown(false)}
+								top="30%"
+								w="100%"
+								h={400}
+								px={5}
+							>
+								{inputAndTriggerClone}
+								{grid}
+							</Modal>;
+		}
+	}
+
+	const refProps = {};
+	if (tooltipRef) {
+		refProps.ref = tooltipRef;
+	}
+	assembledComponents = <Row {...refProps} justifyContent="center" alignItems="center" h={styles.FORM_COMBO_HEIGHT} flex={1} onLayout={() => setIsRendered(true)}>
+							{xButton}
+							{inputAndTrigger}
+							{additionalButtons}
+							{dropdownMenu}
+						</Row>;
+	
 	if (tooltip) {
-		comboComponent = <Tooltip label={tooltip} placement={tooltipPlacement}>
-							{comboComponent}
+		assembledComponents = <Tooltip label={tooltip} placement={tooltipPlacement}>
+							{assembledComponents}
 						</Tooltip>;
 	}
 	
-	return comboComponent;
+	return assembledComponents;
 }
 
 export const Combo = withComponent(

package/src/Components/Form/Form.js

@@ -71,6 +71,7 @@ function Form(props) {
 			footerProps = {},
 			buttonGroupProps = {}, // buttons in footer
 			checkIsEditingDisabled = true,
+			disableLabels = false,
 			onBack,
 			onReset,
 			onViewMode,
@@ -295,6 +296,9 @@ function Form(props) {
 			if (isHidden) {
 				return null;
 			}
+			if (type === 'DisplayField') {
+				isEditable = false;
+			}
 			const propertyDef = name && Repository?.getSchema().getPropertyDefinition(name);
 			if (!useAdditionalEditButtons) {
 				item = _.omit(item, 'additionalEditButtons');
@@ -330,13 +334,13 @@ function Form(props) {
 					editorTypeProps.autoLoad = true;
 				}
 			}
-			if (isCombo) {
+			if (isCombo && _.isNil(propsToPass.showXButton)) {
 				editorTypeProps.showXButton = true;
 			}
 			const Element = getComponentFromType(type);
 			let children;
-
-			if (inArray(type, ['Column', 'FieldSet'])) {
+			
+			if (inArray(type, ['Column', 'Row', 'FieldSet'])) {
 				if (_.isEmpty(items)) {
 					return null;
 				}
@@ -357,6 +361,9 @@ function Form(props) {
 					}
 					propsToPass.pl = 3;
 				}
+				if (type === 'Row') {
+					propsToPass.w = '100%';
+				}
 				const itemDefaults = item.defaults;
 				children = _.map(items, (item, ix) => {
 					return buildFromItem(item, ix, itemDefaults);
@@ -376,7 +383,7 @@ function Form(props) {
 									reference={name}
 									{...propsToPass}
 								/>;
-				if (label) {
+				if (!disableLabels && label) {
 					const labelProps = {};
 					if (defaults?.labelWidth) {
 						labelProps.w = defaults.labelWidth;
@@ -483,19 +490,24 @@ function Form(props) {
 											</Row>;
 							}
 								
-							if (label && editorType !== EDITOR_TYPE__INLINE) {
+							let requiredIndicator = null;
+							if (propertyDef?.validator?.spec && !propertyDef.validator.spec.optional) {
+								requiredIndicator = <Text color="#f00" fontSize="30px" pr={1}>*</Text>;
+							}
+							if (!disableLabels && label && editorType !== EDITOR_TYPE__INLINE) {
 								const labelProps = {};
 								if (defaults?.labelWidth) {
 									labelProps.w = defaults.labelWidth;
 								}
-								let requiredIndicator = null;
-								if (propertyDef?.validator?.spec && !propertyDef.validator.spec.optional) {
-									requiredIndicator = <Text color="#f00" pr={1}>*</Text>;
-								}
 								element = <Row w="100%" py={1}>
 												<Label {...labelProps}>{requiredIndicator}{label}</Label>
 												{element}
 											</Row>;
+							} else if (disableLabels && requiredIndicator) {
+								element = <Row w="100%" py={1}>
+												{requiredIndicator}
+												{element}
+											</Row>;
 							}
 
 							const dirtyIcon = isDirty ? <Icon as={Pencil} size="2xs" color="trueGray.300" position="absolute" top="2px" left="2px" /> : null;
@@ -740,8 +752,7 @@ function Form(props) {
 	}
 	
 	return <Column {...sizeProps} onLayout={onLayoutDecorated} ref={formRef}>
-				{containerWidth && <>
-
+				{!!containerWidth && <>
 					{editorType === EDITOR_TYPE__INLINE &&
 						<ScrollView
 							horizontal={true}

package/src/Components/Grid/Grid.js

@@ -5,6 +5,7 @@ import {
 	Pressable,
 	Icon,
 	Row,
+	ScrollView,
 	Text,
 } from 'native-base';
 import {
@@ -97,7 +98,7 @@ function GridComponent(props) {
 			additionalToolbarButtons = [],
 			h,
 			flex,
-			bg,
+			bg = '#fff',
 
 			// withComponent
 			self,
@@ -177,8 +178,8 @@ function GridComponent(props) {
 			}
 			const
 				{
-					shiftKey,
-					metaKey,
+					shiftKey = false,
+					metaKey = false,
 				 } = e;
 			let allowToggle = allowToggleSelection;
 			if (metaKey) {
@@ -277,24 +278,31 @@ function GridComponent(props) {
 							if (isHeaderRow || isDragMode) {
 								return
 							}
-							switch (e.detail) {
-								case 1: // single click
-									onRowClick(item, e); // sets selection
-									if (onEditorRowClick) {
-										onEditorRowClick(item, index, e);
-									}
-									break;
-								case 2: // double click
-									if (!isSelected) { // If a row was already selected when double-clicked, the first click will deselect it,
-										onRowClick(item, e); // so reselect it
-									}
-									if (onEdit) {
-										onEdit();
-									}
-									break;
-								case 3: // triple click
-									break;
-								default:
+							if (CURRENT_MODE === UI_MODE_WEB) {
+								switch (e.detail) {
+									case 1: // single click
+										onRowClick(item, e); // sets selection
+										if (onEditorRowClick) {
+											onEditorRowClick(item, index, e);
+										}
+										break;
+									case 2: // double click
+										if (!isSelected) { // If a row was already selected when double-clicked, the first click will deselect it,
+											onRowClick(item, e); // so reselect it
+										}
+										if (onEdit) {
+											onEdit();
+										}
+										break;
+									case 3: // triple click
+										break;
+									default:
+								}
+							} else if (CURRENT_MODE === UI_MODE_REACT_NATIVE) {
+								onRowClick(item, e); // sets selection
+								if (onEditorRowClick) {
+									onEditorRowClick(item, index, e);
+								}
 							}
 						}}
 						onLongPress={(e) => {
@@ -877,43 +885,40 @@ function GridComponent(props) {
 						deselectAll();
 					}
 				}}>
-					{!entities?.length ? <NoRecordsFound text={noneFoundText} onRefresh={onRefresh} /> :
-						<FlatList
-							ref={gridRef}
-							// ListHeaderComponent={listHeaderComponent}
-							// ListFooterComponent={listFooterComponent}
-							scrollEnabled={true}
-							nestedScrollEnabled={true}
-							contentContainerStyle={{
-								overflow: 'auto',
-								borderWidth: isDragMode ? styles.REORDER_BORDER_WIDTH : 0,
-								borderColor: isDragMode ? styles.REORDER_BORDER_COLOR : null,
-								borderStyle: styles.REORDER_BORDER_STYLE,
-								flex: 1,
-							}}
-							refreshing={isLoading}
-							onRefresh={pullToRefresh ? onRefresh : null}
-							progressViewOffset={100}
-							data={rowData}
-							keyExtractor={(item) => {
-								let id;
-								if (item.id) {
-									id = item.id;
-								} else if (fields) {
-									id = item[idIx];
-								}
-								return String(id);
-							}}
-							// getItemLayout={(data, index) => ( // an optional optimization that allows skipping the measurement of dynamic content if you know the size (height or width) of items ahead of time. getItemLayout is efficient if you have fixed size items
-							// 	{length: ITEM_HEIGHT, offset: ITEM_HEIGHT * index, index}
-							// )}
-							// numColumns={1}
-							initialNumToRender={initialNumToRender}
-							initialScrollIndex={0}
-							renderItem={renderRow}
-							bg="trueGray.100"
-							{...flatListProps}
-						/>}
+					{!entities?.length ? 
+						<NoRecordsFound text={noneFoundText} onRefresh={onRefresh} /> :
+						<ScrollView flex={1} w="100%">
+							<FlatList
+								ref={gridRef}
+								scrollEnabled={false}
+								nestedScrollEnabled={true}
+								contentContainerStyle={{
+									overflow: 'auto',
+									borderWidth: isDragMode ? styles.REORDER_BORDER_WIDTH : 0,
+									borderColor: isDragMode ? styles.REORDER_BORDER_COLOR : null,
+									borderStyle: styles.REORDER_BORDER_STYLE,
+									flex: 1,
+								}}
+								refreshing={isLoading}
+								onRefresh={pullToRefresh ? onRefresh : null}
+								progressViewOffset={100}
+								data={rowData}
+								keyExtractor={(item) => {
+									let id;
+									if (item.id) {
+										id = item.id;
+									} else if (fields) {
+										id = item[idIx];
+									}
+									return String(id);
+								}}
+								initialNumToRender={initialNumToRender}
+								initialScrollIndex={0}
+								renderItem={renderRow}
+								bg="trueGray.100"
+								{...flatListProps}
+							/>
+						</ScrollView>}
 				</Column>
 
 				{listFooterComponent}

package/src/Components/Grid/GridRow.js

@@ -146,11 +146,13 @@ export default function GridRow(props) {
 						if (_.isFunction(value)) {
 							return value(key);
 						}
-						
+						const elementProps = {};
+						if (UiGlobals.mode === UI_MODE_WEB) {
+							elementProps.textOverflow = 'ellipsis';
+						}
 						return <Text
 									key={key}
 									overflow="hidden"
-									textOverflow="ellipsis"
 									alignSelf="center"
 									style={{
 										userSelect: 'none',
@@ -160,6 +162,7 @@ export default function GridRow(props) {
 									py={styles.GRID_CELL_PY}
 									numberOfLines={1}
 									ellipsizeMode="head"
+									{...elementProps}
 									{...propsToPass}
 								>{value}</Text>;
 					});

package/src/Components/Grid/NoRecordsFound.js

@@ -26,6 +26,8 @@ export default function NoRecordsFound(props) {
 								style: {
 									fontSize: 16,
 								},
+								color: 'trueGray.400',
+								mr: 1,
 							}}
 							onPress={onRefresh}
 							variant="ghost"

package/src/Components/Hoc/withAlert.js

@@ -10,6 +10,7 @@ import {
 } from 'native-base';
 import {
 	ALERT_MODE_OK,
+	ALERT_MODE_YES,
 	ALERT_MODE_YES_NO,
 	ALERT_MODE_CUSTOM,
 } from '../../Constants/Alert.js';
@@ -70,6 +71,7 @@ export default function withAlert(WrappedComponent) {
 				setMessage(message);
 				setIncludeCancel(includeCancel);
 				setYesCallback(() => callback);
+				setNoCallback(null);
 				showAlert();
 			},
 			onCancel = () => {
@@ -127,6 +129,15 @@ export default function withAlert(WrappedComponent) {
 								color="#fff"
 							>OK</Button>);
 				break;
+			case ALERT_MODE_YES:
+				buttons.push(<Button
+								key="yesBtn"
+								ref={autoFocusRef}
+								onPress={onYes}
+								color="#fff"
+								colorScheme="danger"
+							>Yes</Button>);
+				break;
 			case ALERT_MODE_YES_NO:
 				buttons.push(<Button
 								key="noBtn"

package/src/Constants/Alert.js

@@ -1,3 +1,4 @@
 export const ALERT_MODE_OK = 'ALERT_MODE_OK';
+export const ALERT_MODE_YES = 'ALERT_MODE_YES';
 export const ALERT_MODE_YES_NO = 'ALERT_MODE_YES_NO';
 export const ALERT_MODE_CUSTOM = 'ALERT_MODE_CUSTOM';