@onehat/ui 0.4.25 → 0.4.26

package/package.json

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

package/src/Components/Editor/Editor.js

@@ -1,5 +1,6 @@
 import {
 	EDITOR_MODE__VIEW,
+	EDITOR_TYPE__SIDE,
 } from '../../Constants/Editor.js';
 import withComponent from '../Hoc/withComponent.js';
 import withPdfButtons from '../Hoc/withPdfButtons.js';
@@ -34,7 +35,10 @@ function Editor(props) {
 		return null; // hide the editor when no selection
 	}
 
-	const propsToPass = _.omit(props, ['self', 'reference', 'parent']);
+	const propsToPass = _.omit(props, ['self', 'reference', 'parent', 'style']);
+	if (propsToPass.editorType === EDITOR_TYPE__SIDE) {
+		propsToPass.style = props.style; // side editor needs the style prop, but a windowed editor can get messed up if it's present (and withModal is used)!
+	}
 
 	let canEdit = true;
 	if (canRecordBeEdited && !canRecordBeEdited(selection)) {

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

@@ -77,7 +77,6 @@ function TagComponent(props) {
 			showModal({
 				body: <Editor
 							editorType={EDITOR_TYPE__WINDOWED}
-							{...propsToPass}
 							parent={self}
 							reference="viewer"
 							isEditorViewOnly={true}
@@ -234,6 +233,7 @@ function TagComponent(props) {
 						onView={() => onView(val)}
 						onDelete={!isViewOnly ? () => onDelete(val) : null}
 						showEye={showEye}
+						minimizeForRow={minimizeForRow}
 					/>;
 		});
 	
@@ -297,7 +297,7 @@ function TagComponent(props) {
 			valueBoxesClassName += ' min-h-[25px] h-full overflow-auto flex-1';
 		} else {
 			// shrink both down
-			valueBoxesClassName += ' h-auto min-h-[25px] max-h-[25px] overflow-auto flex-1';
+			valueBoxesClassName += ' Scott h-auto min-h-[25px] max-h-[35px] overflow-auto flex-1';
 			comboClassName += ' h-auto min-h-0 max-h-[25px] flex-1';
 		}
 	}

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

@@ -15,6 +15,7 @@ export default function ValueBox(props) {
 			onView,
 			onDelete,
 			showEye,
+			minimizeForRow = false,
 		} = props,
 		styles = UiGlobals.styles;
 	return <HStackNative
@@ -31,20 +32,22 @@ export default function ValueBox(props) {
 					${!onDelete && 'pr-4'}
 				`}
 			>
-				{showEye && <IconButton
-								{...testProps('eyeBtn')}
-								icon={Eye}
-								_icon={{
-									size: styles.FORM_TAG_VALUEBOX_ICON_SIZE,
-									className: 'text-grey-600',
-								}}
-								onPress={onView}
-								className={`
-									ValueBox-eyeBtn
-									h-full
-									${styles.FORM_TAG_BTN_CLASSNAME}
-								`}
-							/>}
+				{showEye &&
+					<IconButton
+						{...testProps('eyeBtn')}
+						icon={Eye}
+						_icon={{
+							size: styles.FORM_TAG_VALUEBOX_ICON_SIZE,
+							className: 'text-grey-600',
+						}}
+						onPress={onView}
+						className={`
+							ValueBox-eyeBtn
+							h-full
+							${minimizeForRow ? 'py-0' : ''}
+							${styles.FORM_TAG_BTN_CLASSNAME}
+						`}
+					/>}
 				<Text
 					className={`
 						ValueBox-Text
@@ -52,6 +55,7 @@ export default function ValueBox(props) {
 						${styles.FORM_TAG_VALUEBOX_CLASSNAME}
 						${showEye ? 'ml-0' : 'ml-1'}
 						${onDelete ? 'mr-0' : 'mr-1'}
+						${minimizeForRow ? 'py-0' : ''}
 					`}
 				>{text}</Text>
 				{onDelete &&
@@ -66,6 +70,7 @@ export default function ValueBox(props) {
 						className={`
 							ValueBox-xBtn
 							h-full
+							${minimizeForRow ? 'py-0' : ''}
 							${styles.FORM_TAG_BTN_CLASSNAME}
 						`}
 					/>}

package/src/Components/Grid/Grid.js

@@ -153,6 +153,7 @@ function GridComponent(props) {
 			alternateRowBackgrounds = true,
 			alternatingInterval = 2,
 			defaultRowHeight = 48,
+			getRowTestId,
 			
 			// The selectorSelected mechanism allows us to filter results of the primary model, (e.g. WorkOrders)
 			//   by the selection on the secondary model (e.g. Equipment). It's used on Grids, Trees, Forms, etc.
@@ -390,7 +391,7 @@ function GridComponent(props) {
 
 			let rowComponent =
 				<Pressable
-					{...testProps((Repository ? Repository.schema.name : 'GridRow') + '-' + item?.id)}
+					{...testProps(getRowTestId ? getRowTestId(row) : ((Repository ? Repository.schema.name : 'GridRow') + '-' + item?.id))}
 					onPress={(e) => {
 						if (e.preventDefault && e.cancelable) {
 							e.preventDefault();
@@ -597,6 +598,7 @@ function GridComponent(props) {
 										`}
 									>
 										<ExpandButton
+											{...testProps((Repository ? Repository.schema.name : 'GridRow') + '-expandBtn-' + item?.id)}
 											isExpanded={isExpanded}
 											onToggle={() => setIsExpanded(index, !isExpanded)}
 											_icon={{
@@ -1272,7 +1274,8 @@ function GridComponent(props) {
 			</VStackNative>
 
 	if (isDropTarget) {
-		grid = <Box
+		grid = <VStackNative
+					{...testProps(self, '-dropTarget')}
 					ref={dropTargetRef}
 					className={`
 						Grid-dropTarget
@@ -1281,7 +1284,7 @@ function GridComponent(props) {
 						border-[#0ff]
 						${canDrop && isOver ? "border-[4px]" : "border-[0px]"}
 					`}
-				>{grid}</Box>
+				>{grid}</VStackNative>
 	}
 	return grid;
 }

package/src/Components/Toolbar/PaginationToolbar.js

@@ -47,8 +47,9 @@ export default function PaginationToolbar(props) {
 					minimize={minimize}
 					disablePageSize={disablePageSize}
 				/>
-				{toolbarItems.length &&
+				{toolbarItems.length ?
 					<HStack className={`
+						PaginationToolbar-HStack
 						flex-1
 						space-x-1
 						border-l
@@ -56,6 +57,6 @@ export default function PaginationToolbar(props) {
 						ml-3
 						pl-3
 					`}
-					>{toolbarItems}</HStack>}
+					>{toolbarItems}</HStack> : null}
 			</Toolbar>;
 };

package/src/Functions/Cypress/dom_functions.js

@@ -37,6 +37,12 @@ export function getTestIdSelectors(selectors, isGetFirst = false) {
 		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(/^#/)) { // selector is something like #my-id, so don't use data-testid
+			return selector;
+		}
 		return '[data-testid="' + selector + '"]' + (isGetFirst ? ':first' : '');
 	});
 	return selectorParts.join(' ');

package/src/Functions/testProps.js

@@ -4,7 +4,7 @@ import UiGlobals from '../UiGlobals.js';
 // This adds a data-testid attribute to the DOM node,
 // which can be quried in Cypress by: document.querySelector(`[data-testid='MyTestId']`);
 
-export default function testProps(id) {
+export default function testProps(id, suffix) {
 	if (!UiGlobals.debugMode) {
 		return {};
 	}
@@ -19,6 +19,9 @@ export default function testProps(id) {
 	if (id.match(/\s/g)) {
 		id = id.replace(/\s/g, '_'); // convert any spaces to underscores
 	}
+	if (suffix) {
+		id += suffix; // this is used in conjunction with 'self' object
+	}
 	if (!window && Platform.OS === 'android') {
 		return {
 			accessibilityLabel: id,

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 */

package/src/Components/Window/Editor.js

@@ -1,14 +0,0 @@
-import Container from '../Container/Container.js';
-import emptyFn from '../../Functions/emptyFn.js';
-import _ from 'lodash';
-
-export default function EditorWindow(props) {
-	const {
-			title,
-			isOpen = false,
-			onClose = emptyFn,
-			...propsToPass
-		} = props;
-	
-	
-}