@onehat/ui 0.2.77 → 0.2.79

package/package.json

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

package/src/Components/Editor/Editor.js

@@ -1,7 +1,5 @@
 import {
 	EDITOR_MODE__VIEW,
-	EDITOR_MODE__ADD,
-	EDITOR_MODE__EDIT,
 } from '../../Constants/Editor.js';
 import _ from 'lodash';
 
@@ -16,7 +14,7 @@ export default function Editor(props) {
 			onEditorClose: onClose,
 			onEditorDelete: onDelete,
 			editorMode,
-			setEditorMode,
+			onEditMode,
 
 			// withData
 			Repository,
@@ -24,13 +22,7 @@ export default function Editor(props) {
 			// withSelection
 			selection,
 
-		} = props,
-		onEditMode = () => {
-			setEditorMode(EDITOR_MODE__EDIT);
-		},
-		onViewMode = () => {
-			setEditorMode(EDITOR_MODE__VIEW);
-		};
+		} = props;
 
 	if (_.isEmpty(selection)) {
 		return null;
@@ -42,7 +34,7 @@ export default function Editor(props) {
 					record={selection[0]}
 					onEditMode={isViewOnly ? null : onEditMode}
 					onClose={onClose}
-					// onDelete={onDelete}
+					onDelete={onDelete}
 				/>;
 	}
 
@@ -52,7 +44,6 @@ export default function Editor(props) {
 	return <Form
 				{...props}
 				record={selection}
-				onViewMode={onViewMode}
 				onCancel={onCancel}
 				onSave={onSave}
 				onClose={onClose}

package/src/Components/Editor/Viewer.js

@@ -20,7 +20,12 @@ export default function Viewer(props) {
 	const {
 			additionalViewButtons = [],
 			ancillaryItems = [],
+			viewerCanDelete = false,
+
+			// withData
 			record,
+
+			// withEditor
 			onEditMode,
 			onClose,
 			onDelete,
@@ -80,19 +85,18 @@ export default function Viewer(props) {
 					</Column>
 				</ScrollView>
 				<Footer justifyContent="flex-end">
-					{onDelete && <Row flex={1} justifyContent="flex-start">
-											<Button
-												key="deleteBtn"
-												onPress={() => {
-													confirm('Are you sure you want to delete this record?', onDelete);
-												}}
-												bg="warning"
-												_hover={{
-													bg: 'warningHover',
-												}}
-												color="#fff"
-											>Delete</Button>
-										</Row>}
+					{onDelete && viewerCanDelete && 
+						<Row flex={1} justifyContent="flex-start">
+							<Button
+								key="deleteBtn"
+								onPress={onDelete}
+								bg="warning"
+								_hover={{
+									bg: 'warningHover',
+								}}
+								color="#fff"
+							>Delete</Button>
+						</Row>}
 					<Button.Group space={2}>
 						<Button
 							key="closeBtn"

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

@@ -12,12 +12,15 @@ import {
 } from '../../../../Constants/UiModes.js';
 import UiGlobals from '../../../../UiGlobals.js';
 import Input from '../Input.js';
+import withAlert from '../../../Hoc/withAlert.js';
 import withData from '../../../Hoc/withData.js';
 import withEvents from '../../../Hoc/withEvents.js';
+import withPresetButtons from '../../../Hoc/withPresetButtons.js';
 import withSelection from '../../../Hoc/withSelection.js';
 import withValue from '../../../Hoc/withValue.js';
+import withWindowedEditor from '../../../Hoc/withWindowedEditor.js';
 import emptyFn from '../../../../Functions/emptyFn.js';
-import { Grid } from '../../../Grid/Grid.js';
+import { Grid, WindowedGridEditor } from '../../../Grid/Grid.js';
 import IconButton from '../../../Buttons/IconButton.js';
 import CaretDown from '../../../Icons/CaretDown.js';
 import _ from 'lodash';
@@ -26,7 +29,7 @@ import _ from 'lodash';
 // The default export is *with* the HOC. A separate *raw* component is
 // exported which can be combined with many HOCs for various functionality.
 
-export function Combo(props) {
+export function ComboComponent(props) {
 	const {
 			additionalButtons,
 			autoFocus = false,
@@ -36,7 +39,9 @@ export function Combo(props) {
 			menuMinWidth = 150,
 			disableDirectEntry = false,
 			disablePagination = true,
+			hideMenuOnSelection = true,
 			_input = {},
+			isEditor = false,
 
 			// withValue
 			value,
@@ -341,6 +346,8 @@ export function Combo(props) {
 	if (tooltipRef) {
 		refProps.ref = tooltipRef;
 	}
+
+	const WhichGrid = isEditor ? WindowedGridEditor : Grid;
 	
 	let comboComponent = <Row {...refProps} justifyContent="center" alignItems="center" h={styles.FORM_COMBO_HEIGHT} flex={1} onLayout={() => setIsRendered(true)}>
 								{disableDirectEntry ?
@@ -474,7 +481,7 @@ export function Combo(props) {
 											borderTopWidth={0}
 											p={0}
 										>
-											<Grid
+											<WhichGrid
 												showHeaders={false}
 												showHovers={true}
 												shadow={1}
@@ -489,13 +496,16 @@ export function Combo(props) {
 													};
 												}}
 												{...props}
+												disablePresetButtons={!isEditor}
 												disablePagination={disablePagination}
 												fireEvent={onEvent}
 												setSelection={(selection) => {
 													// Decorator fn to add local functionality
 													// Close the menu when row is selected on grid
 													setSelection(selection);
-													hideMenu();
+													if (hideMenuOnSelection) {
+														hideMenu();
+													}
 												}}
 												selectionMode={selectionMode}
 												setValue={(value) => {
@@ -515,13 +525,30 @@ export function Combo(props) {
 	return comboComponent;
 }
 
-export default 
-				// withEvents(
-					withData(
+export const Combo = withData(
 						withValue(
 							withSelection(
-								Combo
+								ComboComponent
 							)
 						)
 					);
-				// );
+
+
+
+function withAdditionalProps(WrappedComponent) {
+	return (props) => {
+		return <WrappedComponent
+					isEditor={true}
+					hideMenuOnSelection={false}
+					disableView={true}
+					disableCopy={true}
+					disableDuplicate={true}
+					disablePrint={true}
+					{...props}
+				/>;
+	};
+}
+
+export const ComboEditor = withAdditionalProps(Combo);
+
+export default Combo;

package/src/Components/Form/Form.js

@@ -87,6 +87,7 @@ function Form(props) {
 			onSave,
 			onClose,
 			onDelete,
+			editorStateRef,
 
 			// DataMgt
 			selectorId,
@@ -148,6 +149,11 @@ function Form(props) {
 					borderRightColor: 'trueGray.200',
 					px: 1,
 				};
+
+			if (editorType === EDITOR_TYPE__INLINE) {
+				columnProps.minWidth = styles.INLINE_EDITOR_MIN_WIDTH;
+			}
+
 			_.each(columnsConfig, (config, ix) => {
 				let {
 						fieldName,
@@ -159,7 +165,11 @@ function Form(props) {
 					} = config;
 
 				if (!isEditable) {
-					const renderedValue = renderer ? renderer(record) : record[fieldName];
+					let renderedValue = renderer ? renderer(record) : record[fieldName];
+					if (_.isBoolean(renderedValue)) {
+						renderedValue = renderedValue.toString();
+					}
+					renderedValue += "\n(not editable)";
 					elements.push(<Box key={ix} w={w} flex={flex} {...columnProps}>
 										<Text numberOfLines={1} ellipsizeMode="head">{renderedValue}</Text>
 									</Box>);
@@ -200,13 +210,7 @@ function Form(props) {
 												}
 											}
 											const Element = getComponentFromType(editor);
-											if (!Element) {
-												debugger;
-												// LEFT OFF HERE
-												// Trying inline editor, based on columnsConfig
-												// Getting an error that the OrdersEditor is missing users__email.
-												// Why is this even on the OrdersEditor? Runner?
-											}
+
 											let element = <Element
 																name={name}
 																value={value}
@@ -450,6 +454,10 @@ function Form(props) {
 	// if (Repository && (!record || _.isEmpty(record))) {
 	// 	return null;
 	// }
+
+	if (!_.isNil(editorStateRef)) {
+		editorStateRef.current = formState; // Update state so HOC can know what's going on
+	}
 	
 	const sizeProps = {};
 	if (!flex && !h && !w) {
@@ -517,6 +525,12 @@ function Form(props) {
 	if (_.isEmpty(formState.dirtyFields) && !record?.isRemotePhantom) {
 		isSaveDisabled = true;
 	}
+
+	if (editorType === EDITOR_TYPE__INLINE) {
+		buttonGroupProps.position = 'fixed';
+		buttonGroupProps.left = 10; // TODO: I would prefer to have this be centered, but it's a lot more complex than just making it stick to the left
+		footerProps.alignItems = 'flex-start';
+	}
 	
 	return <Column {...sizeProps} onLayout={onLayout}>
 
@@ -532,13 +546,7 @@ function Form(props) {
 					{isSingle && editorMode === EDITOR_MODE__EDIT && onViewMode && 
 						<Button
 							key="viewBtn"
-							onPress={() => {
-								if (!_.isEmpty(formState.dirtyFields)) {
-									confirm('This record has unsaved changes. Are you sure you want to switch to "View" mode? Changes will be lost.', onViewMode);
-								} else {
-									onViewMode();
-								}
-							}}
+							onPress={onViewMode}
 							leftIcon={<Icon as={Eye} color="#fff" size="sm" />}	
 							color="#fff"
 						>To View</Button>}
@@ -551,19 +559,18 @@ function Form(props) {
 				{editor}
 
 				<Footer justifyContent="flex-end" {...footerProps}>
-					{onDelete && <Row flex={1} justifyContent="flex-start">
-										<Button
-											key="deleteBtn"
-											onPress={() => {
-												confirm('Are you sure you want to delete this record?', onDelete);
-											}}
-											bg="warning"
-											_hover={{
-												bg: 'warningHover',
-											}}
-											color="#fff"
-										>Delete</Button>
-									</Row>}
+					{onDelete && editorMode === EDITOR_MODE__EDIT && 
+						<Row flex={1} justifyContent="flex-start">
+							<Button
+								key="deleteBtn"
+								onPress={onDelete}
+								bg="warning"
+								_hover={{
+									bg: 'warningHover',
+								}}
+								color="#fff"
+							>Delete</Button>
+						</Row>}
 					<Button.Group space={2} {...buttonGroupProps}>
 				
 						{!isViewOnly && <IconButton
@@ -579,13 +586,7 @@ function Form(props) {
 						{!isViewOnly && onCancel && <Button
 														key="cancelBtn"
 														variant="ghost"
-														onPress={() => {
-															if (!_.isEmpty(formState.dirtyFields)) {
-																confirm('This record has unsaved changes. Are you sure you want to cancel editing? Changes will be lost.', onCancel);
-															} else {
-																onCancel();
-															}
-														}}
+														onPress={onCancel}
 														color="#fff"
 													>Cancel</Button>}
 						{!isViewOnly && onSave && <Button

package/src/Components/Grid/Grid.js

@@ -127,8 +127,8 @@ function GridComponent(props) {
 			selectorSelected,
 
 			// withInlineEditor
-			inlineEditorRef,
-			onScrollRow,
+			inlineEditor = null,
+			isInlineEditorShown = false,
 			onEditorRowClick,
 
 		} = props,
@@ -137,8 +137,8 @@ function GridComponent(props) {
 		gridRef = useRef(),
 		[isReady, setIsReady] = useState(false),
 		[isLoading, setIsLoading] = useState(false),
-		[isReorderMode, setIsReorderMode] = useState(false),
 		[localColumnsConfig, setLocalColumnsConfigRaw] = useState([]),
+		[isDragMode, setIsDragMode] = useState(false),
 		[dragRowSlot, setDragRowSlot] = useState(null),
 		[dragRowIx, setDragRowIx] = useState(),
 		setLocalColumnsConfig = (config) => {
@@ -148,6 +148,9 @@ function GridComponent(props) {
 			}
 		},
 		onRowClick = (item, e) => {
+			if (isInlineEditorShown) {
+				return;
+			}
 			const
 				{
 					shiftKey,
@@ -223,8 +226,8 @@ function GridComponent(props) {
 			if (canRowsReorder) {
 				items.unshift(<IconButton
 					key="reorderBtn"
-					onPress={() => setIsReorderMode(!isReorderMode)}
-					icon={<Icon as={isReorderMode ? NoReorderRows : ReorderRows} color={styles.GRID_TOOLBAR_ITEMS_COLOR} />}
+					onPress={() => setIsDragMode(!isDragMode)}
+					icon={<Icon as={isDragMode ? NoReorderRows : ReorderRows} color={styles.GRID_TOOLBAR_ITEMS_COLOR} />}
 				/>);
 			}
 			return items;
@@ -233,6 +236,9 @@ function GridComponent(props) {
 			if (row.item.isDestroyed) {
 				return null;
 			}
+			if (row.item.id === 'inlineEditor') {
+				return inlineEditor;
+			}
 
 			let {
 					item,
@@ -248,7 +254,7 @@ function GridComponent(props) {
 							if (e.preventDefault && e.cancelable) {
 								e.preventDefault();
 							}
-							if (isHeaderRow || isReorderMode) {
+							if (isHeaderRow || isDragMode) {
 								return
 							}
 							switch (e.detail) {
@@ -275,7 +281,7 @@ function GridComponent(props) {
 							if (e.preventDefault && e.cancelable) {
 								e.preventDefault();
 							}
-							if (isHeaderRow || isReorderMode) {
+							if (isHeaderRow || isDragMode) {
 								return
 							}
 							
@@ -309,6 +315,7 @@ function GridComponent(props) {
 											setSelection={setSelection}
 											gridRef={gridRef}
 											isHovered={isHovered}
+											isInlineEditorShown={isInlineEditorShown}
 										/>;
 							}
 
@@ -331,7 +338,7 @@ function GridComponent(props) {
 							}
 							let WhichGridRow = GridRow,
 								rowReorderProps = {};
-							if (canRowsReorder && isReorderMode) {
+							if (canRowsReorder && isDragMode) {
 								WhichGridRow = ReorderableGridRow;
 								rowReorderProps = {
 									mode: VERTICAL,
@@ -353,6 +360,7 @@ function GridComponent(props) {
 										hideNavColumn={hideNavColumn}
 										bg={bg}
 										item={item}
+										isInlineEditorShown={isInlineEditorShown}
 										{...rowReorderProps}
 									/>;
 						}}
@@ -660,10 +668,10 @@ function GridComponent(props) {
 							...propsToPass,
 						};
 
-					if (!config.w && !config.flex) {
+					if (!(config.w || config.width) && !config.flex) {
 						// Neither is set
 						config.w = 100; // default
-					} else if (config.flex && config.width) {
+					} else if (config.flex && (config.w || config.width)) {
 						// Both are set. Width overrules flex.
 						delete config.flex;
 					}
@@ -729,7 +737,7 @@ function GridComponent(props) {
 
 	}, [selectorId, selectorSelected]);
 
-	const footerToolbarItemComponents = useMemo(() => getFooterToolbarItems(), [additionalToolbarButtons, isReorderMode]);
+	const footerToolbarItemComponents = useMemo(() => getFooterToolbarItems(), [additionalToolbarButtons, isDragMode]);
 
 	if (!isReady) {
 		return null;
@@ -741,6 +749,9 @@ function GridComponent(props) {
 	if (showHeaders) {
 		rowData.unshift({ id: 'headerRow' });
 	}
+	if (inlineEditor) {
+		rowData.push({ id: 'inlineEditor' }); // make editor the last row so it can scroll with all other rows
+	}
 	const initialNumToRender = rowData.length || 10;
 
 	// headers & footers
@@ -768,7 +779,7 @@ function GridComponent(props) {
 				{topToolbar}
 
 				<Column w="100%" flex={1} borderTopWidth={isLoading ? 2 : 1} borderTopColor={isLoading ? '#f00' : 'trueGray.300'} onClick={() => {
-					if (!isReorderMode) {
+					if (!isDragMode && !isInlineEditorShown) {
 						deselectAll();
 					}
 				}}>
@@ -781,8 +792,8 @@ function GridComponent(props) {
 							nestedScrollEnabled={true}
 							contentContainerStyle={{
 								overflow: 'auto',
-								borderWidth: isReorderMode ? styles.REORDER_BORDER_WIDTH : 0,
-								borderColor: isReorderMode ? styles.REORDER_BORDER_COLOR : null,
+								borderWidth: isDragMode ? styles.REORDER_BORDER_WIDTH : 0,
+								borderColor: isDragMode ? styles.REORDER_BORDER_COLOR : null,
 								borderStyle: styles.REORDER_BORDER_STYLE,
 								flex: 1,
 							}}

package/src/Components/Grid/GridHeaderRow.js

@@ -40,6 +40,7 @@ export default function GridHeaderRow(props) {
 			setSelection,
 			gridRef,
 			isHovered,
+			isInlineEditorShown,
 		} = props,
 		styles = UiGlobals.styles,
 		sortFn = Repository && Repository.getSortFn(),
@@ -316,6 +317,10 @@ export default function GridHeaderRow(props) {
 						}
 					}
 
+					if (isInlineEditorShown) {
+						propsToPass.minWidth = styles.INLINE_EDITOR_MIN_WIDTH;
+					}
+
 					return <Pressable
 								key={ix}
 								onPress={(e) => {
@@ -453,6 +458,7 @@ export default function GridHeaderRow(props) {
 		isSortDirectionAsc,
 		sortFn,
 		sortField,
+		isInlineEditorShown,
 	]);
 }
 

package/src/Components/Grid/GridRow.js

@@ -23,6 +23,7 @@ export default function GridRow(props) {
 			hideNavColumn,
 			bg,
 			item,
+			isInlineEditorShown,
 		} = props,
 		styles = UiGlobals.styles,
 		isPhantom = item.isPhantom,
@@ -44,6 +45,10 @@ export default function GridRow(props) {
 						propsToPass.p = 1;
 						propsToPass.justifyContent = 'center';
 
+						if (isInlineEditorShown) {
+							propsToPass.minWidth = styles.INLINE_EDITOR_MIN_WIDTH;
+						}
+
 						let value;
 						if (_.isPlainObject(config)) {
 							if (config.renderer) {
@@ -64,6 +69,16 @@ export default function GridRow(props) {
 									'showDragHandles',
 								]);
 
+								if (!extraProps._web) {
+									extraProps._web = {};
+								}
+								if (!extraProps._web.style) {
+									extraProps._web.style = {};
+								}
+								extraProps._web.style = {
+									userSelect: 'none',
+								};
+
 								return <Row key={key} {...propsToPass} {...extraProps}>{config.renderer(item)}</Row>;
 							}
 							if (config.fieldName) {
@@ -98,7 +113,9 @@ export default function GridRow(props) {
 									overflow="hidden"
 									textOverflow="ellipsis"
 									alignSelf="center"
-									style={{ userSelect: 'none', }}
+									style={{
+										userSelect: 'none',
+									}}
 									fontSize={styles.GRID_CELL_FONTSIZE}
 									px={styles.GRID_CELL_PX}
 									py={styles.GRID_CELL_PY}
@@ -141,6 +158,7 @@ export default function GridRow(props) {
 			item,
 			isPhantom,
 			hash, // this is an easy way to determine if the data has changed and the item needs to be rerendered
+			isInlineEditorShown,
 		]);
 }
 

package/src/Components/Hoc/withContextMenu.js

@@ -64,6 +64,12 @@ export default function withContextMenu(WrappedComponent) {
 					};
 					icon = React.cloneElement(icon, {...iconProps});
 				}
+
+				// <div style={{
+				// 	userSelect: 'none',
+				// }}>
+				// </div>
+
 				return <Pressable
 							key={ix}
 							onPress={() => {
@@ -79,6 +85,10 @@ export default function withContextMenu(WrappedComponent) {
 								bg: '#ffc',
 							}}
 							isDisabled={isDisabled}
+							style={{
+								userSelect: 'none',
+							}}
+							userSelect="none"
 						>
 							{icon}
 							<Text
@@ -86,6 +96,10 @@ export default function withContextMenu(WrappedComponent) {
 								color={isDisabled ? 'disabled' : 'trueGray.800'}
 								numberOfLines={1}
 								ellipsizeMode="head"
+								style={{
+									userSelect: 'none',
+								}}
+								userSelect="none"
 							>{text}</Text>
 						</Pressable>;
 			});
@@ -96,6 +110,7 @@ export default function withContextMenu(WrappedComponent) {
 													flex={1}
 													py={2}
 													px={4}
+													userSelect="none"
 												>id: {selection?.[0]?.id}</Text>);
 			}
 			setContextMenuItemComponents(contextMenuItemComponents);

package/src/Components/Hoc/withEditor.js

@@ -47,10 +47,10 @@ export default function withEditor(WrappedComponent, isTree = false) {
 				hideAlert,
 			} = props,
 			listeners = useRef({}),
+			editorStateRef = useRef(),
 			[currentRecord, setCurrentRecord] = useState(null),
 			[isEditorShown, setIsEditorShown] = useState(false),
 			[isEditorViewOnly, setIsEditorViewOnly] = useState(false),
-			[isModalShown, setIsModalShown] = useState(false),
 			[lastSelection, setLastSelection] = useState(),
 			getListeners = () => {
 				return listeners.current;
@@ -115,7 +115,7 @@ export default function withEditor(WrappedComponent, isTree = false) {
 				setEditorMode(EDITOR_MODE__EDIT);
 				setIsEditorShown(true);
 			},
-			onDelete = async () => {
+			onDelete = async (cb) => {
 				if (getListeners().onBeforeDelete) {
 					const listenerResult = await getListeners().onBeforeDelete();
 					if (listenerResult === false) {
@@ -126,7 +126,7 @@ export default function withEditor(WrappedComponent, isTree = false) {
 					isSingle = selection.length === 1,
 					firstSelection = selection[0],
 					isTree = firstSelection?.isTree,
-					hasChildren = firstSelection?.hasChildren,
+					hasChildren = isTree ? firstSelection?.hasChildren : false,
 					isPhantom = firstSelection?.isPhantom;
 
 				if (isSingle && isTree && hasChildren) {
@@ -135,10 +135,10 @@ export default function withEditor(WrappedComponent, isTree = false) {
 						message: 'The node you have selected for deletion has children. ' + 
 								'Should these children be moved up to this node\'s parent, or be deleted?',
 						buttons: [
-							<Button colorScheme="danger" onPress={onMoveChildren} key="moveBtn">
+							<Button colorScheme="danger" onPress={() => onMoveChildren(cb)} key="moveBtn">
 								Move Children
 							</Button>,
-							<Button colorScheme="danger" onPress={onDeleteChildren} key="deleteBtn">
+							<Button colorScheme="danger" onPress={() => onDeleteChildren(cb)} key="deleteBtn">
 								Delete Children
 							</Button>
 						],
@@ -146,21 +146,21 @@ export default function withEditor(WrappedComponent, isTree = false) {
 					});
 				} else
 				if (isSingle && isPhantom) {
-					deleteRecord();
+					deleteRecord(cb);
 				} else {
 					const identifier = getRecordIdentifier(selection);
-					confirm('Are you sure you want to delete the ' + identifier, deleteRecord);
+					confirm('Are you sure you want to delete the ' + identifier, () => deleteRecord(cb));
 				}
 			},
-			onMoveChildren = () => {
+			onMoveChildren = (cb) => {
 				hideAlert();
-				deleteRecord(true);
+				deleteRecord(true, cb);
 			},
-			onDeleteChildren = () => {
+			onDeleteChildren = (cb) => {
 				hideAlert();
-				deleteRecord();
+				deleteRecord(false, cb);
 			},
-			deleteRecord = async (moveSubtreeUp) => {
+			deleteRecord = async (moveSubtreeUp, cb) => {
 				if (getListeners().onBeforeDeleteSave) {
 					await getListeners().onBeforeDeleteSave(selection);
 				}
@@ -172,6 +172,9 @@ export default function withEditor(WrappedComponent, isTree = false) {
 				if (getListeners().onAfterDelete) {
 					await getListeners().onAfterDelete(selection);
 				}
+				if (cb) {
+					cb();
+				}
 			},
 			viewRecord = async () => {
 				if (!userCanView) {
@@ -237,31 +240,32 @@ export default function withEditor(WrappedComponent, isTree = false) {
 					await getListeners().onAfterEdit(what);
 				}
 			},
-			onEditorCancel = async () => {
-				const
-					isSingle = selection.length === 1,
-					isPhantom = selection[0] && selection[0].isPhantom;
-				if (isSingle && isPhantom) {
-					await deleteRecord();
+			onEditorCancel =  () => {
+				async function doIt() {
+					const
+						isSingle = selection.length === 1,
+						isPhantom = selection[0] && selection[0].isPhantom;
+					if (isSingle && isPhantom) {
+						await deleteRecord();
+					}
+					setEditorMode(EDITOR_MODE__VIEW);
+					setIsEditorShown(false);
+				}
+				const formState = editorStateRef.current;
+				if (!_.isEmpty(formState.dirtyFields)) {
+					confirm('This record has unsaved changes. Are you sure you want to cancel editing? Changes will be lost.', doIt);
+				} else {
+					doIt();
 				}
-				setEditorMode(EDITOR_MODE__VIEW);
-				setIsEditorShown(false);
 			},
 			onEditorClose = () => {
 				setIsEditorShown(false);
 			},
 			onEditorDelete = async () => {
-				if (getListeners().onBeforeDeleteSave) {
-					await getListeners().onBeforeDeleteSave(selection);
-				}
-
-				await deleteRecord();
-				setEditorMode(EDITOR_MODE__VIEW);
-				setIsEditorShown(false);
-				
-				if (getListeners().onAfterDelete) {
-					await getListeners().onAfterDelete(selection);
-				}
+				onDelete(() => {
+					setEditorMode(EDITOR_MODE__VIEW);
+					setIsEditorShown(false);
+				});
 			},
 			calculateEditorMode = () => {
 				let mode = EDITOR_MODE__VIEW;
@@ -279,6 +283,20 @@ export default function withEditor(WrappedComponent, isTree = false) {
 					}
 				}
 				return mode;
+			},
+			onEditMode = () => {
+				setEditorMode(EDITOR_MODE__EDIT);
+			},
+			onViewMode = () => {
+				function doIt() {
+					setEditorMode(EDITOR_MODE__VIEW);
+				}
+				const formState = editorStateRef.current;
+				if (!_.isEmpty(formState.dirtyFields)) {
+					confirm('This record has unsaved changes. Are you sure you want to switch to "View" mode? Changes will be lost.', doIt);
+				} else {
+					doIt();
+				}
 			};
 
 		useEffect(() => {
@@ -301,7 +319,9 @@ export default function withEditor(WrappedComponent, isTree = false) {
 					isEditorShown={isEditorShown}
 					isEditorViewOnly={isEditorViewOnly}
 					editorMode={editorMode}
-					setEditorMode={setEditorMode}
+					onEditMode={onEditMode}
+					onViewMode={onViewMode}
+					editorStateRef={editorStateRef}
 					setIsEditorShown={setIsEditorShown}
 					onAdd={(!userCanEdit || disableAdd) ? null : onAdd}
 					onEdit={(!userCanEdit || disableEdit) ? null : onEdit}

package/src/Components/Hoc/withInlineEditor.js

@@ -1,5 +1,6 @@
 import React, { useState, useEffect, useRef, } from 'react';
 import {
+	Box,
 	Column,
 	Modal,
 	Row,
@@ -28,6 +29,7 @@ export default function withInlineEditor(WrappedComponent) {
 				onEditorCancel,
 				onEditorSave,
 				onEditorClose,
+				editorStateRef,
 
 				// withSelection
 				selection,
@@ -36,6 +38,7 @@ export default function withInlineEditor(WrappedComponent) {
 				Repository,
 			} = props,
 			styles = UiGlobals.styles,
+			maskRef = useRef(),
 			inlineEditorRef = useRef(),
 			[localColumnsConfig, setLocalColumnsConfig] = useState([]),
 			[currentRow, setCurrentRow] = useState(),
@@ -56,35 +59,52 @@ export default function withInlineEditor(WrappedComponent) {
 			},
 			moveEditor = (currentRow) => {
 				const 
-					bounds = currentRow.getBoundingClientRect(),
-					r = inlineEditorRef.current.style;
-				r.top = bounds.top -8 + 'px';
-				r.left = bounds.left + 'px';
-				r.width = bounds.width + 'px';
+					rowBounds = currentRow.getBoundingClientRect(),
+					editor = inlineEditorRef.current,
+					editorStyle = editor.style,
+					editorBounds = editor.parentElement.getBoundingClientRect(), // reference parentElement, because this doesn't change based on last moveEditor call
+					delta = editorBounds.top - rowBounds.top;
+
+				editorStyle.top = (-1 * delta) -20 + 'px';
 			};
 
+		if (isEditorShown && selection.length < 1) {
+			throw new Error('Lost the selection!');
+		}
 		if (isEditorShown && selection.length !== 1) {
 			throw new Error('Can only edit one at a time with inline editor!');
 		}
 		if (UiGlobals.mode === UI_MODE_REACT_NATIVE) {
 			throw new Error('Not yet implemented for RN.');
 		}
-	
-		return <>
-					<WrappedComponent
-						{...props}
-						inlineEditorRef={inlineEditorRef}
-						onChangeColumnsConfig={onChangeColumnsConfig}
-						onEditorRowClick={onRowClick}
-					/>
-					{useEditor && editorType === EDITOR_TYPE__INLINE && Repository && 
-							<Modal
-								isOpen={isEditorShown}
-								onClose={() => setIsEditorShown(false)}
-							>
-								<Column position="absolute" ref={inlineEditorRef}>
+
+		let inlineEditor = null;
+		if (useEditor && Repository) {
+			inlineEditor = <>
+								{isEditorShown && <Box
+													ref={maskRef}
+													position="fixed"
+													w="100vw"
+													h="100vh"
+													top="0"
+													left="0"
+													bg="#000"
+													opacity={0.35}
+													zIndex={0}
+													onClick={(e) => {
+														e.preventDefault();
+														e.stopPropagation();
+														onEditorCancel();
+													}}
+												></Box>}
+								<Column
+									ref={inlineEditorRef}
+									position="absolute"
+									zIndex={10}
+								>
 									{isEditorShown && <Form
-															editorType={EDITOR_TYPE__INLINE} 
+															editorType={EDITOR_TYPE__INLINE}
+															editorStateRef={editorStateRef}
 															record={selection[0]}
 															Repository={Repository}
 															isMultiple={selection.length > 1}
@@ -113,7 +133,15 @@ export default function withInlineEditor(WrappedComponent) {
 															px={0}
 														/>}
 								</Column>
-							</Modal>}
-				</>;
+							</>;
+		}
+	
+		return <WrappedComponent
+					{...props}
+					onChangeColumnsConfig={onChangeColumnsConfig}
+					onEditorRowClick={onRowClick}
+					inlineEditor={inlineEditor}
+					isInlineEditorShown={isEditorShown}
+				/>;
 	});
 }

package/src/Components/Hoc/withPresetButtons.js

@@ -24,6 +24,12 @@ const presetButtons = [
 
 export default function withPresetButtons(WrappedComponent, isGrid = false) {
 	return (props) => {
+
+		if (props.disablePresetButtons) {
+			// bypass everything
+			return <WrappedComponent {...props} />;
+		}
+
 		const {
 				// extract and pass
 				contextMenuItems,

package/src/Components/index.js

@@ -13,7 +13,7 @@ import BooleanCombo from './Form/Field/Combo/BooleanCombo.js';
 import CheckboxGroup from './Form/Field/CheckboxGroup/CheckboxGroup.js';
 import Color from './Form/Field/Color.js';
 import Combo from './Form/Field/Combo/Combo.js';
-// import ComboEditor from '../Components/Form/Field/Combo/ComboEditor.js';
+// import { ComboEditor } from '../Components/Form/Field/Combo/Combo.js';
 import Container from './Container/Container.js';
 import DataMgt from './Screens/DataMgt.js';
 import Date from './Form/Field/Date.js';

package/src/Constants/Styles.js

@@ -67,6 +67,7 @@ const defaults = {
 	ICON_BUTTON_BG_DISABLED: 'trueGray.200',
 	ICON_BUTTON_BG_HOVER: '#000:alpha.20',
 	ICON_BUTTON_BG_PRESSED: '#000:alpha.30',
+	INLINE_EDITOR_MIN_WIDTH: 150,
 	PANEL_FOOTER_BG: 'primary.100', // :alpha.50
 	PANEL_HEADER_BG: 'primary.100',
 	PANEL_HEADER_BG_VERTICAL: 'primary.100',

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

@@ -1,22 +0,0 @@
-import withAlert from '../../../Hoc/withAlert.js';
-import withData from '../../../Hoc/withData.js';
-import withPresetButtons from '../../../Hoc/withPresetButtons.js';
-import withSelection from '../../../Hoc/withSelection.js';
-import withValue from '../../../Hoc/withValue.js';
-import withWindowedEditor from '../../../Hoc/withWindowedEditor.js';
-import { Combo } from './Combo.js';
-
-export default
-				// withAlert(
-					withData(
-						withValue(
-							withSelection(
-								withWindowedEditor(
-									withPresetButtons(
-										Combo
-									)
-								)
-							)
-						)
-					);
-				//);