@onehat/ui 0.4.106 → 0.4.107

package/package.json

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

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

@@ -450,6 +450,8 @@ const GridRow = forwardRef((props, ref) => {
 									)}
 								/>}
 						</>;
+		const hasCustomBgClass = rowProps?.className && /\bbg-/.test(rowProps.className);
+
 		if (dropTargetRef) {
 			rowContents = <HStack
 								ref={dropTargetRef}
@@ -459,9 +461,7 @@ const GridRow = forwardRef((props, ref) => {
 									'flex-1',
 									'grow-1',
 								)}
-								style={{
-									backgroundColor: bg,
-								}}
+								style={hasCustomBgClass ? undefined : { backgroundColor: bg }}
 							>{rowContents}</HStack>;
 		}
 
@@ -485,9 +485,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

@@ -149,7 +149,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 +216,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();
@@ -680,8 +680,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 +834,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;

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,
+					isEditable: false, // hack to force all checkboxes to use same render branch in Form
+				};
 			},
 			buildValidator = () => {
 				const propertyValidatorDefs = {};

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>