@onehat/ui 0.4.25 → 0.4.27

package/package.json

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

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/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();
@@ -416,7 +417,7 @@ function GridComponent(props) {
 											if (canUser && !canUser(VIEW)) { // permissions
 												return;
 											}
-											onView(true);
+											onView(!props.isEditorViewOnly);
 										}
 									} else {
 										if (onEdit) {
@@ -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/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/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/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/Screens/Manager.js

@@ -1,5 +1,6 @@
 import {
 	HStack,
+	Icon,
 	Text,
 	VStackNative,
 } from '@project-components/Gluestack';
@@ -98,7 +99,16 @@ function ManagerScreen(props) {
 				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>
+					{props.icon ? 
+						<Icon
+							as={props.icon}
+							className={`
+								ml-5
+							`}
+							size="xl"
+							color="#000"
+						/> : null}
+					<Text {...textProps} className="pl-4 text-[26px] font-[700]">{title}</Text>
 					{allowSideBySide &&
 						<>
 							<IconButton

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

@@ -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,10 +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(/^\./) // className, like .my-class
+			&& !selector.match(/^#/) // id, like @my-id
+			&& !selector.match(/=/) // attribute, like [role="switch"]
+		){
+			selector = '[data-testid="' + 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/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/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;
-	
-	
-}