@onehat/ui 0.4.26 → 0.4.29

package/package.json

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

package/src/Components/Accordion/Accordion.js

@@ -126,7 +126,10 @@ export default function Accordion(props) {
 	return <ScrollView
 				ref={scrollViewRef}
 				keyboardShouldPersistTaps="always"
-				className="flex-1 w-full"
+				className="Accordion-ScrollView flex-1 w-full"
+				contentContainerStyle={{
+					height: '100%',
+				}}
 			>
 				<VStackNative
 					{...propsToPass}

package/src/Components/Buttons/SquareButton.js

@@ -7,14 +7,13 @@ export default function SquareButton(props) {
 	const {
 			text,
 			isActive = false,
-			activeColor,
+			activeClassName,
 			invertColorWhenActive = false,
 			showText = true,
 			disableInteractions = false,
 			fontSize = '20px',
 			...propsToPass
 		} = props,
-		bg = isActive ? activeColor || '#56a6f8' : '#fff',
 		color = invertColorWhenActive && isActive ? '#fff' : '#000';
 
 	if (!props.icon) {
@@ -24,21 +23,26 @@ export default function SquareButton(props) {
 		throw Error('text missing. If you want to hide the text, use showText={false}');
 	}
 
+	let className = `
+		SquareButton
+		rounded-md
+		p-2
+		h-[100px]
+		w-[100px]
+		flex
+		flex-col
+		justify-center
+		items-center
+		bg-grey-200
+		hover:bg-grey-400
+		disabled:bg-grey-100
+	`;
+	if (isActive && activeClassName) {
+		className += ' ' + activeClassName;
+	}
+
 	return <IconButton
-				className={`
-					SquareButton
-					rounded-md
-					p-2
-					bg-[${bg}]
-					hover:bg-[${bg}]
-					disabled:bg-[${bg}]
-					h-[100px]
-					w-[100px]
-					flex
-					flex-col
-					justify-center
-					items-center
-				`}
+				className={className}
 				style={{
 					// backgroundColor: bg,
 				}}

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

@@ -182,6 +182,7 @@ export function ColorElement(props) {
 					border-bottom-right-radius-6
 					${styles.FORM_COLOR_INPUT_CLASSNAME}
 				`}
+				textAlignIsCenter={true}
 				onLayout={(e) => {
 					// On web, this is not needed, but on RN it might be, so leave it in for now
 					const {

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

@@ -577,6 +577,7 @@ export function ComboComponent(props) {
 		input = disableDirectEntry ?
 					<Pressable
 						{...testProps('toggleMenuBtn')}
+						ref={inputRef}
 						onPress={toggleMenu}
 						className={`
 							Combo-toggleMenuBtn
@@ -587,7 +588,8 @@ export function ComboComponent(props) {
 							justify-center
 							items-center
 							m-0
-							p-1
+							p-2
+							bg-white
 							border
 							border-grey-400
 							rounded-r-none
@@ -596,13 +598,10 @@ export function ComboComponent(props) {
 					>
 						{inputIconElement}
 						<TextNative
-							ref={inputRef}
 							numberOfLines={1}
 							ellipsizeMode="head"
 							className={`
 								Combo-TextNative
-								h-auto
-								self-stretch
 								flex-1
 								${_.isEmpty(textInputValue) ? "text-grey-400" : "text-black"}
 								${styles.FORM_COMBO_INPUT_CLASSNAME}
@@ -878,6 +877,7 @@ export function ComboComponent(props) {
 										dropdownMenu-Box
 										flex-1
 										overflow-auto
+										bg-white
 										p-0
 										rounded-none
 										border

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

@@ -378,6 +378,7 @@ export const DateElement = forwardRef((props, ref) => {
 				`}
 				autoSubmitDelay={1000}
 				placeholder={placeholder}
+				textAlignIsCenter={true}
 				{..._input}
 			/>;
 	}

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

@@ -29,7 +29,7 @@ const InputElement = forwardRef((props, ref) => {
 			rightIcon,
 			rightIconHandler,
 			placeholder,
-			textAlignIsCenter = true,
+			textAlignIsCenter = false,
 			className,
 			...propsToPass
 		} = props,

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

@@ -171,6 +171,7 @@ function NumberElement(props) {
 						text-center
 						rounded-none
 					`}
+					textAlignIsCenter={true}
 					style={{
 						flex: 3
 					}}

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

@@ -182,6 +182,7 @@ const
 						isDisabled={isDisabled}
 						disableAutoFlex={true}
 						className={inputClassName}
+						textAlignIsCenter={true}
 						{...props._input}
 					/>
 					<HStack className="flex-1">

package/src/Components/Form/Form.js

@@ -1350,12 +1350,15 @@ function Form(props) {
 					{editorType !== EDITOR_TYPE__INLINE &&
 						<ScrollView
 							className={`
-								ScrollView
+								Form-ScrollView
 								w-full
 								flex-1
 								pb-1
 								web:min-h-[${minHeight}px]
 							`}
+							contentContainerStyle={{
+								height: '100%',
+							}}
 						>
 							{modeHeader}
 							{formHeader}

package/src/Components/Grid/Grid.js

@@ -417,7 +417,7 @@ function GridComponent(props) {
 											if (canUser && !canUser(VIEW)) { // permissions
 												return;
 											}
-											onView(true);
+											onView(!props.isEditorViewOnly);
 										}
 									} else {
 										if (onEdit) {

package/src/Components/Hoc/Secondary/withSecondaryEditor.js

@@ -1,4 +1,4 @@
-import { useEffect, useState, useRef, } from 'react';
+import { forwardRef, useEffect, useState, useRef, } from 'react';
 import {
 	ADD,
 	EDIT,
@@ -11,6 +11,7 @@ import {
 	EDITOR_MODE__ADD,
 	EDITOR_MODE__EDIT,
 	EDITOR_TYPE__SIDE,
+	EDITOR_TYPE__INLINE,
 } from '../../../Constants/Editor.js';
 import Button from '../../Buttons/Button.js';
 import UiGlobals from '../../../UiGlobals.js';
@@ -20,10 +21,10 @@ import _ from 'lodash';
 // This HOC will eventually get out of sync with that one, and may need to be updated.
 
 export default function withSecondaryEditor(WrappedComponent, isTree = false) {
-	return (props) => {
+	return forwardRef((props, ref) => {
 
 		if (props.secondaryDisableWithEditor) {
-			return <WrappedComponent {...props} isTree={isTree} />;
+			return <WrappedComponent {...props} ref={ref} isTree={isTree} />;
 		}
 
 		let [secondaryEditorMode, secondarySetEditorMode] = useState(EDITOR_MODE__VIEW); // Can change below, so use 'let'
@@ -52,6 +53,7 @@ export default function withSecondaryEditor(WrappedComponent, isTree = false) {
 				secondaryNewEntityDisplayValue,
 				secondaryNewEntityDisplayProperty, // in case the field to set for newEntityDisplayValue is different from model
 				secondaryDefaultValues,
+				secondaryStayInEditModeOnSelectionChange = false,
 
 				// withComponent
 				self,
@@ -132,7 +134,7 @@ export default function withSecondaryEditor(WrappedComponent, isTree = false) {
 					// NOTE: This is a hack to prevent adding a new record while the repository is still loading.
 					// This can happen when the repository is still loading, and the user clicks the 'Add' button.
 					setTimeout(() => {
-						doAdd(e, values);
+						secondaryDoAdd(e, values);
 					}, 500);
 					return;
 				}
@@ -169,7 +171,9 @@ export default function withSecondaryEditor(WrappedComponent, isTree = false) {
 					if (!secondarySelection[0]) {
 						throw Error('Must select a parent node.');
 					}
-					addValues.parentId = secondarySelection[0].id;
+					const parent = secondarySelection[0];
+					addValues.parentId = parent.id;
+					addValues.depth = parent.depth +1;
 				} else {
 					// Set repository to sort by id DESC and switch to page 1, so this new entity is guaranteed to show up on the current page, even after saving
 					const currentSorter = SecondaryRepository.sorters[0];
@@ -200,10 +204,13 @@ export default function withSecondaryEditor(WrappedComponent, isTree = false) {
 				setIsSaving(false);
 				setSecondaryIsIgnoreNextSelectionChange(true);
 				secondarySetSelection([entity]);
+				if (getListeners().onAfterAdd) {
+					await getListeners().onAfterAdd(entity);
+				}
 				if (SecondaryRepository.isAutoSave) {
 					// for isAutoSave Repositories, submit the handers right away
-					if (getListeners().onAfterAdd) {
-						await getListeners().onAfterAdd(entity);
+					if (getListeners().onAfterAddSave) {
+						await getListeners().onAfterAddSave(entity);
 					}
 					if (secondaryOnAdd) {
 						await secondaryOnAdd(entity);
@@ -331,6 +338,13 @@ export default function withSecondaryEditor(WrappedComponent, isTree = false) {
 					showPermissionsError(VIEW, secondaryModel);
 					return;
 				}
+				if (secondaryEditorType === EDITOR_TYPE__INLINE) {
+					alert('Cannot view in inline editor.');
+					return; // inline editor doesn't have a view mode
+				}
+
+				// check permissions for view
+				
 				if (secondarySelection.length !== 1) {
 					return;
 				}
@@ -350,6 +364,10 @@ export default function withSecondaryEditor(WrappedComponent, isTree = false) {
 					showPermissionsError(DUPLICATE, secondaryModel);
 					return;
 				}
+
+				// check permissions for duplicate
+
+
 				if (secondarySelection.length !== 1) {
 					return;
 				}
@@ -436,8 +454,8 @@ export default function withSecondaryEditor(WrappedComponent, isTree = false) {
 						if (secondaryOnAdd) {
 							await secondaryOnAdd(secondarySelection);
 						}
-						if (getListeners().onAfterAdd) {
-							await getListeners().onAfterAdd(secondarySelection);
+						if (getListeners().onAfterAddSave) {
+							await getListeners().onAfterAddSave(secondarySelection);
 						}
 						setIsAdding(false);
 						if (!canUser || canUser(EDIT, secondaryModel)) {
@@ -500,6 +518,16 @@ export default function withSecondaryEditor(WrappedComponent, isTree = false) {
 				});
 			},
 			calculateEditorMode = (secondaryIsIgnoreNextSelectionChange = false) => {
+			
+				let doStayInEditModeOnSelectionChange = secondaryStayInEditModeOnSelectionChange;
+				if (!_.isNil(UiGlobals.stayInEditModeOnSelectionChange)) {
+					// allow global override to for this property
+					doStayInEditModeOnSelectionChange = UiGlobals.stayInEditModeOnSelectionChange;
+				}
+				if (doStayInEditModeOnSelectionChange) {
+					secondaryIsIgnoreNextSelectionChange = true;
+				}
+			
 				// calculateEditorMode gets called only on selection changes
 				let mode;
 				if (secondaryEditorType === EDITOR_TYPE__SIDE && !_.isNil(UiGlobals.isSideEditorAlwaysEditMode) && UiGlobals.isSideEditorAlwaysEditMode) {
@@ -579,6 +607,7 @@ export default function withSecondaryEditor(WrappedComponent, isTree = false) {
 
 		return <WrappedComponent
 					{...props}
+					ref={ref}
 					secondaryDisableWithEditor={false}
 					secondaryCurrentRecord={secondaryCurrentRecord}
 					secondarySetCurrentRecord={secondarySetCurrentRecord}
@@ -612,5 +641,5 @@ export default function withSecondaryEditor(WrappedComponent, isTree = false) {
 					secondarySetSelection={secondarySetSelectionDecorated}
 					isTree={isTree}
 				/>;
-	};
+	});
 }

package/src/Components/Hoc/Secondary/withSecondarySideEditor.js

@@ -1,3 +1,4 @@
+import { forwardRef } from 'react';
 import {
 	EDITOR_TYPE__SIDE,
 } from '../../../Constants/Editor.js';
@@ -10,20 +11,21 @@ import _ from 'lodash';
 
 
 function withAdditionalProps(WrappedComponent) {
-	return (props) => {
+	return forwardRef((props, ref) => {
 		// provide the editorType to withEditor
 		return <WrappedComponent
 					editorType={EDITOR_TYPE__SIDE}
 					{...props}
+					ref={ref}
 				/>;
-	};
+	});
 }
 
 // NOTE: Effectivtly, the HOC composition is:
 // withAdditionalProps(withSecondaryEditor(withSecondarySideEditor))
 
 export default function withSecondarySideEditor(WrappedComponent, isTree = false) {
-	return withAdditionalProps(withSecondaryEditor((props) => {
+	const SideEditor = forwardRef((props, ref) => {
 		const {
 				SecondaryEditor,
 				secondaryEditorProps = {},
@@ -36,6 +38,7 @@ export default function withSecondarySideEditor(WrappedComponent, isTree = false
 				secondarySelectorId,
 				secondarySelectorSelected,
 				secondarySelectorSelectedField,
+				style,
 				
 				...propsToPass
 			} = props;
@@ -44,8 +47,23 @@ export default function withSecondarySideEditor(WrappedComponent, isTree = false
 			throw Error('SecondaryEditor is not defined');
 		}
 
+		if (isResizable) {
+			secondaryEditorProps.w = 500;
+			secondaryEditorProps.isResizable = true;
+		} else {
+			secondaryEditorProps.flex = secondarySideFlex;
+		}
+
+		if (!secondaryEditorProps.className) {
+			secondaryEditorProps.className = '';
+		}
+		secondaryEditorProps.className += ' border-l-1 border-l-grey-300';
+
 		return <Container
+					parent={self}
+					reference="SideEditor"
 					center={<WrappedComponent
+								ref={ref}
 								isTree={isTree}
 								isSideEditor={true}
 								{...props}
@@ -53,13 +71,11 @@ export default function withSecondarySideEditor(WrappedComponent, isTree = false
 					east={<Editor
 								{...propsToPass}
 								editorType={EDITOR_TYPE__SIDE}
-								flex={secondarySideFlex}
-								borderLeftWidth={1}
-								borderLeftColor="#ccc"
 								{...secondaryEditorProps}
 								parent={self}
 								reference="secondaryEditor"
 							/>}
 				/>;
-	}));
+	});
+	return withAdditionalProps(withSecondaryEditor(SideEditor, isTree));
 }

package/src/Components/Hoc/Secondary/withSecondaryWindowedEditor.js

@@ -1,3 +1,4 @@
+import { forwardRef } from 'react';
 import {
 	Modal, ModalBackdrop, ModalHeader, ModalContent, ModalCloseButton, ModalBody, ModalFooter,
 } from '@project-components/Gluestack';
@@ -13,20 +14,21 @@ import _ from 'lodash';
 
 
 function withAdditionalProps(WrappedComponent) {
-	return (props) => {
+	return forwardRef((props, ref) => {
 		// provide the editorType to withEditor
 		return <WrappedComponent
 					editorType={EDITOR_TYPE__WINDOWED}
 					{...props}
+					ref={ref}
 				/>;
-	};
+	});
 }
 
 // NOTE: Effectivtly, the HOC composition is:
 // withAdditionalProps(withSecondaryEditor(withSecondaryWindowedEditor))
 
 export default function withSecondaryWindowedEditor(WrappedComponent, isTree = false) {
-	return withAdditionalProps(withSecondaryEditor((props) => {
+	const WindowedEditor = forwardRef((props, ref) => {
 		const {
 				secondaryIsEditorShown = false,
 				secondarySetIsEditorShown,
@@ -41,6 +43,7 @@ export default function withSecondaryWindowedEditor(WrappedComponent, isTree = f
 				secondarySelectorSelected,
 				secondarySelectorSelectedField,
 				h,
+				style,
 
 				...propsToPass
 			} = props;
@@ -65,25 +68,28 @@ export default function withSecondaryWindowedEditor(WrappedComponent, isTree = f
 		}
 
 		return <>
-					<WrappedComponent {...props} />
+					<WrappedComponent {...props} ref={ref} />
 					{secondaryIsEditorShown && 
 						<Modal
 							isOpen={true}
 							onClose={() => secondarySetIsEditorShown(false)}
+							className="withSecondaryEditor-Modal"
 						>
-							<ModalBackdrop />
-							<ModalContent>
-								<ModalBody>
-									<SecondaryEditor
-										editorType={EDITOR_TYPE__WINDOWED}
-										{...propsToPass}
-										{...secondaryEditorProps}
-										parent={self}
-										reference="secondaryEditor"
-									/>
-								</ModalBody>
-							</ModalContent>
+							<ModalBackdrop className="withSecondaryEditor-ModalBackdrop" />
+							<SecondaryEditor
+								editorType={EDITOR_TYPE__WINDOWED}
+								{...propsToPass}
+								{...secondaryEditorProps}
+								parent={self}
+								reference="secondaryEditor"
+								className={`
+									bg-white
+									shadow-lg
+									rounded-lg
+								`}
+							/>
 						</Modal>}
 				</>;
-	}, isTree));
+	});
+	return withAdditionalProps(withSecondaryEditor(WindowedEditor, isTree));
 }

package/src/Components/Hoc/withFilters.js

@@ -6,6 +6,7 @@ import {
 } from '@project-components/Gluestack';
 import {
 	ScrollView,
+	Platform,
 } from 'react-native'
 import {
 	EDITOR_TYPE__PLAIN,
@@ -35,6 +36,8 @@ import _ from 'lodash';
 // 
 // Model defaultFilters should adjust to this new arrangement
 
+const isWindows = Platform.OS === 'windows';
+
 export default function withFilters(WrappedComponent) {
 	return forwardRef((props, ref) => {
 
@@ -140,9 +143,11 @@ export default function withFilters(WrappedComponent) {
 
 		const
 			filterCallbackRef = useRef(),
+			scrollViewRef = useRef(),
 			[filters, setFiltersRaw] = useState(formattedStartingFilters), // array of formatted filters
 			[slots, setSlots] = useState(startingSlots), // array of field names user is currently filtering on; blank slots have a null entry in array
 			[previousFilterNames, setPreviousFilterNames] = useState([]), // names of filters the repository used last query
+			[isHorizontalScrollbarShown, setIsHorizontalScrollbarShown] = useState(false),
 			setFilters = (filters, doSetSlots = true, save = true) => {
 				setFiltersRaw(filters);
 
@@ -349,6 +354,16 @@ export default function withFilters(WrappedComponent) {
 					w: 500,
 				});
 			},
+			onContentSizeChange = (contentWidth, contentHeight) => {
+				if (!isWindows) {
+					return;
+				}
+				if (scrollViewRef.current) {
+					scrollViewRef.current.measure((x, y, width, height, pageX, pageY) => {
+						setIsHorizontalScrollbarShown(contentWidth > width);
+					});
+				}
+			},
 			buildModalBody = (modalFilters, modalSlots) => {
 
 				const
@@ -603,6 +618,25 @@ export default function withFilters(WrappedComponent) {
 			})();
 		}, [filters]);
 
+		useEffect(() => {
+			if (!isWindows) {
+				return;
+			}
+
+			// NOTE: On Windows machines, I was getting horizontal scrollbars when the ScrollView 
+			// was not wide enough to contain all the filters. This workaround adds pb-5 to the ScrollView
+			// when the scrollbar is shown.
+
+			if (scrollViewRef.current) {
+				scrollViewRef.current.addEventListener('contentSizeChange', onContentSizeChange);
+			}
+			return () => {
+				if (scrollViewRef.current) {
+					scrollViewRef.current.removeEventListener('contentSizeChange', onContentSizeChange);
+				}
+			};
+		}, []);
+		
 		if (!isReady) {
 			return null;
 		}
@@ -615,9 +649,16 @@ export default function withFilters(WrappedComponent) {
 		const
 			renderedFilters = renderFilters(),
 			hasFilters = !!renderedFilters.length,
+			scrollViewClass = isWindows && isHorizontalScrollbarShown ? 'pb-5' : '',
 			toolbar = <Toolbar>
 						<HStack className="withFilters-scrollViewContainer flex-1 items-center">
-							<ScrollView className="ScrollView" horizontal={true} contentContainerStyle={{ alignItems: 'center' }}>
+							<ScrollView
+								ref={scrollViewRef}
+								className={`withFilters-ScrollView ${scrollViewClass}`}
+								horizontal={true}
+								contentContainerStyle={{ alignItems: 'center' }}
+								onContentSizeChange={onContentSizeChange}
+							>
 								<Text
 									className={`
 										withFilters-filtersLabel

package/src/Components/Hoc/withModal.js

@@ -163,13 +163,14 @@ export default function withModal(WrappedComponent) {
 					<Panel
 						title={title}
 						isCollapsible={false}
-						className="bg-white overflow-auto"
+						className="withModal-Panel bg-white"
 						h={h > windowHeight ? windowHeight : h}
 						w={w > windowWidth ? windowWidth : w}
 						isWindow={true}
 						disableAutoFlex={true}
 						onClose={canClose ? hideModal : null}
 						footer={footer}
+						isScrollable={true}
 					>{modalBody}</Panel>
 			}
 		}

package/src/Components/Hoc/withPdfButtons.js

@@ -83,7 +83,13 @@ export default function withPdfButtons(WrappedComponent) {
 
 				if (!_.isEmpty(ancillaryItems)) {
 					const
-						ancillaryItemsClone = _.cloneDeep(ancillaryItems),
+						ancillaryItemsClone = _.cloneDeepWith(ancillaryItems, (value) => {
+							// Exclude the 'parent' property from being cloned, as it would introduce an infinitely recursive loop
+							if (value && value.parent) {
+								const { parent, ...rest } = value;
+								return rest;
+							}
+						}),
 						items = [];
 					_.each(ancillaryItemsClone, (ancillaryItem) => { // clone, as we don't want to alter the item by reference
 						let name;

package/src/Components/Icons/ClipboardCheck.js

@@ -4,8 +4,8 @@ import { Path, Svg } from 'react-native-svg';
 
 const SvgComponent = createIcon({
 	Root: Svg,
-	viewBox: '0 0 9.51 12.68',
-	path: <Path d="M4.76 0C3.72 0 2.84.66 2.52 1.59h-.93C.72 1.59 0 2.3 0 3.18v7.93c0 .87.71 1.59 1.59 1.59h6.34c.87 0 1.59-.71 1.59-1.59V3.17c0-.87-.71-1.59-1.59-1.59H7A2.384 2.384 0 004.76-.01zm0 1.59c.44 0 .79.35.79.79s-.35.79-.79.79-.79-.35-.79-.79.35-.79.79-.79zm2.8 5.18L4.39 9.94c-.23.23-.61.23-.84 0L1.96 8.35c-.23-.23-.23-.61 0-.84s.61-.23.84 0l1.16 1.16 2.75-2.75c.23-.23.61-.23.84 0s.23.61 0 .84z" />
+	viewBox: '0 0 384 512',
+	path: <Path d="M192 0c-41.8 0-77.4 26.7-90.5 64L64 64C28.7 64 0 92.7 0 128L0 448c0 35.3 28.7 64 64 64l256 0c35.3 0 64-28.7 64-64l0-320c0-35.3-28.7-64-64-64l-37.5 0C269.4 26.7 233.8 0 192 0zm0 64a32 32 0 1 1 0 64 32 32 0 1 1 0-64zM305 273L177 401c-9.4 9.4-24.6 9.4-33.9 0L79 337c-9.4-9.4-9.4-24.6 0-33.9s24.6-9.4 33.9 0l47 47L271 239c9.4-9.4 24.6-9.4 33.9 0s9.4 24.6 0 33.9z" />
 });
 
 export default SvgComponent

package/src/Components/Icons/LowPriority.js

@@ -3,7 +3,7 @@ import { Path, Svg } from 'react-native-svg';
 
 const SvgComponent = createIcon({
 	Root: Svg,
-	viewBox: '0 0 512 512',
+	viewBox: '0 0 101.44 83.8',
 	path: <Path d="M58.92 4.5L99.9 68.86c4.12 6.47-.53 14.94-8.2 14.94H9.74c-7.67 0-12.32-8.47-8.2-14.94L42.52 4.5c3.82-6 12.58-6 16.4 0zm-8.2 68.21c3.24 0 5.34-2.34 5.34-5.46-.06-3.18-2.16-5.46-5.34-5.46s-5.4 2.28-5.4 5.46 2.16 5.46 5.4 5.46zm3.42-13.92l1.32-27.18h-9.54l1.38 27.18h6.84z" strokeWidth={0} />
 });
 

package/src/Components/Layout/CenterBox.js

@@ -1,4 +1,6 @@
-import { Box } from "../Gluestack";
+import {
+	Box
+} from '@project-components/Gluestack';
 
 export default function CenterBox(props) {
 	let className = `

package/src/Components/Layout/ScreenHeader.js

@@ -0,0 +1,73 @@
+import {
+	HStack,
+	Icon,
+	Text,
+	VStack,
+} from '@project-components/Gluestack';
+import {
+	SCREEN_MODES__FULL,
+	SCREEN_MODES__SIDE,
+} from '../../Constants/ScreenModes.js'
+import FullWidth from '../Icons/FullWidth';
+import SideBySide from '../Icons/SideBySide';
+import UiGlobals from '../../UiGlobals.js';
+import IconButton from '../Buttons/IconButton';
+import testProps from '../../Functions/testProps.js';
+import _ from 'lodash';
+
+export default function ScreenHeader(props) {
+	const {
+			title,
+			icon,
+			useModeIcons = false,
+			allowSideBySide = false,
+			actualMode,
+			onFullWidth,
+			onSideBySide,
+		} = props,
+		textProps = {},
+		styles = UiGlobals.styles;
+	if (styles.MANAGER_SCREEN_TITLE) {
+		textProps.style = {
+			fontFamily: styles.MANAGER_SCREEN_TITLE,
+		};
+	}
+	return <HStack className="ScreenHeader-HStack h-[80px] items-center border-b-[2px] border-b-[#ccc]">
+				{icon &&
+					<Icon
+						as={icon}
+						className={`
+							ml-5
+							text-black
+						`}
+						size="xl"
+					/>}
+				<Text {...textProps} className="ScreenHeader-Text pl-4 text-[26px] font-[700]">{title}</Text>
+				{useModeIcons && allowSideBySide &&
+					<>
+						<IconButton
+							{...testProps('fullModeBtn')}
+							icon={FullWidth}
+							_icon={{
+								size: 'xl',
+								className: 'text-black',
+							}}
+							isDisabled={actualMode === SCREEN_MODES__FULL}
+							onPress={onFullWidth}
+							tooltip="To full width"
+							className="ml-5"
+						/>
+						<IconButton
+							{...testProps('sideModeBtn')}
+							icon={SideBySide}
+							_icon={{
+								size: 'xl',
+								className: 'text-black',
+							}}
+							isDisabled={actualMode === SCREEN_MODES__SIDE}
+							onPress={onSideBySide}
+							tooltip="To side editor"
+						/>
+					</>}
+			</HStack>;
+}

package/src/Components/Layout/TextWithTooltip.js

@@ -0,0 +1,22 @@
+import {
+	TextNative,
+	Tooltip, TooltipContent, TooltipText,
+} from '@project-components/Gluestack';
+
+export default function TextWithTooltip(props) {
+	const {
+			tooltip,
+			children,
+			...propsToPass
+		} = props;
+	return <Tooltip
+				placement="bottom"
+				trigger={(triggerProps) => {
+					return <TextNative {...triggerProps} {...propsToPass}>{children}</TextNative>
+				}}
+			>
+				<TooltipContent>
+					<TooltipText>{tooltip}</TooltipText>
+				</TooltipContent>
+			</Tooltip>;
+}

package/src/Components/Panel/Header.js

@@ -15,6 +15,7 @@ import {
 	UI_MODE_NATIVE,
 } from '../../Constants/UiModes.js';
 import UiGlobals from '../../UiGlobals.js';
+import testProps from '../../Functions/testProps.js';
 import Minus from '../Icons/Minus.js';
 import Plus from '../Icons/Plus.js';
 import Xmark from '../Icons/Xmark.js';
@@ -55,6 +56,7 @@ export default function Header(props) {
 			closeClassName += ' mb-1';
 		}
 		closeBtn = <IconButton
+						{...testProps('closeBtn')}
 						onPress={onClose}
 						icon={Xmark}
 						_icon={{

package/src/Components/Panel/Panel.js

@@ -120,7 +120,7 @@ function Panel(props) {
 	}
 
 	// frame
-	className += ' border-primary-600' + (isWindow ? ' rounded-lg shadow-lg ' : '') + (frame ? ' border-2' : ' border-none');
+	className += ' border-grey-300' + (isWindow ? ' rounded-lg shadow-lg ' : '') + (frame ? ' border-2' : ' border-none');
 
 	if (props.className) {
 		className += ' ' + props.className;
@@ -143,8 +143,13 @@ function Panel(props) {
 							overflow-hidden
 						`}
 					>
-						{isScrollable ? 
-							<ScrollView className="Panel-ScrollView">
+						{isScrollable ?
+							<ScrollView
+								className="Panel-ScrollView"
+								contentContainerStyle={{
+									height: '100%',
+								}}
+							>
 								{children}
 							</ScrollView> : 
 							children}

package/src/Components/Screens/Manager.js

@@ -1,26 +1,22 @@
 import {
-	HStack,
-	Text,
 	VStackNative,
 } from '@project-components/Gluestack';
 import React, { useState, useEffect, } from 'react';
+import {
+	SCREEN_MODES__FULL,
+	SCREEN_MODES__SIDE,
+} from '../../Constants/ScreenModes.js'
 import withComponent from '../Hoc/withComponent.js';
 import testProps from '../../Functions/testProps.js';
-import UiGlobals from '../../UiGlobals.js';
-import IconButton from '../Buttons/IconButton';
-import FullWidth from '../Icons/FullWidth';
-import SideBySide from '../Icons/SideBySide';
+import ScreenHeader from '../Layout/ScreenHeader';
 import getSaved from '../../Functions/getSaved.js';
 import setSaved from '../../Functions/setSaved.js';
 import _ from 'lodash';
 
-const
-	MODE_FULL = 'MODE_FULL',
-	MODE_SIDE = 'MODE_SIDE';
-
 function ManagerScreen(props) {
 	const {
 			title,
+			icon,
 			sideModeComponent,
 			fullModeComponent,
 			onChangeMode,
@@ -28,15 +24,14 @@ function ManagerScreen(props) {
 			// withComponent
 			self,
 		} = props,
-		styles = UiGlobals.styles,
 		id = props.id || props.self?.path,
 		[isRendered, setIsRendered] = useState(false),
 		[isModeSet, setIsModeSet] = useState(false),
 		[allowSideBySide, setAllowSideBySide] = useState(false),
-		[mode, setModeRaw] = useState(MODE_FULL),
-		actualMode = (!allowSideBySide || mode === MODE_FULL) ? MODE_FULL : MODE_SIDE,
+		[mode, setModeRaw] = useState(SCREEN_MODES__FULL),
+		actualMode = (!allowSideBySide || mode === SCREEN_MODES__FULL) ? SCREEN_MODES__FULL : SCREEN_MODES__SIDE,
 		setMode = (newMode) => {
-			if (!allowSideBySide && newMode === MODE_SIDE) {
+			if (!allowSideBySide && newMode === SCREEN_MODES__SIDE) {
 				return;
 			}
 			if (newMode === mode) {
@@ -83,49 +78,22 @@ function ManagerScreen(props) {
 		self.mode = actualMode;
 	}
 
-	const
-		whichComponent = actualMode === MODE_FULL ? fullModeComponent : sideModeComponent,
-		textProps = {};
-	if (styles.MANAGER_SCREEN_TITLE) {
-		textProps.style = {
-			fontFamily: styles.MANAGER_SCREEN_TITLE,
-		};
-	}
+	const whichComponent = actualMode === SCREEN_MODES__FULL ? fullModeComponent : sideModeComponent;
 
 	return <VStackNative
 				{...testProps(self)}
 				onLayout={onLayout}
 				className="max-h-screen overflow-hidden flex-1 w-full"
 			>
-				<HStack className="h-[80px] items-center border-b-[2px] border-b-[#ccc]">
-					<Text {...textProps} className="pl-5 text-[26px] font-[700]">{title}</Text>
-					{allowSideBySide &&
-						<>
-							<IconButton
-								{...testProps('fullModeBtn')}
-								icon={FullWidth}
-								_icon={{
-									size: 'xl',
-									className: 'text-black',
-								}}
-								isDisabled={actualMode === MODE_FULL}
-								onPress={() => setMode(MODE_FULL)}
-								tooltip="To full width"
-								className="ml-5"
-							/>
-							<IconButton
-								{...testProps('sideModeBtn')}
-								icon={SideBySide}
-								_icon={{
-									size: 'xl',
-									className: 'text-black',
-								}}
-								isDisabled={actualMode === MODE_SIDE}
-								onPress={() => setMode(MODE_SIDE)}
-								tooltip="To side editor"
-							/>
-						</>}
-				</HStack>
+				<ScreenHeader
+					title={title}
+					icon={icon}
+					useModeIcons={true}
+					actualMode={actualMode}
+					allowSideBySide={allowSideBySide}
+					onFullWidth={() => setMode(SCREEN_MODES__FULL)}
+					onSideBySide={() => setMode(SCREEN_MODES__SIDE)}
+				/>
 				{isRendered && isModeSet && whichComponent}
 			</VStackNative>;
 }

package/src/Components/Screens/ReportsManager.js

@@ -0,0 +1,62 @@
+import { useState, } from 'react';
+import {
+	HStack,
+	ScrollView,
+	VStack,
+	VStackNative,
+} from '@project-components/Gluestack';
+import ChartPie from '../Icons/ChartPie.js';
+import ScreenHeader from '../Layout/ScreenHeader.js';
+
+const CONTAINER_THRESHOLD = 1100;
+
+export default function ReportsManager(props) {
+	const {
+			reports = [],
+			isActive = false,
+		} = props,
+		[containerWidth, setContainerWidth] = useState(),
+		onLayout = (e) => {
+			setContainerWidth(e.nativeEvent.layout.width);
+		};
+
+	if (!isActive) {
+		return null;
+	}
+
+	let reportElements = [];
+	if (containerWidth) {
+		if (containerWidth >= CONTAINER_THRESHOLD) {
+			// two column layout
+			const
+				reportsPerColumn = Math.ceil(reports.length / 2),
+				col1Reports = reports.slice(0, reportsPerColumn),
+				col2Reports = reports.slice(reportsPerColumn);
+			reportElements = <HStack className="gap-3">
+								<VStack className="flex-1">
+									{col1Reports}
+								</VStack>
+								<VStack className="flex-1">
+									{col2Reports}
+								</VStack>
+							</HStack>;
+		} else {
+			// one column layout
+			reportElements = reports;
+		}
+	}
+	
+	return <VStack
+				className="overflow-hidden flex-1 w-full"
+			>
+				<ScreenHeader
+					title="Reports"
+					icon={ChartPie}
+				/>
+				<ScrollView className="flex-1 w-full">
+					<VStackNative className="w-full p-4" onLayout={onLayout}>
+						{containerWidth && reportElements}
+					</VStackNative>
+				</ScrollView>
+			</VStack>;
+}

package/src/Components/Toolbar/Pagination.js

@@ -126,6 +126,7 @@ export default function Pagination(props) {
 							text-center
 							bg-grey-100
 						`}
+						textAlignIsCenter={true}
 						tooltip="Set Page"
 					/>);
 					items.push(<Text

package/src/Components/Tree/Tree.js

@@ -1396,7 +1396,13 @@ function TreeComponent(props) {
 					}}
 					className="Tree-deselector w-full flex-1 p-1 bg-white"
 				>
-					<ScrollView {...testProps('ScrollView')} className="ScrollView flex-1 w-full">
+					<ScrollView
+						{...testProps('ScrollView')}
+						className="Tree-ScrollView flex-1 w-full"
+						contentContainerStyle={{
+							height: '100%',
+						}}
+					>
 						{!treeNodes?.length ? 
 						<CenterBox>
 							{Repository.isLoading ? <Loading /> : <NoRecordsFound text={noneFoundText} onRefresh={reloadTree} />}

package/src/Components/Tree/TreeNode.js

@@ -109,7 +109,9 @@ export default function TreeNode(props) {
 									text-ellipsis
 									${styles.TREE_NODE_CLASSNAME}
 								`}
-								style={{ userSelect: 'none', }}
+								style={{
+									// userSelect: 'none',
+								}}
 							>{text}</TextNative> : null}
 
 					{content}

package/src/Constants/ScreenModes.js

@@ -0,0 +1,2 @@
+export const SCREEN_MODES__FULL = 'SCREEN_MODES__FULL';
+export const SCREEN_MODES__SIDE = 'SCREEN_MODES__SIDE';

package/src/Functions/Cypress/dom_functions.js

@@ -24,9 +24,11 @@ export function getDomNodes(selectors, options = {}) {
 
 /**
  * Builds selector string for data-testid attributes.
- * @argument {string | string[]} selectors - data-testid attribute values
- * If an array is given, these will be considered nested selectors.
+ * It leaves classname, id, and attribute selectors unchanged.
+ * 
+ * If selectors is an array, these will be considered nested selectors.
  * e.g. ['parent', 'child'] will be converted to '[data-testid="parent"] [data-testid="child"]'
+ * @argument {string|string[]} selectors - data-testid attribute values
  * @return {string}
  */
 export function getTestIdSelectors(selectors, isGetFirst = false) {
@@ -34,16 +36,47 @@ export function getTestIdSelectors(selectors, isGetFirst = false) {
 		selectors = [selectors];
 	}
 	const selectorParts = _.map(selectors, (selector) => {
-		if (selector.match(/=/)) { // selector is something like [role="switch"], so don't use data-testid
-			return selector;
-		}
-		if (selector.match(/^\./)) { // selector is something like .my-class, so don't use data-testid
-			return selector;
+		if (!selector.match(/^\./) // className, like .my-class
+			&& !selector.match(/^#/) // id, like @my-id
+			&& !selector.match(/=/) // attribute, like [role="switch"]
+		){
+			selector = '[data-testid="' + selector + '"]';
 		}
-		if (selector.match(/^#/)) { // selector is something like #my-id, so don't use data-testid
-			return selector;
+		if (isGetFirst) {
+			selector += ':first';
 		}
-		return '[data-testid="' + selector + '"]' + (isGetFirst ? ':first' : '');
+		return selector;
 	});
 	return selectorParts.join(' ');
 }
+
+export function drag(draggableSelectors, droppableSelectors, options = {}) {
+	if (typeof options.force === 'undefined') {
+		options.force = true;
+	}
+
+	// getDomNode(getTestIdSelectors(droppableSelectors)).then((node) => {
+	// 	const selectors = getTestIdSelectors(droppableSelectors);
+	// 	debugger;
+	// });
+
+	options = {
+		source: { // applies to the element being dragged
+			x: 10,
+			// y: 100,
+			position: 'left',
+		},
+		target: { // applies to the drop target
+			position: 'left',
+			x: 20,
+		},
+		force: true, // applied to both the source and target element
+	};
+
+
+	return getDomNode(draggableSelectors)
+			.drag(getTestIdSelectors(droppableSelectors), options)
+			.then((success) => {
+				debugger;
+			});
+}

package/src/Styles/Global.css

@@ -1,6 +1,6 @@
 html, body {
-	/* -webkit-user-select: none;
-	user-select: none; */
+	-webkit-user-select: none;
+	user-select: none;
 }
 
 /* to fix the inline editor */