@onehat/ui 0.4.103 → 0.4.105

package/.github/copilot-instructions.md.bak.20260307094051

@@ -0,0 +1,65 @@
+# Copilot Instructions
+
+## General Principles
+- Be direct, concise, and critical. Do not apologize, agree blindly, be sycophantic, or use flattery.
+- If a request is inefficient or flawed, point it out and suggest a better, more secure, or more idiomatic approach.
+- Use "Uncle Bob's Clean Code" principles as a baseline for code quality.
+- Prioritize clarity over cleverness.
+- Avoid unnecessary abstractions.
+- Prefer explicit code over magic.
+- Follow the project's existing coding style and conventions.
+- Do not introduce new dependencies unless absolutely necessary.
+- Always consider security implications and best practices.
+- Aim for full test coverage of new code, and suggest tests for existing code when appropriate.
+
+<!-- ## Coding Standards
+
+### Naming
+- Use descriptive variable and function names.
+- Do not abbreviate unless universally understood.
+- Use camelCase for JavaScript variables and functions.
+- Use PascalCase for React components.
+- Use snake_case for database columns.
+
+### Comments
+- Do not write obvious comments.
+- Only comment non-obvious business logic.
+- Prefer self-documenting code.
+
+## Error Handling
+- Always handle errors explicitly.
+- Do not swallow exceptions.
+- Return meaningful error messages.
+
+## Security
+- Never expose secrets or API keys.
+- Validate and sanitize all user input.
+- Use prepared statements for database queries.
+
+## Project-Specific Notes
+
+### Backend (PHP / CakePHP)
+- Follow PSR-12 formatting.
+- Use dependency injection where appropriate.
+- Do not use deprecated framework methods.
+- Prefer modern APIs over legacy helpers.
+
+### Frontend (React / Expo)
+- Use functional components only.
+- Prefer hooks over class components.
+- Avoid inline styles unless necessary.
+- Keep components under 200 lines.
+
+## Testing
+- Suggest unit tests for new logic.
+- Mock external dependencies.
+- Keep tests deterministic.
+
+## Performance
+- Avoid unnecessary loops.
+- Do not perform database queries inside loops.
+- Prefer memoization when appropriate.
+
+## Output Expectations
+- Produce production-ready code.
+- Avoid TODO comments unless necessary. -->

package/package.json

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

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

@@ -90,6 +90,7 @@ export const ComboComponent = forwardRef((props, ref) => {
 			isInTag = false,
 			minimizeForRow = false,
 			reloadOnTrigger = false,
+			loadAfterRender = false,
 			searchHasInitialPercent = false,
 			menuHeight,
 			placeholder,
@@ -585,11 +586,16 @@ export const ComboComponent = forwardRef((props, ref) => {
 		};
 
 	useEffect(() => {
-		// on render, focus the input
 		if (!isRendered) {
 			return () => {};
 		}
+		
+		if (loadAfterRender) {
+			Repository?.reload();
+		}
+		
 		if (autoFocus && !inputRef.current.isFocused()) {
+			// on render, focus the input
 			inputRef.current.focus();
 		}
 
@@ -599,7 +605,7 @@ export const ComboComponent = forwardRef((props, ref) => {
 			}
 		};
 
-	}, [isRendered]);
+	}, [isRendered, loadAfterRender, Repository]);
 
 	useEffect(() => {
 		(async () => {

package/src/Components/Form/Form.js

@@ -139,6 +139,7 @@ function Form(props) {
 			onDelete,
 			editorStateRef,
 			disableView,
+			isEditorModeControlledByParent = false,
 
 			// parent container
 			selectorId,
@@ -253,8 +254,9 @@ function Form(props) {
 					'border-r-grey-200',
 					'px-1',
 					styles.INLINE_EDITOR_MIN_WIDTH,
-				);
-			_.each(columnsConfig, (config, ix) => {
+				),
+				validColumnsConfig = _.filter(columnsConfig, (config) => !!config); // filter out any null/undefined configs
+			_.each(validColumnsConfig, (config, ix) => {
 				let {
 						fieldName,
 						isEditable = false,
@@ -273,7 +275,7 @@ function Form(props) {
 					type,
 					editorTypeProps = {},
 					viewerTypeProps = {};
-				
+			
 				if (isHidden) {
 					return;
 				}
@@ -965,9 +967,11 @@ function Form(props) {
 					/>;
 		},
 		buildAncillary = () => {
-			const components = [];
+			const
+				validAncillaryItems = _.filter(ancillaryItems, (item) => !!item), // filter out any null/undefined items
+				components = [];
 			setAncillaryButtons([]);
-			if (ancillaryItems.length) {
+			if (validAncillaryItems.length) {
 
 				// add the "scroll to top" button
 				getAncillaryButtons().push({
@@ -978,7 +982,7 @@ function Form(props) {
 					tooltip: 'Scroll to top',
 				});
 
-				_.each(ancillaryItems, (item, ix) => {
+				_.each(validAncillaryItems, (item, ix) => {
 					let {
 							type,
 							title = null,
@@ -1259,7 +1263,7 @@ function Form(props) {
 
 			if (inArray(editorType, [EDITOR_TYPE__SIDE, EDITOR_TYPE__SMART, EDITOR_TYPE__WINDOWED]) && 
 				isSingle && getEditorMode() === EDITOR_MODE__EDIT && 
-				(onBack || onViewMode)) {
+				(onBack || onViewMode || isEditorModeControlledByParent)) {
 				modeHeader = <Toolbar>
 								<HStack className="flex-1 items-center">
 									{onBack &&
@@ -1277,7 +1281,7 @@ function Form(props) {
 											)}
 											text="Back"
 										/>}
-									<Text className="text-[20px] ml-1 text-grey-500">Edit Mode</Text>
+									<Text className="text-[20px] ml-1 text-grey-500">{isEditorModeControlledByParent ? 'Edit Mode (Inherited)' : 'Edit Mode'}</Text>
 								</HStack>
 								{onViewMode && !disableView && (!canUser || canUser(VIEW)) &&
 									<Button

package/src/Components/Grid/Grid.js

@@ -589,6 +589,8 @@ function GridComponent(props) {
 						'flex-row',
 						'grow',
 						'max-h-[80px]',
+						'focus:outline-none', // hide the focus outline
+						'focus-visible:outline-none',
 					)}
 				>
 					{({
@@ -1914,6 +1916,8 @@ function GridComponent(props) {
 		'w-full',
 		'border',
 		'border-grey-300',
+		'focus:outline-none', // hide the focus outline
+		'focus-visible:outline-none',
 	);
 	if (props.className) {
 		className += ' ' + props.className;

package/src/Components/Grid/GridRow.js

@@ -490,7 +490,11 @@ const GridRow = forwardRef((props, ref) => {
 						}}
 					>{rowContents}</HStackNative>;
 		if (rowProps.tooltip) {
-			row = <Tooltip label={rowProps.tooltip} placement="bottom left">{row}</Tooltip>;
+			row = <Tooltip
+						label={rowProps.tooltip}
+						placement="bottom left"
+						triggerClassName={rowClassName}
+					>{row}</Tooltip>;
 		}
 		return row;
 	}, [

package/src/Components/Hoc/Secondary/withSecondaryEditor.js

@@ -47,6 +47,7 @@ export default function withSecondaryEditor(WrappedComponent, isTree = false) {
 				},
 				secondaryEditorType,
 				secondaryOnAdd,
+				secondaryOnBeforeAdd,
 				secondaryOnChange, // any kind of crud change
 				secondaryOnBeforeDelete,
 				secondaryOnDelete,
@@ -201,10 +202,26 @@ export default function withSecondaryEditor(WrappedComponent, isTree = false) {
 				}
 
 				if (getListeners().onBeforeAdd) {
-					const listenerResult = await getListeners().onBeforeAdd();
+					// This listener is set by child components using setWithEditListeners()
+					const listenerResult = await getListeners().onBeforeAdd(addValues);
+					if (listenerResult === false) {
+						return;
+					}
+					if (listenerResult) {
+						// allow the listener to override the addValues by returning an object
+						addValues = listenerResult;
+					}
+				}
+				if (secondaryOnBeforeAdd) {
+					// This listener is set by parent components using a prop
+					const listenerResult = await secondaryOnBeforeAdd(addValues);
 					if (listenerResult === false) {
 						return;
 					}
+					if (listenerResult) {
+						// allow the listener to override the addValues by returning an object
+						addValues = listenerResult;
+					}
 				}
 
 				if (isTree) {

package/src/Components/Hoc/withEditor.js

@@ -1,4 +1,4 @@
-import { forwardRef, useEffect, useState, useRef, } from 'react';
+import { forwardRef, useContext, useEffect, useState, useRef, } from 'react';
 import {
 	ADD,
 	EDIT,
@@ -15,6 +15,7 @@ import {
 } from '../../Constants/Editor.js';
 import useForceUpdate from '../../Hooks/useForceUpdate.js'
 import Button from '../Buttons/Button.js';
+import EditorModeContext from '../../Contexts/EditorModeContext.js';
 import UiGlobals from '../../UiGlobals.js';
 import _ from 'lodash';
 
@@ -47,6 +48,7 @@ export default function withEditor(WrappedComponent, isTree = false) {
 				},
 				editorType,
 				onAdd,
+				onBeforeAdd,
 				onChange, // any kind of crud change
 				onBeforeDelete,
 				onDelete,
@@ -57,6 +59,7 @@ export default function withEditor(WrappedComponent, isTree = false) {
 				defaultValues,
 				initialEditorMode = EDITOR_MODE__VIEW,
 				stayInEditModeOnSelectionChange = false,
+				inheritParentEditorMode = true,
 
 				// withComponent
 				self,
@@ -83,6 +86,7 @@ export default function withEditor(WrappedComponent, isTree = false) {
 				confirm,
 				hideAlert,
 			} = props,
+			parentEditorModeContext = useContext(EditorModeContext),
 			forceUpdate = useForceUpdate(),
 			listeners = useRef({}),
 			editorStateRef = useRef(),
@@ -169,13 +173,85 @@ export default function withEditor(WrappedComponent, isTree = false) {
 					forceUpdate();
 				}
 			},
+			getParentEditorMode = () => {
+				return parentEditorModeContext?.effectiveEditorMode || null;
+			},
+			getInheritedEditorMode = () => {
+				if (!inheritParentEditorMode) {
+					return null;
+				}
+				const parentMode = getParentEditorMode();
+				if (parentMode === EDITOR_MODE__ADD) {
+					return EDITOR_MODE__EDIT;
+				}
+				if (parentMode === EDITOR_MODE__EDIT || parentMode === EDITOR_MODE__VIEW) {
+					return parentMode;
+				}
+				return null;
+			},
+			getIsParentSaveLocked = () => {
+				return !!parentEditorModeContext?.isAnyAncestorUnsaved;
+			},
+			getIsCurrentSelectionUnsaved = () => {
+				const selection = getSelection();
+				if (!selection || selection.length !== 1) {
+					return false;
+				}
+				const record = selection[0];
+				if (!record || record.isDestroyed) {
+					return false;
+				}
+				return !!(record.isPhantom || record.isRemotePhantom);
+			},
+			getIsEditorDisabledByParent = () => {
+				return getIsParentSaveLocked();
+			},
+			getIsEditorModeControlledByParent = () => {
+				return !!getInheritedEditorMode();
+			},
 			getNewEntityDisplayValue = () => {
 				return newEntityDisplayValueRef.current;
 			},
 			setNewEntityDisplayValue = (val) => {
 				newEntityDisplayValueRef.current = val;
 			},
+			showViewFallback = async () => {
+				// helper for doEdit
+				// If the editor is forced into EDIT mode by parent inheritance, 
+				// but the child editor cannot actually be in edit mode due to permissions or configuration, 
+				// switch the mode to VIEW.
+
+				if (!userCanView) {
+					return;
+				}
+				if (canUser && !canUser(VIEW)) {
+					showPermissionsError(VIEW);
+					return;
+				}
+				if (canProceedWithCrud && !canProceedWithCrud()) {
+					return;
+				}
+				if (editorType === EDITOR_TYPE__INLINE) {
+					return;
+				}
+				const selection = getSelection();
+				if (selection.length !== 1) {
+					return;
+				}
+				setIsEditorViewOnly(true);
+				setEditorMode(EDITOR_MODE__VIEW);
+				setIsEditorShown(true);
+				if (getListeners().onAfterView) {
+					await getListeners().onAfterView();
+				}
+			},
 			doAdd = async (e, values) => {
+				if (getIsEditorDisabledByParent()) {
+					return;
+				}
+				if (getInheritedEditorMode() === EDITOR_MODE__VIEW) {
+					return;
+				}
 				if (canUser && !canUser(ADD)) {
 					showPermissionsError(ADD);
 					return;
@@ -218,10 +294,26 @@ export default function withEditor(WrappedComponent, isTree = false) {
 				}
 
 				if (getListeners().onBeforeAdd) {
-					const listenerResult = await getListeners().onBeforeAdd();
+					// This listener is set by child components using setWithEditListeners()
+					const listenerResult = await getListeners().onBeforeAdd(addValues);
+					if (listenerResult === false) {
+						return;
+					}
+					if (listenerResult) {
+						// allow the listener to override the addValues by returning an object
+						addValues = listenerResult;
+					}
+				}
+				if (onBeforeAdd) {
+					// This listener is set by parent components using a prop
+					const listenerResult = await onBeforeAdd(addValues);
 					if (listenerResult === false) {
 						return;
 					}
+					if (listenerResult) {
+						// allow the listener to override the addValues by returning an object
+						addValues = listenerResult;
+					}
 				}
 
 				if (isTree) {
@@ -278,7 +370,23 @@ export default function withEditor(WrappedComponent, isTree = false) {
 				setIsEditorShown(true);
 			},
 			doEdit = async () => {
+				if (getIsEditorDisabledByParent()) {
+					return;
+				}
+				const inheritedEditorMode = getInheritedEditorMode();
+				if (inheritedEditorMode === EDITOR_MODE__VIEW) {
+					await doView(false);
+					return;
+				}
+				if (inheritedEditorMode === EDITOR_MODE__EDIT && (!userCanEdit || disableEdit || canEditorViewOnly)) {
+					await showViewFallback();
+					return;
+				}
 				if (canUser && !canUser(EDIT)) {
+					if (inheritedEditorMode === EDITOR_MODE__EDIT) {
+						await showViewFallback();
+						return;
+					}
 					showPermissionsError(EDIT);
 					return;
 				}
@@ -300,6 +408,12 @@ export default function withEditor(WrappedComponent, isTree = false) {
 				setIsEditorShown(true);
 			},
 			doDelete = async (args) => {
+				if (getIsEditorDisabledByParent()) {
+					return;
+				}
+				if (getInheritedEditorMode() === EDITOR_MODE__VIEW) {
+					return;
+				}
 				if (canUser && !canUser(DELETE)) {
 					showPermissionsError(DELETE);
 					return;
@@ -413,6 +527,17 @@ export default function withEditor(WrappedComponent, isTree = false) {
 				}
 			},
 			doView = async (allowEditing = false) => {
+				if (getIsEditorDisabledByParent()) {
+					return;
+				}
+				const inheritedEditorMode = getInheritedEditorMode();
+				if (inheritedEditorMode === EDITOR_MODE__EDIT) {
+					await doEdit();
+					return;
+				}
+				if (inheritedEditorMode === EDITOR_MODE__VIEW) {
+					allowEditing = false;
+				}
 				if (!userCanView) {
 					return;
 				}
@@ -443,6 +568,12 @@ export default function withEditor(WrappedComponent, isTree = false) {
 				}
 			},
 			doDuplicate = async () => {
+				if (getIsEditorDisabledByParent()) {
+					return;
+				}
+				if (getInheritedEditorMode() === EDITOR_MODE__VIEW) {
+					return;
+				}
 				if (!userCanEdit || disableDuplicate) {
 					return;
 				}
@@ -516,6 +647,9 @@ export default function withEditor(WrappedComponent, isTree = false) {
 				}
 			},
 			doEditorSave = async (data, e) => {
+				if (getIsEditorDisabledByParent()) {
+					return false;
+				}
 				let mode = getEditorMode() === EDITOR_MODE__ADD ? ADD : EDIT;
 				if (canUser && !canUser(mode)) {
 					showPermissionsError(mode);
@@ -634,6 +768,12 @@ export default function withEditor(WrappedComponent, isTree = false) {
 				setIsEditorShown(false);
 			},
 			doEditorDelete = async () => {
+				if (getIsEditorDisabledByParent()) {
+					return;
+				}
+				if (getInheritedEditorMode() === EDITOR_MODE__VIEW) {
+					return;
+				}
 				if (canUser && !canUser(DELETE)) {
 					showPermissionsError(DELETE);
 					return;
@@ -645,6 +785,46 @@ export default function withEditor(WrappedComponent, isTree = false) {
 				});
 			},
 			calculateEditorMode = () => {
+				// Calculate the editor's effective mode based on parent inheritance, permissions, and local selection state.
+				// Priority order:
+				// 1. If parent is save-locked (unsaved ancestor), force VIEW mode
+				// 2. If parent forces VIEW mode via inheritance, return VIEW (child cannot edit if parent is view-only)
+				// 3. If parent forces EDIT mode via inheritance, check child permissions:
+				//    a. If parent disabled, child disabled, or child cannot edit, return VIEW
+				//    b. If single phantom record, return ADD (new record being created)
+				//    c. Otherwise return EDIT or VIEW based on selection count
+				// 4. Fall back to local selection heuristics (multiple→EDIT, single→VIEW, stays in previous mode if configured)
+				const
+					selection = getSelection(),
+					inheritedEditorMode = getInheritedEditorMode();
+
+				if (getIsEditorDisabledByParent()) {
+					return EDITOR_MODE__VIEW;
+				}
+
+				if (inheritedEditorMode === EDITOR_MODE__VIEW) {
+					return EDITOR_MODE__VIEW;
+				}
+
+				if (inheritedEditorMode === EDITOR_MODE__EDIT) {
+					if (!getCanEditorBeInEditMode()) {
+						return EDITOR_MODE__VIEW;
+					}
+					if (canEditorViewOnly || !userCanEdit || disableEdit) {
+						return EDITOR_MODE__VIEW;
+					}
+					if (canUser && !canUser(EDIT)) {
+						return EDITOR_MODE__VIEW;
+					}
+					if (canRecordBeEdited && canRecordBeEdited(selection) === false) {
+						return EDITOR_MODE__VIEW;
+					}
+					if (selection.length === 1 && !selection[0].isDestroyed && (selection[0].isPhantom || selection[0].isRemotePhantom) && !disableAdd) {
+						return EDITOR_MODE__ADD;
+					}
+					return selection.length ? EDITOR_MODE__EDIT : EDITOR_MODE__VIEW;
+				}
+
 				if (!getCanEditorBeInEditMode()) { // this is a result of canRecordBeEdited returning false
 					return EDITOR_MODE__VIEW;
 				}
@@ -660,7 +840,6 @@ export default function withEditor(WrappedComponent, isTree = false) {
 				}
 
 				// calculateEditorMode gets called only on selection changes
-				const selection = getSelection();
 				let mode;
 				if (editorType === EDITOR_TYPE__SIDE && !_.isNil(UiGlobals.isSideEditorAlwaysEditMode) && UiGlobals.isSideEditorAlwaysEditMode) {
 					// special case: side editor is always edit mode
@@ -688,6 +867,9 @@ export default function withEditor(WrappedComponent, isTree = false) {
 				return mode;
 			},
 			setEditMode = () => {
+				if (getIsEditorDisabledByParent() || getIsEditorModeControlledByParent()) {
+					return;
+				}
 				if (canUser && !canUser(EDIT)) {
 					showPermissionsError(EDIT);
 					return;
@@ -696,6 +878,9 @@ export default function withEditor(WrappedComponent, isTree = false) {
 				setEditorMode(EDITOR_MODE__EDIT);
 			},
 			setViewMode = () => {
+				if (getIsEditorDisabledByParent() || getIsEditorModeControlledByParent()) {
+					return;
+				}
 				if (canUser && !canUser(VIEW)) {
 					showPermissionsError(VIEW);
 					return;
@@ -712,10 +897,20 @@ export default function withEditor(WrappedComponent, isTree = false) {
 				}
 			};
 
+		const
+			inheritedEditorMode = getInheritedEditorMode(),
+			isEditorDisabledByParent = getIsEditorDisabledByParent(),
+			isEditorModeControlledByParent = getIsEditorModeControlledByParent(),
+			isCurrentSelectionUnsaved = getIsCurrentSelectionUnsaved(),
+			isAnyAncestorUnsaved = getIsParentSaveLocked() || isCurrentSelectionUnsaved,
+			isCrudBlockedByInheritedView = inheritedEditorMode === EDITOR_MODE__VIEW;
+
 		useEffect(() => {
 
 			if (editorType === EDITOR_TYPE__SIDE) {
-				if (selection?.length) { // || isAdding
+				if (isEditorDisabledByParent) {
+					setIsEditorShown(false);
+				} else if (selection?.length) { // || isAdding
 					// there is a selection, so show the editor
 					setIsEditorShown(true);
 				} else {
@@ -729,6 +924,19 @@ export default function withEditor(WrappedComponent, isTree = false) {
 			} else {
 				setCanEditorBeInEditMode(true);
 			}
+
+			if (isEditorDisabledByParent || inheritedEditorMode === EDITOR_MODE__VIEW) {
+				setIsEditorViewOnly(true);
+			} else if (inheritedEditorMode === EDITOR_MODE__EDIT) {
+				const canEditInInheritedMode =
+					!canEditorViewOnly &&
+					userCanEdit &&
+					!disableEdit &&
+					(!canUser || canUser(EDIT)) &&
+					(!canRecordBeEdited || canRecordBeEdited(selection));
+				setIsEditorViewOnly(!canEditInInheritedMode);
+			}
+
 			setEditorMode(calculateEditorMode());
 			setLastSelection(selection);
 			
@@ -738,7 +946,7 @@ export default function withEditor(WrappedComponent, isTree = false) {
 			Promise.resolve().then(() => {
 				setIsIgnoreNextSelectionChange(false);
 			});
-		}, [selection]);
+		}, [selection, inheritedEditorMode, isEditorDisabledByParent]);
 
 		if (self) {
 			self.add = doAdd;
@@ -759,7 +967,13 @@ export default function withEditor(WrappedComponent, isTree = false) {
 			setEditorMode(calculateEditorMode());
 		}
 
-		return <WrappedComponent
+		const editorModeContextValue = {
+			effectiveEditorMode: getEditorMode(),
+			isAnyAncestorUnsaved,
+		};
+
+		return <EditorModeContext.Provider value={editorModeContextValue}>
+				<WrappedComponent
 					{...props}
 					ref={ref}
 					disableWithEditor={false}
@@ -769,35 +983,38 @@ export default function withEditor(WrappedComponent, isTree = false) {
 					isEditorShown={getIsEditorShown()}
 					getIsEditorShown={getIsEditorShown}
 					isEditorViewOnly={isEditorViewOnly}
+					isEditorModeControlledByParent={isEditorModeControlledByParent}
+					isEditorDisabledByParent={isEditorDisabledByParent}
 					isAdding={isAdding}
 					isSaving={isSaving}
 					editorMode={getEditorMode()}
 					getEditorMode={getEditorMode}
-					onEditMode={setEditMode}
-					onViewMode={setViewMode}
+					onEditMode={(isEditorModeControlledByParent || isEditorDisabledByParent) ? null : setEditMode}
+					onViewMode={(isEditorModeControlledByParent || isEditorDisabledByParent) ? null : setViewMode}
 					editorStateRef={editorStateRef}
 					setIsEditorShown={setIsEditorShown}
 					setIsIgnoreNextSelectionChange={setIsIgnoreNextSelectionChange}
-					onAdd={(!userCanEdit || disableAdd) ? null : doAdd}
-					onEdit={(!userCanEdit || disableEdit || (canRecordBeEdited && !canRecordBeEdited(selection))) ? null : doEdit}
-					onDelete={(!userCanEdit || disableDelete || (canRecordBeDeleted && !canRecordBeDeleted(selection))) ? null : doDelete}
-					onView={doView}
-					onDuplicate={doDuplicate}
+					onAdd={(isEditorDisabledByParent || isCrudBlockedByInheritedView || !userCanEdit || disableAdd) ? null : doAdd}
+					onEdit={(isEditorDisabledByParent || isCrudBlockedByInheritedView || !userCanEdit || disableEdit || (canRecordBeEdited && !canRecordBeEdited(selection))) ? null : doEdit}
+					onDelete={(isEditorDisabledByParent || isCrudBlockedByInheritedView || !userCanEdit || disableDelete || (canRecordBeDeleted && !canRecordBeDeleted(selection))) ? null : doDelete}
+					onView={isEditorDisabledByParent ? null : doView}
+					onDuplicate={(isEditorDisabledByParent || isCrudBlockedByInheritedView) ? null : doDuplicate}
 					onEditorSave={doEditorSave}
 					onEditorCancel={doEditorCancel}
-					onEditorDelete={(!userCanEdit || disableDelete) ? null : doEditorDelete}
+					onEditorDelete={(isEditorDisabledByParent || isCrudBlockedByInheritedView || !userCanEdit || disableDelete) ? null : doEditorDelete}
 					onEditorClose={doEditorClose}
 					setWithEditListeners={setListeners}
 					isEditor={true}
 					userCanEdit={userCanEdit}
 					userCanView={userCanView}
-					disableAdd={disableAdd}
-					disableEdit={disableEdit}
-					disableDelete={disableDelete}
-					disableDuplicate={disableDuplicate}
-					disableView ={disableView}
+					disableAdd={disableAdd || isEditorDisabledByParent || isCrudBlockedByInheritedView}
+					disableEdit={disableEdit || isEditorDisabledByParent || isCrudBlockedByInheritedView}
+					disableDelete={disableDelete || isEditorDisabledByParent || isCrudBlockedByInheritedView}
+					disableDuplicate={disableDuplicate || isEditorDisabledByParent || isCrudBlockedByInheritedView}
+					disableView ={disableView || isEditorDisabledByParent}
 					setSelection={setSelectionDecorated}
 					isTree={isTree}
-				/>;
+				/>
+			</EditorModeContext.Provider>;
 	});
 }

package/src/Components/Hoc/withPdfButtons.js

@@ -418,6 +418,9 @@ export default function withPdfButtons(WrappedComponent) {
 			},
 		];
 		_.each(buttons, (button) => {
+			if (!button) {
+				return; // guard against null/undefined
+			}
 			if (!_.find(additionalEditButtons, btn => button.key === btn.key)) { 
 				additionalEditButtons.push(button);
 			}

package/src/Components/Hoc/withPresetButtons.js

@@ -68,6 +68,7 @@ export default function withPresetButtons(WrappedComponent) {
 				canDeleteRootNode = false,
 				isSideEditor = false,
 				canEditorViewOnly = false,
+				canRecordBeAdded, // fn(selection) returns bool on if the current record(s) can be added
 				canRecordBeEdited, // fn(selection) returns bool on if the current record(s) can be edited
 				canRecordBeDeleted, // fn(selection) returns bool on if the current record(s) can be deleted
 				canRecordBeDuplicated, // fn(selection) returns bool on if the current record(s) can be duplicated
@@ -239,6 +240,7 @@ export default function withPresetButtons(WrappedComponent) {
 						};
 						icon = Plus;
 						if (isNoSelectorSelected() ||
+							(canRecordBeAdded && !canRecordBeAdded(selection)) ||
 							(isTree && isEmptySelection())
 						) {
 							isDisabled = true;

package/src/Components/Panel/Panel.js

@@ -50,6 +50,7 @@ function Panel(props) {
 			disableTitleChange = false,
 
 			// Content
+			renderWhileCollapsed = false,
 			topToolbar = null,
 			children = null,
 			bottomToolbar = null,
@@ -139,14 +140,7 @@ function Panel(props) {
 		className += ' ' + filteredClassName;
 	}
 
-	return <VStackNative
-				{...testProps(self?.reference)}
-				className={className}
-				style={style}
-			>
-				{isDisabled && <Mask />}
-				{headerComponent}
-				{!isCollapsed && <>
+	let content = <>
 					{topToolbar}
 					<VStack
 						className={clsx(
@@ -169,7 +163,41 @@ function Panel(props) {
 					</VStack>
 					{bottomToolbar}
 					{footer}
-				</>}
+				</>;
+	if (renderWhileCollapsed) {
+		content = <Box
+					className={clsx(
+						'Panel-Box',
+						...(isCollapsed ? 
+							[
+								'w-[0px]',
+								'h-[0px]',
+								'overflow-hidden',
+							] :
+							[
+								'w-full',
+								'h-full',
+							])
+					)}
+				>
+					{content}
+				</Box>;
+	} else {
+		if (isCollapsed) {
+			// hide the content when collapsed
+			content = null;
+		}
+	}
+	
+
+	return <VStackNative
+				{...testProps(self?.reference)}
+				className={className}
+				style={style}
+			>
+				{isDisabled && <Mask />}
+				{headerComponent}
+				{content}
 			</VStackNative>;
 
 }

package/src/Components/Pms/Editor/PmEventsEditor.js

@@ -92,18 +92,18 @@ export default function PmEventsEditor(props) {
 				case PM_EVENT_TYPES__INITIAL:
 				case PM_EVENT_TYPES__WORK_ORDER:
 				case PM_EVENT_TYPES__ALERT:
+				case PM_EVENT_TYPES__COMPLETE:
 					setIsIntervalHidden(true);
 					setIsDateHidden(true);
 					setIsMeterReadingHidden(false);
 					setIsDetailsHidden(false);
 					setIsPmTechnicianHidden(true);
 					break;
-				case PM_EVENT_TYPES__COMPLETE:
 				case PM_EVENT_TYPES__RESET:
 					setIsIntervalHidden(true);
 					setIsDateHidden(true);
-					setIsMeterReadingHidden(false);
-					setIsDetailsHidden(false);
+					setIsMeterReadingHidden(true);
+					setIsDetailsHidden(true);
 					setIsPmTechnicianHidden(true);
 					break;
 				case PM_EVENT_TYPES__DELAY_BY_DAYS:

package/src/Components/Pms/Screens/PmsManager.js

@@ -17,7 +17,7 @@ import ClockRegular from '../../Icons/ClockRegular.js';
 import OilCan from '../../Icons/OilCan.js';
 import TabBar from '../../Tab/TabBar.js';
 import TreeSpecific from '../Layout/TreeSpecific/TreeSpecific.js';
-import UpcomingPmsGrid from '../Grid/UpcomingPmsGrid.js';
+import UpcomingPmsGrid from '@src/Components/Grid/UpcomingPmsGrid.js';
 import PmEventsFilteredGridEditor from '@src/Components/Grid/PmEventsFilteredGridEditor.js';
 import PmEventsFilteredSideGridEditor from '@src/Components/Grid/PmEventsFilteredSideGridEditor.js';
 import _ from 'lodash';

package/src/Components/Screens/Manager.js

@@ -31,6 +31,7 @@ function ManagerScreen(props) {
 		[isModeSet, setIsModeSet] = useState(false),
 		[allowSideBySide, setAllowSideBySide] = useState(false),
 		[mode, setModeRaw] = useState(SCREEN_MODES__SIDE),
+		isDisabled = propsToPass._panel?.isDisabled ?? false, // this is kind of a hack, since there's no Panel, but it works
 		actualMode = (!allowSideBySide || mode === SCREEN_MODES__FULL) ? SCREEN_MODES__FULL : SCREEN_MODES__SIDE,
 		setMode = (newMode) => {
 			if (!allowSideBySide && newMode === SCREEN_MODES__SIDE) {
@@ -97,7 +98,7 @@ function ManagerScreen(props) {
 					onFullWidth={() => setMode(SCREEN_MODES__FULL)}
 					onSideBySide={() => setMode(SCREEN_MODES__SIDE)}
 				/>
-				{isRendered && isModeSet && whichComponent}
+				{isRendered && isModeSet && !isDisabled && whichComponent}
 			</VStackNative>;
 }
 

package/src/Components/Toolbar/PaginationToolbar.js

@@ -11,15 +11,17 @@ const PaginationToolbar = forwardRef((props, ref) => {
 	const {
 			toolbarItems = [],
 			disablePageSize = false,
+			disableMinimizing = false,
 			minimize,
 		} = props,
 		[minimizeLocal, setMinimizeLocal] = useState(minimize),
 		propsToPass = _.omit(props, 'toolbarItems'),
 		showPagination = true,//props.Repository?.totalPages > 1,
 		onLayout = (e) => {
-			if (minimize) {
-				return; // skip if already minimized
+			if (minimize || disableMinimizing) {
+				return;
 			}
+			
 			// Note to future self: this is using hard-coded values.
 			// Eventually might want to make it responsive to actual sizes
 
@@ -32,7 +34,7 @@ const PaginationToolbar = forwardRef((props, ref) => {
 				threshold = pagingToolbarMinwidth + toolbarItemsMinwidth,
 				shouldMinimize = width < threshold;
 
-			if (shouldMinimize !== minimize) {
+			if (shouldMinimize !== minimizeLocal) {
 				setMinimizeLocal(shouldMinimize);
 			}
 		};

package/src/Components/Viewer/Viewer.js

@@ -72,6 +72,7 @@ function Viewer(props) {
 			onEditMode,
 			onClose,
 			onDelete,
+			isEditorModeControlledByParent = false,
 
 			// parent container
 			selectorId,
@@ -350,9 +351,11 @@ function Viewer(props) {
 			return <HStack key={ix} className="Viewer-HStack4 px-2 pb-1">{element}</HStack>;
 		},
 		buildAncillary = () => {
-			const components = [];
+			const
+				validAncillaryItems = _.filter(ancillaryItems, (item) => !!item), // filter out any null/undefined items
+				components = [];
 			setAncillaryButtons([]);
-			if (ancillaryItems.length) {
+			if (validAncillaryItems.length) {
 
 				// add the "scroll to top" button
 				getAncillaryButtons().push({
@@ -363,7 +366,7 @@ function Viewer(props) {
 					tooltip: 'Scroll to top',
 				});
 
-				_.each(ancillaryItems, (item, ix) => {
+				_.each(validAncillaryItems, (item, ix) => {
 					let {
 						type,
 						title = null,
@@ -561,7 +564,7 @@ function Viewer(props) {
 
 						<Toolbar className="justify-end">
 							<HStack className="flex-1 items-center">
-								<Text className="text-[20px] ml-1 text-grey-500">View Mode</Text>
+									<Text className="text-[20px] ml-1 text-grey-500">{isEditorModeControlledByParent ? 'View Mode (Inherited)' : 'View Mode'}</Text>
 							</HStack>
 							{onEditMode && (!canUser || canUser(EDIT)) && 
 								<Button

package/src/Constants/PmSchedules.js

@@ -0,0 +1 @@
+export const PM_SCHEDULES__ONE_OFF = 200;

package/src/Contexts/EditorModeContext.js

@@ -0,0 +1,5 @@
+import { createContext } from 'react';
+
+const EditorModeContext = createContext(null);
+
+export default EditorModeContext;

package/src/Functions/buildAdditionalButtons.js

@@ -5,6 +5,11 @@ import _ from 'lodash';
 export default function buildAdditionalButtons(configs, self, handlerArgs = {}) {
 	const additionalButtons = [];
 	_.each(configs, (config) => {
+
+		if (!config) {
+			return;
+		}
+		
 		const {
 				key,
 				color = '#fff',

package/src/PlatformImports/Web/Attachments.js

@@ -388,6 +388,19 @@ function AttachmentsElement(props) {
 				downloadInBackground(url, {}, Attachments.headers);
 			}
 		},
+		onDownloadAll = () => {
+			if (!model || _.isNil(modelid.current) || _.isArray(modelid.current)) {
+				alert('Cannot download all attachments without a single selected model and model id.');
+				return;
+			}
+
+			const url = Attachments.api.baseURL + 'Attachments/downloadAll/' + encodeURIComponent(model) + '/' + encodeURIComponent(modelid.current);
+			if (isPwa) {
+				alert('Files cannot be downloaded and viewed within an iOS PWA. Please use the Safari browser instead.');
+			} else {
+				downloadInBackground(url, {}, Attachments.headers);
+			}
+		},
 
 		// dropzone
 		onDropzoneChange = async (files) => {
@@ -1087,6 +1100,19 @@ function AttachmentsElement(props) {
 						)}
 						tooltip="List View"
 					/>
+					<Box className="spacer flex-1" />
+					<IconButton
+						onPress={onDownloadAll}
+						icon={Download}
+						className={clsx(
+							'w-[25px]',
+							'h-[25px]',
+							'px-[2px]',
+							'py-[2px]',
+						)}
+						isDisabled={!model || _.isNil(modelid.current) || _.isArray(modelid.current) || files.length === 0}
+						tooltip="Download All"
+					/>
 				</HStack>
 
 				{content}

package/src/Constants/EditorModes.js

@@ -1,2 +0,0 @@
-export const EDITOR_MODE_ADD = 'EDITOR_MODE_ADD';
-export const EDITOR_MODE_EDIT = 'EDITOR_MODE_EDIT';