@onehat/ui 0.4.11 → 0.4.13

package/package.json

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

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

@@ -545,7 +545,8 @@ export function ComboComponent(props) {
 	}
 	const triggerClassName = `
 		Combo-trigger
-		h-full
+		self-stretch
+		h-auto
 		border
 		border-l-0
 		border-gray-400
@@ -575,7 +576,8 @@ export function ComboComponent(props) {
 						onPress={toggleMenu}
 						className={`
 							toggleMenuBtn
-							h-full
+							h-auto
+							self-stretch
 							flex-1
 							flex-row
 							justify-center
@@ -595,7 +597,8 @@ export function ComboComponent(props) {
 							ellipsizeMode="head"
 							className={`
 								Text
-								h-full
+								h-auto
+								self-stretch
 								flex-1
 								${_.isEmpty(textInputValue) ? "text-grey-400" : "text-black"}
 								${styles.FORM_COMBO_INPUT_FONTSIZE}
@@ -619,9 +622,8 @@ export function ComboComponent(props) {
 						className={`
 							ComboInput
 							grow
-							h-full
-							min-h-0
-							max-h-[40px]
+							h-auto
+							self-stretch
 							flex-1
 							m-0
 							rounded-tr-none
@@ -1015,8 +1017,9 @@ export function ComboComponent(props) {
 	let className = `
 		Combo-HStack
 		flex-1
-		h-[40px]
-		min-h-[40px]
+		items-stretch
+		h-auto
+		self-stretch
 		justify-center
 		items-stretch
 	`;

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

@@ -30,6 +30,7 @@ const InputElement = forwardRef((props, ref) => {
 			rightIcon,
 			rightIconHandler,
 			placeholder,
+			textAlignIsCenter = true,
 			className,
 			...propsToPass
 		} = props,
@@ -118,11 +119,11 @@ const InputElement = forwardRef((props, ref) => {
 		`,
 		inputFieldClassName = `
 			InputField
-			min-h-[40px]
+			self-stretch
 			h-auto
 			w-full
 			p-2
-			text-center
+			${textAlignIsCenter ? 'text-center' : 'text-left'}
 			${styles.FORM_INPUT_FONTSIZE}
 			${styles.FORM_INPUT_BG}
 			${styles.FORM_INPUT_BG_FOCUS}

package/src/Components/Form/Field/Tag/ValueBox.js

@@ -1,5 +1,5 @@
 import {
-	HStack,
+	HStackNative,
 	Text,
 } from '@project-components/Gluestack';
 import testProps from '../../../../Functions/testProps.js';
@@ -16,7 +16,7 @@ export default function ValueBox(props) {
 			onDelete,
 		} = props,
 		styles = UiGlobals.styles;
-	return <HStack
+	return <HStackNative
 				{...testProps('valueBox-' + text)}
 				className={`
 					max-w-full
@@ -57,5 +57,5 @@ export default function ValueBox(props) {
 						onPress={onDelete}
 						className="h-full"
 					/>}
-			</HStack>;
+			</HStackNative>;
 }

package/src/Components/Hoc/withFilters.js

@@ -303,6 +303,7 @@ export default function withFilters(WrappedComponent) {
 											value={getFilterValue(field)}
 											onChangeValue={(value) => onFilterChangeValue(field, value)}
 											isFilter={true}
+											minimizeForRow={true}
 											{...filterProps}
 											{...elementProps}
 											className={filterClassName}

package/src/Components/Hoc/withModal.js

@@ -184,9 +184,9 @@ export default function withModal(WrappedComponent) {
 						<Modal
 							isOpen={true}
 							onClose={onCancel}
-							className="Modal"
+							className="withModal-Modal"
 						>
-							<ModalBackdrop />
+							<ModalBackdrop className="withModal-ModalBackdrop" />
 							{modalBody}
 						</Modal>}
 					

package/src/Components/Hoc/withWindowedEditor.js

@@ -58,7 +58,8 @@ export default function withWindowedEditor(WrappedComponent, isTree = false) {
 				selectorSelected,
 				selectorSelectedField,
 				h,
-
+				style,
+				
 				...propsToPass
 			} = props,
 			onEditorCancel = props.onEditorCancel;
@@ -73,8 +74,9 @@ export default function withWindowedEditor(WrappedComponent, isTree = false) {
 						<Modal
 							isOpen={true}
 							onClose={onEditorCancel}
+							className="withEditor-Modal"
 						>
-							<ModalBackdrop />
+							<ModalBackdrop className="withEditor-ModalBackdrop" />
 							<Editor
 								editorType={EDITOR_TYPE__WINDOWED}
 								{...propsToPass}

package/src/Components/Tree/Tree.js

@@ -1380,7 +1380,7 @@ function TreeComponent(props) {
 					<ScrollView {...testProps('ScrollView')} className="ScrollView flex-1 w-full">
 						{!treeNodes?.length ? 
 						<CenterBox>
-							<NoRecordsFound text={noneFoundText} onRefresh={reloadTree} />
+							{Repository.isLoading ? <Loading /> : <NoRecordsFound text={noneFoundText} onRefresh={reloadTree} />}
 						</CenterBox> :
 						treeNodes}
 					</ScrollView>

package/src/PlatformImports/Web/Attachments.js

@@ -282,7 +282,11 @@ function AttachmentsElement(props) {
 	if (canCrud) {
 		_fileMosaic.onDelete = onFileDelete;
 	}
-	let content = <VStack background={styles.ATTACHMENTS_BG} className="w-[100%] p-1">
+	let className = 'w-full p-1 bg-white rounded-[5px]';
+	if (props.className) {
+		className += ' ' + props.className;
+	}
+	let content = <VStack className={className}>
 						<HStack className="flex-wrap">
 							{files.map((file) => {
 								return <Box