@onehat/ui 0.4.106 → 0.4.108

package/package.json

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

package/src/Components/Container/Container.js

@@ -424,6 +424,8 @@ function Container(props) {
 
 	componentProps._panel.isCollapsible = false;
 	componentProps._panel.isDisabled = isDisabled || isComponentsDisabled;
+	componentProps.isCollapsible = false;
+	componentProps.isDisabled = isDisabled || isComponentsDisabled;
 	componentProps.onLayout = debouncedOnLayout;
 	centerComponent = cloneElement(center, componentProps);
 	if (north) {
@@ -432,9 +434,11 @@ function Container(props) {
 		
 		componentProps._panel.isDisabled = isDisabled || isComponentsDisabled;
 		componentProps._panel.className = 'h-full w-full ' + (north.props.className || '');
+		componentProps.isDisabled = !!north.props?.isDisabled || isDisabled || isComponentsDisabled;
+		componentProps.className = 'h-full w-full ' + (north.props.className || '');
 		wrapperProps.onLayout = (e) => {
 			const height = parseFloat(e.nativeEvent.layout.height);
-			if (height && height !== northHeight) {
+			if (height && height !== getNorthHeight()) {
 				setNorthHeight(height);
 			}
 		};
@@ -453,6 +457,9 @@ function Container(props) {
 		componentProps._panel.collapseDirection = VERTICAL;
 		componentProps._panel.isCollapsed = getNorthIsCollapsed();
 		componentProps._panel.setIsCollapsed = setNorthIsCollapsed;
+		componentProps.collapseDirection = VERTICAL;
+		componentProps.isCollapsed = getNorthIsCollapsed();
+		componentProps.setIsCollapsed = setNorthIsCollapsed;
 		if (isWeb && northIsResizable) {
 			northSplitter = <Splitter
 								mode={VERTICAL}
@@ -470,6 +477,8 @@ function Container(props) {
 		
 		componentProps._panel.isDisabled = isDisabled || isComponentsDisabled;
 		componentProps._panel.className = 'h-full w-full ' + (south.props.className || '');
+		componentProps.isDisabled = !!south.props?.isDisabled || isDisabled || isComponentsDisabled;
+		componentProps.className = 'h-full w-full ' + (south.props.className || '');
 		wrapperProps.onLayout = (e) => {
 			const height = parseFloat(e.nativeEvent.layout.height);
 			if (height && height !== getSouthHeight()) {
@@ -491,6 +500,9 @@ function Container(props) {
 		componentProps._panel.collapseDirection = VERTICAL;
 		componentProps._panel.isCollapsed = getSouthIsCollapsed();
 		componentProps._panel.setIsCollapsed = setSouthIsCollapsed;
+		componentProps.collapseDirection = VERTICAL;
+		componentProps.isCollapsed = getSouthIsCollapsed();
+		componentProps.setIsCollapsed = setSouthIsCollapsed;
 		if (isWeb && southIsResizable) {
 			southSplitter = <Splitter
 								mode={VERTICAL}
@@ -508,6 +520,8 @@ function Container(props) {
 		
 		componentProps._panel.isDisabled = isDisabled || isComponentsDisabled;
 		componentProps._panel.className = 'h-full w-full ' + (east.props.className || '');
+		componentProps.isDisabled = !!east.props?.isDisabled || isDisabled || isComponentsDisabled;
+		componentProps.className = 'h-full w-full ' + (east.props.className || '');
 		wrapperProps.onLayout = (e) => {
 			const width = parseFloat(e.nativeEvent.layout.width);
 			if (width && width !== getEastWidth()) {
@@ -529,6 +543,9 @@ function Container(props) {
 		componentProps._panel.collapseDirection = HORIZONTAL;
 		componentProps._panel.isCollapsed = getEastIsCollapsed();
 		componentProps._panel.setIsCollapsed = setEastIsCollapsed;
+		componentProps.collapseDirection = HORIZONTAL;
+		componentProps.isCollapsed = getEastIsCollapsed();
+		componentProps.setIsCollapsed = setEastIsCollapsed;
 		if (isWeb && eastIsResizable) {
 			eastSplitter = <Splitter
 								mode={HORIZONTAL}
@@ -546,6 +563,8 @@ function Container(props) {
 		
 		componentProps._panel.isDisabled = isDisabled || isComponentsDisabled;
 		componentProps._panel.className = 'h-full w-full ' + (west.props.className || '');
+		componentProps.isDisabled = !!west.props?.isDisabled || isDisabled || isComponentsDisabled;
+		componentProps.className = 'h-full w-full ' + (west.props.className || '');
 		wrapperProps.onLayout = (e) => {
 			const width = parseFloat(e.nativeEvent.layout.width);
 			if (width && width !== getWestWidth()) {
@@ -567,6 +586,9 @@ function Container(props) {
 		componentProps._panel.collapseDirection = HORIZONTAL;
 		componentProps._panel.isCollapsed = getWestIsCollapsed();
 		componentProps._panel.setIsCollapsed = setWestIsCollapsed;
+		componentProps.collapseDirection = HORIZONTAL;
+		componentProps.isCollapsed = getWestIsCollapsed();
+		componentProps.setIsCollapsed = setWestIsCollapsed;
 		if (isWeb && westIsResizable) {
 			westSplitter = <Splitter
 								mode={HORIZONTAL}

package/src/Components/Editor/Editor.js

@@ -46,10 +46,11 @@ function Editor(props) {
 	if (canRecordBeEdited && !canRecordBeEdited(selection)) {
 		canEdit = false;
 	}
+	const record = selection[0];
+	self.record = record; // make it so we can target the record from within a Viewer or Form
 	
 	// Repository?.isRemotePhantomMode && selection.length === 1 && 
 	if (getEditorMode() === EDITOR_MODE__VIEW || isEditorViewOnly || !canEdit) {
-		const record = selection[0];
 		if (record.isDestroyed) {
 			return null;
 		}

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

@@ -1223,6 +1223,25 @@ export const ComboComponent = forwardRef((props, ref) => {
 	}
 	
 	if (isViewerShown && Editor) {
+		let modalBackdrop = <ModalBackdrop className="Combo-viewer-ModalBackdrop" />;
+		if (CURRENT_MODE === UI_MODE_NATIVE) {
+			// Gluestack's ModalBackdrop was not working on Native,
+			// so workaround is to do it manually for now
+			modalBackdrop = <Pressable
+								onPress={onViewerClose}
+								className={clsx(
+									'Combo-viewer-ModalBackdrop-replacment',
+									'h-full',
+									'w-full',
+									'absolute',
+									'top-0',
+									'left-0',
+									'bg-[#000]',
+									'opacity-50',
+								)}
+							/>;
+		}
+
 		const propsForViewer = _.pick(props, [
 			'disableCopy',
 			'disableDuplicate',
@@ -1246,6 +1265,7 @@ export const ComboComponent = forwardRef((props, ref) => {
 						isOpen={true}
 						onClose={onViewerClose}
 					>
+						{modalBackdrop}
 						<Editor
 							editorType={EDITOR_TYPE__WINDOWED}
 							isEditorViewOnly={true}

package/src/Components/Form/Form.js

@@ -240,6 +240,7 @@ function Form(props) {
 			resolver: yupResolver(validatorToUse),
 			context: { isPhantom },
 		}),
+		currentEditorMode = getEditorMode(),
 		buildFromColumnsConfig = () => {
 			// Only used in InlineEditor
 			// Build the fields that match the current columnsConfig in the grid
@@ -1045,7 +1046,7 @@ function Form(props) {
 											)}
 										>{title}</Text>;
 						if (icon) {
-							titleElement = <HStack className="items-center"><Icon as={icon} className="w-[32px] h-[32px] mr-2" />{titleElement}</HStack>
+							titleElement = <HStack className="items-center mb-1"><Icon as={icon} className="w-[32px] h-[32px] mr-2" />{titleElement}</HStack>
 						}
 					}
 					if (description) {
@@ -1149,6 +1150,29 @@ function Form(props) {
 		}
 	}, [record]);
 
+	useEffect(() => {
+		if (skipAll) {
+			return;
+		}
+		if (currentEditorMode !== EDITOR_MODE__ADD) {
+			return;
+		}
+		if (!containerWidth) {
+			// Wait until fields are mounted; before this, isValid can be false with empty errors.
+			return;
+		}
+
+		// In some flows the editor mode flips to ADD after the record effect runs.
+		// Validate again so the Add button is enabled immediately when form is valid.
+		const timeoutId = setTimeout(() => {
+			trigger();
+		}, 0);
+
+		return () => {
+			clearTimeout(timeoutId);
+		};
+	}, [record, currentEditorMode, containerWidth, trigger]);
+
 	useEffect(() => {
 		if (skipAll) {
 			return;
@@ -1249,7 +1273,8 @@ function Form(props) {
 		showCloseBtn = false,
 		showCancelBtn = false,
 		showSaveBtn = false,
-		showSubmitBtn = false;
+		showSubmitBtn = false,
+		isAddMode = getEditorMode() === EDITOR_MODE__ADD;
 	if (containerWidth) { // we need to render this component twice in order to get the container width. Skip this on first render
 
 		// create editor
@@ -1332,7 +1357,7 @@ function Form(props) {
 			isSaveDisabled = true;
 			isSubmitDisabled = true;
 		}
-		if (_.isEmpty(formState.dirtyFields) && !isPhantom) {
+		if (_.isEmpty(formState.dirtyFields) && !isPhantom && !isAddMode) {
 			isSaveDisabled = true;
 		}
 		if (onDelete && getEditorMode() === EDITOR_MODE__EDIT && isSingle) {

package/src/Components/Grid/Grid.js

@@ -430,7 +430,7 @@ function GridComponent(props) {
 				return processedConfig;
 			});
 			const items = _.map(processedButtons, (config, ix) => getIconButtonFromConfig(config, ix, self));
-			if (canRowsReorder && CURRENT_MODE === UI_MODE_WEB) { // DND is currently web-only  TODO: implement for RN
+			if (canRowsReorder && CURRENT_MODE === UI_MODE_WEB && onEdit && (!canUser || canUser(EDIT)) && !isEditorViewOnly) { // DND is currently web-only  TODO: implement for RN
 				items.unshift(<IconButton
 					{...testProps('reorderBtn')}
 					key="reorderBtn"

package/src/Components/Grid/GridRow.js

@@ -375,9 +375,11 @@ const GridRow = forwardRef((props, ref) => {
 					// TODO: incorporate better scrollbar formatting with
 					// tailwind plugin 'tailwind-scrollbar' (already installed, just not yet used here)
 
+					const isEmptyCellValue = _.isNil(value) || value === '';
+
 					let textClassName = clsx(
 						'GridRow-TextNative',
-						'self-center',
+						isEmptyCellValue ? 'self-stretch' : 'self-center', // if the cell value is empty, stretch the cell to be full height
 						areCellsScrollable ? 'overflow-auto' : 'overflow-hidden',
 						'[&::-webkit-scrollbar]:h-2',
 						'[&::-webkit-scrollbar-thumb]:bg-gray-300',
@@ -386,6 +388,14 @@ const GridRow = forwardRef((props, ref) => {
 						styles.GRID_CELL_CLASSNAME,
 						styles.GRID_ROW_MAX_HEIGHT_EXTRA,
 					);
+					const textStyle = {
+						// userSelect: 'none',
+						...colStyle,
+						...(isEmptyCellValue ? { // if the cell value is empty, stretch the cell to be full height
+							height: '100%',
+							display: 'block',
+						} : {}),
+					};
 					if (rowProps?._cell?.className) {
 						textClassName += ' ' + rowProps._cell.className;
 					}
@@ -395,16 +405,13 @@ const GridRow = forwardRef((props, ref) => {
 					return <TextNative
 								{...testProps('cell-' + config.fieldName)}
 								key={key}
-								style={{
-									// userSelect: 'none',
-									...colStyle,
-								}}
+								style={textStyle}
 								numberOfLines={1}
 								ellipsizeMode="head"
 								className={textClassName}
 								{...elementProps}
 								{...propsToPass}
-							>{value}</TextNative>;
+							>{isEmptyCellValue ? ' ' : value}</TextNative>;
 				});
 			} else {
 				// TODO: if 'columnsConfig' is an object, parse its contents
@@ -450,6 +457,8 @@ const GridRow = forwardRef((props, ref) => {
 									)}
 								/>}
 						</>;
+		const hasCustomBgClass = rowProps?.className && /\bbg-/.test(rowProps.className);
+
 		if (dropTargetRef) {
 			rowContents = <HStack
 								ref={dropTargetRef}
@@ -459,9 +468,7 @@ const GridRow = forwardRef((props, ref) => {
 									'flex-1',
 									'grow-1',
 								)}
-								style={{
-									backgroundColor: bg,
-								}}
+								style={hasCustomBgClass ? undefined : { backgroundColor: bg }}
 							>{rowContents}</HStack>;
 		}
 
@@ -485,9 +492,7 @@ const GridRow = forwardRef((props, ref) => {
 						{...rowProps}
 						key={hash}
 						className={rowClassName}
-						style={{
-							backgroundColor: bg,
-						}}
+						style={hasCustomBgClass ? undefined : { backgroundColor: bg }}
 					>{rowContents}</HStackNative>;
 		if (rowProps.tooltip) {
 			row = <Tooltip

package/src/Components/Hoc/withEditor.js

@@ -36,6 +36,7 @@ export default function withEditor(WrappedComponent, isTree = false) {
 				disableAdd = false,
 				disableEdit = false,
 				disableDelete = false,
+				enableMultiDelete = false, // deleting multiple records at once is opt-in only
 				disableDuplicate = false,
 				disableView = false,
 				useRemoteDuplicate = false, // call specific copyToNew function on server, rather than simple duplicate on client
@@ -149,7 +150,7 @@ export default function withEditor(WrappedComponent, isTree = false) {
 					selection = getSelection();
 				if (!_.isEmpty(formState?.dirtyFields) && newSelection !== selection && getEditorMode() === EDITOR_MODE__EDIT) {
 					confirm('This record has unsaved changes. Are you sure you want to cancel editing? Changes will be lost.', doIt);
-				} else if (selection && selection[0] && !selection[0].isDestroyed && (selection[0]?.isPhantom || selection[0]?.isRemotePhantom)) {
+				} else if (selection && selection[0] && !selection[0].isDestroyed && selection[0].isPhantom) {
 					confirm('This new record is unsaved. Are you sure you want to cancel editing? Changes will be lost.', async () => {
 						await selection[0].delete();
 						doIt();
@@ -216,7 +217,7 @@ export default function withEditor(WrappedComponent, isTree = false) {
 				if (!record || record.isDestroyed) {
 					return false;
 				}
-				return !!(record.isPhantom || record.isRemotePhantom);
+				return !!record.isPhantom;
 			},
 			getIsEditorDisabledByParent = () => {
 				return getIsParentSaveLocked();
@@ -441,7 +442,14 @@ export default function withEditor(WrappedComponent, isTree = false) {
 					cb = args;
 				}
 				const selection = getSelection();
-				if (_.isEmpty(selection) || (_.isArray(selection) && (selection.length > 1 || selection[0]?.isDestroyed))) {
+				const hasTreeSelection = isTree || _.some(selection, (selected) => !!selected?.isTree);
+				if (
+					_.isEmpty(selection) ||
+					(_.isArray(selection) && (
+						selection[0]?.isDestroyed ||
+						(selection.length > 1 && (!enableMultiDelete || hasTreeSelection))
+					))
+				) {
 					return;
 				}
 				if (onBeforeDelete) {
@@ -461,11 +469,11 @@ export default function withEditor(WrappedComponent, isTree = false) {
 				const
 					isSingle = selection.length === 1,
 					firstSelection = selection[0],
-					isTree = firstSelection?.isTree,
-					hasChildren = isTree ? firstSelection?.hasChildren : false,
+					isTreeNode = firstSelection?.isTree,
+					hasChildren = isTreeNode ? firstSelection?.hasChildren : false,
 					isPhantom = firstSelection?.isPhantom;
 
-				if (isSingle && isTree && hasChildren) {
+				if (isSingle && isTreeNode && hasChildren) {
 					alert({
 						title: 'Move up children?',
 						message: 'The node you have selected for deletion has children. ' + 
@@ -680,8 +688,8 @@ export default function withEditor(WrappedComponent, isTree = false) {
 					// just update this one entity
 					selection[0].setValues(data);
 
-					// If this is a remote phantom, and nothing is dirty, stage it so it actually gets saved to server and solidified
-					if (selection[0].isRemotePhantom && !selection[0].isDirty) {
+					// In ADD mode, if record is phantom and nothing is dirty, stage it so save() still submits and solidifies.
+					if (getEditorMode() === EDITOR_MODE__ADD && selection[0].isPhantom && !selection[0].isDirty) {
 						selection[0].markStaged();
 						useStaged = true;
 					}
@@ -834,7 +842,7 @@ export default function withEditor(WrappedComponent, isTree = false) {
 					if (canRecordBeEdited && canRecordBeEdited(selection) === false) {
 						return EDITOR_MODE__VIEW;
 					}
-					if (selection.length === 1 && !selection[0].isDestroyed && (selection[0].isPhantom || selection[0].isRemotePhantom) && !disableAdd) {
+					if (selection.length === 1 && !selection[0].isDestroyed && selection[0].isPhantom && !disableAdd) {
 						return EDITOR_MODE__ADD;
 					}
 					return selection.length ? EDITOR_MODE__EDIT : EDITOR_MODE__VIEW;
@@ -1022,6 +1030,7 @@ export default function withEditor(WrappedComponent, isTree = false) {
 					isEditor={true}
 					userCanEdit={userCanEdit}
 					userCanView={userCanView}
+					enableMultiDelete={enableMultiDelete}
 					disableAdd={disableAdd || isEditorDisabledByParent || isCrudBlockedByInheritedView}
 					disableEdit={disableEdit || isEditorDisabledByParent || isCrudBlockedByInheritedView}
 					disableDelete={disableDelete || isEditorDisabledByParent || isCrudBlockedByInheritedView}

package/src/Components/Hoc/withFilters.js

@@ -97,7 +97,7 @@ export default function withFilters(WrappedComponent) {
 					
 					let title, type;
 					if (propertyDef) {
-						title = propertyDef.title;
+						title = propertyDef.filterTitle || propertyDef.title;
 						type = propertyDef.filterType;
 					} else if (modelAncillaryFilters[field]) {
 						const ancillaryFilter = modelFilterTypes[field];
@@ -262,7 +262,7 @@ export default function withFilters(WrappedComponent) {
 						
 					if (!title) {
 						const propertyDef = Repository.getSchema().getPropertyDefinition(field);
-						title = propertyDef?.title;
+						title = propertyDef?.filterTitle || propertyDef?.title;
 					}
 
 					if (_.isString(filterType)) {
@@ -398,7 +398,10 @@ export default function withFilters(WrappedComponent) {
 
 						// basic property filter
 						const propertyDef = Repository.getSchema().getPropertyDefinition(filterField);
-						data.push([ filterField, propertyDef?.title ]);
+						if (propertyDef?.isFilteringDisabled) {
+							return;
+						}
+						data.push([ filterField, propertyDef?.filterTitle || propertyDef?.title ]);
 					});
 
 					// sort by title

package/src/Components/Hoc/withPdfButtons.js

@@ -33,7 +33,9 @@ export default function withPdfButtons(WrappedComponent) {
 				additionalEditButtons = [],
 				additionalViewButtons = [],
 				items = [],
+				pdfItems,
 				ancillaryItems = [],
+				pdfAncillaryItems,
 				columnDefaults = {},
 
 				// withComponent
@@ -58,32 +60,15 @@ export default function withPdfButtons(WrappedComponent) {
 			styles = UiGlobals.styles,
 			propertyNames = [],
 			buildModalItems = () => {
-				const modalItems = _.map(_.cloneDeep(items), (item, ix) => buildNextLayer(item, ix, columnDefaults)); // clone, as we don't want to alter the item by reference
-
-				// remove additionalEditButtons from the modal
-				function walkTreeToDeleteAdditionalEditButtons(item) {
-					if (!item) {
-						return;
-					}
-
-					let {
-							additionalEditButtons,
-							items,
-						} = item;
-					if (!_.isEmpty(items)) {
-						_.each(items, (item) => {
-							walkTreeToDeleteAdditionalEditButtons(item);
-						});
-					}
-					if (additionalEditButtons) {
-						delete item.additionalEditButtons;
-					}
-				}
-				_.each(modalItems, walkTreeToDeleteAdditionalEditButtons);
+				// Build a cloned PDF item tree so we never mutate source items by reference.
+				const
+					itemsTouse = pdfItems || items,
+					ancillaryItemsToUse = pdfAncillaryItems || ancillaryItems,
+					modalItems = _.compact(_.map(itemsTouse, (item, ix) => buildNextLayer(item, ix, columnDefaults)));
 
-				if (!_.isEmpty(ancillaryItems)) {
+				if (!_.isEmpty(ancillaryItemsToUse)) {
 					const
-						ancillaryItemsClone = _.cloneDeepWith(ancillaryItems, (value) => {
+						ancillaryItemsClone = _.cloneDeepWith(ancillaryItemsToUse, (value) => {
 							// Exclude the 'parent' property from being cloned, as it would introduce an infinitely recursive loop
 							if (value && value.parent) {
 								const { parent, ...rest } = value;
@@ -127,47 +112,75 @@ export default function withPdfButtons(WrappedComponent) {
 				return modalItems;
 			},
 			buildNextLayer = (item, ix, defaults) => {
-				let {
-						type,
-						name,
-						items,
-					} = item;
+				if (!item) {
+					return null;
+				}
+
+				const {
+					type,
+					name,
+					title,
+					items: childItems,
+					isHiddenInViewMode,
+				} = item;
+
 				if (inArray(type, ['Column', 'FieldSet'])) {
-					if (!item.defaults) {
-						item.defaults = {};
+					const nextDefaults = {
+						...(defaults || {}),
+						...(item.defaults || {}),
+						labelWidth: '90%',
+					};
+
+					const nextItem = {
+						type,
+						defaults: nextDefaults,
+					};
+
+					if (title) {
+						nextItem.title = title;
+					}
+					if (item.reference) {
+						nextItem.reference = item.reference;
+					}
+					if (item.flex) {
+						nextItem.flex = item.flex;
 					}
 					if (type === 'FieldSet') {
-						item.showToggleAllCheckbox = true;
-						item.isCollapsible = false;
+						nextItem.showToggleAllCheckbox = true;
+						nextItem.isCollapsible = false;
 					}
-					item.defaults.labelWidth = '90%';
-					if (!_.isEmpty(items)) {
-						const defaults = item.defaults;
-						item.items = _.map(items, (item, ix) => {
-							if (!item){
-								return null;
-							}
-							return buildNextLayer(item, ix, defaults);
-						});
+
+					if (!_.isEmpty(childItems)) {
+						nextItem.items = _.compact(_.map(childItems, (childItem, childIx) => buildNextLayer(childItem, childIx, nextDefaults)));
 					}
-					return item;
+
+					return nextItem;
 				}
 
-				if (item.isHiddenInViewMode || type === 'Button') {
+				if (isHiddenInViewMode || type === 'Button') {
 					return null;
 				}
 
-				if (!item.title) {
+				let resolvedTitle = title;
+				if (!resolvedTitle) {
 					const propertyDef = name && Repository?.getSchema().getPropertyDefinition(name);
 					if (propertyDef?.title) {
-						item.title = propertyDef.title;
+						resolvedTitle = propertyDef.title;
 					}
 				}
 				if (name) {
 					propertyNames.push(name); // for validator
 				}
-				item.type = 'Checkbox';
-				return item;
+				if (!name) {
+					return null;
+				}
+
+				return {
+					type: 'Checkbox',
+					name,
+					title: resolvedTitle,
+					label: resolvedTitle,
+				};
 			},
 			buildValidator = () => {
 				const propertyValidatorDefs = {};
@@ -215,6 +228,7 @@ export default function withPdfButtons(WrappedComponent) {
 								parent={self}
 								reference="chooseFieldsForm"
 								editorType={EDITOR_TYPE__PLAIN}
+								checkIsEditingDisabled={false /* hack so layout looks right */}
 								alert={alert}
 								columnDefaults={{
 									labelWidth: '100px',

package/src/Components/Hoc/withPresetButtons.js

@@ -75,6 +75,7 @@ export default function withPresetButtons(WrappedComponent) {
 				disableAdd = !isEditor,
 				disableEdit = !isEditor,
 				disableDelete = !isEditor,
+				enableMultiDelete = false,
 				disableView = isTree,
 				disableCopy = isTree,
 				disableDuplicate = !isEditor,
@@ -300,7 +301,7 @@ export default function withPresetButtons(WrappedComponent) {
 						icon = Trash;
 						if (isNoSelectorSelected() ||
 							isEmptySelection() ||
-							isMultiSelection() ||
+							(isMultiSelection() && (!enableMultiDelete || isTree)) ||
 							isProtectedValue() ||
 							(canRecordBeDeleted && !canRecordBeDeleted(selection))
 						) {

package/src/Components/Layout/ScreenHeader.js

@@ -22,6 +22,7 @@ function ScreenHeader(props) {
 	const {
 			title,
 			icon,
+			additionalButtons,
 			info,
 			_info = {},
 			useModeIcons = false,
@@ -88,6 +89,7 @@ function ScreenHeader(props) {
 							tooltip="To side editor"
 						/>
 					</>}
+				{additionalButtons}
 				{info && 
 					<IconButton
 						{...testProps('infoBtn')}

package/src/Components/Layout/SetupButton.js

@@ -3,6 +3,7 @@ import {
 	selectIsSetupMode,
 	toggleSetupMode,
 } from '@src/Models/Slices/AppSlice';
+import clsx from 'clsx';
 import Button from '../Buttons/Button';
 import IconButton from '../Buttons/IconButton';
 import Gear from '../Icons/Gear';
@@ -13,19 +14,44 @@ export default function SetupButton(props) {
 		} = props,
 		dispatch = useDispatch(),
 		isSetupMode = useSelector(selectIsSetupMode),
-		onPress = () => dispatch(toggleSetupMode());
+		onPress = () => dispatch(toggleSetupMode()),
+		buttonClassName = clsx(
+			'SetupButton',
+			isSetupMode
+				? 'bg-red-500 data-[hover=true]:bg-red-600 data-[active=true]:bg-red-700'
+				: 'bg-grey-100 data-[hover=true]:bg-grey-900/20 data-[active=true]:bg-grey-900/50',
+		),
+		textClassName = clsx(
+			isSetupMode
+				? 'text-white data-[hover=true]:text-white data-[active=true]:text-white'
+				: 'text-black data-[hover=true]:text-black data-[active=true]:text-black',
+		),
+		iconClassName = clsx(
+			isSetupMode ? 'fill-white' : 'fill-black',
+			isSetupMode ? 'text-white' : 'text-black',
+		);
+
 	return isMinimized ? 
 			<IconButton
 				icon={Gear}
+				_icon={{
+					className: iconClassName,
+				}}
 				onPress={onPress}
 				tooltip="Toggle Setup Mode"
-				className="SetupButton-IconButton"
+				className={buttonClassName}
 			/> : 
 			<Button
 				text={isSetupMode ? 'Exit Setup' : 'Setup'}
 				icon={Gear}
+				_text={{
+					className: textClassName,
+				}}
+				_icon={{
+					className: iconClassName,
+				}}
 				onPress={onPress}
 				tooltip="Toggle Setup Mode"
-				className="SetupButton-Button"
+				className={buttonClassName}
 			/>;
 };

package/src/Components/Viewer/Viewer.js

@@ -51,6 +51,7 @@ function Viewer(props) {
 	const {
 			viewerCanDelete = false,
 			items = [], // Columns, FieldSets, Fields, etc to define the form
+			isItemsCustomLayout = false,
 			ancillaryItems = [], // additional items which are not controllable form elements, but should appear in the form
 			showAncillaryButtons = false,
 			columnDefaults = {}, // defaults for each Column defined in items (above)
@@ -183,7 +184,7 @@ function Viewer(props) {
 				let children;
 				const style = {};
 				if (type === 'Column') {
-					const isEverythingInOneColumn = containerWidth < styles.FORM_ONE_COLUMN_THRESHOLD;
+					const isEverythingInOneColumn = isItemsCustomLayout || containerWidth < styles.FORM_ONE_COLUMN_THRESHOLD;
 					if (itemPropsToPass.hasOwnProperty('flex')) {
 						if (!isEverythingInOneColumn) {
 							style.flex = itemPropsToPass.flex;
@@ -489,7 +490,9 @@ function Viewer(props) {
 	const
 		showDeleteBtn = onDelete && viewerCanDelete,
 		showCloseBtn = !isSideEditor && !isSmartEditor && onClose,
-		showFooter = (showDeleteBtn || showCloseBtn);
+		showFooter = (showDeleteBtn || showCloseBtn),
+		hasTopLevelColumns = _.some(items, (item) => item?.type === 'Column'),
+		shouldUseHorizontalViewerLayout = !isItemsCustomLayout && hasTopLevelColumns && containerWidth >= styles.FORM_ONE_COLUMN_THRESHOLD;
 	let additionalButtons = null,
 		viewerComponents = null,
 		ancillaryComponents = null,
@@ -611,8 +614,8 @@ function Viewer(props) {
 								{buildAdditionalButtons(_.omitBy(getAncillaryButtons(), (btnConfig) => btnConfig.reference === 'scrollToTop'))}
 							</Toolbar>}
 						
-						{containerWidth >= styles.FORM_ONE_COLUMN_THRESHOLD ? <HStack className="Viewer-formComponents-HStack p-4 gap-4 justify-center">{viewerComponents}</HStack> : null}
-						{containerWidth < styles.FORM_ONE_COLUMN_THRESHOLD ? <VStack className="Viewer-formComponents-VStack p-4">{viewerComponents}</VStack> : null}
+						{shouldUseHorizontalViewerLayout ? <HStack className="Viewer-formComponents-HStack p-4 gap-4 justify-center">{viewerComponents}</HStack> : null}
+						{!shouldUseHorizontalViewerLayout ? <VStack className="Viewer-formComponents-VStack p-4">{viewerComponents}</VStack> : null}
 						<VStack className="Viewer-AncillaryComponents m-2 pt-4 px-2">{ancillaryComponents}</VStack>
 					</ScrollView>